rhengles · August 24, 2017 16:23
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html>
 <head>
  <meta charset="utf-8" />
  <title>Canvas Rainbow</title>
 </head>
 <body>
  <canvas></canvas>
  <script src="index.js"></script>
 </body>
 </html>
diff --git a/index.js b/index.js
 // https://jsfiddle.net/qw549Luf/

 var w = 256 * 6;
 var h = 256 * 2;
 var pixels = w * h;

 var r = [  1,   1,   0,   0,   0,   1];
 var g = [  0,   1,   1,   1,   0,   0];
 var b = [  0,   0,   0,   1,   1,   1];
 var one256 = 1 / 256;

 var cv = document.querySelector('canvas');
 cv.width = w;
 cv.height = h;
 var ct = cv.getContext('2d');

 var img = ct.createImageData(w,h);

 var sectsize = 256 * 4;
 var rowsize = sectsize * 6;

 for ( var row = 0; row < h; row++ ) {
 	var rowpos = row * rowsize;
 	for ( var sect = 0; sect < 6; sect++ ) {
  	var sectpos = rowpos + sect * sectsize;
  	for ( var col = 0; col < 256; col++ ) {
    	var colpos = sectpos + col * 4;
    	var snext = (sect + 1) % 6;
      var fright = col * one256;
      var fleft = 1 - fright;
    	var sr = r[sect];
    	var sg = g[sect];
    	var sb = b[sect];
      var srn = r[snext];
      var sgn = g[snext];
      var sbn = b[snext];
      var cr = (sr * fleft + srn * fright) * 255 | 0;
      var cg = (sg * fleft + sgn * fright) * 255 | 0;
      var cb = (sb * fleft + sbn * fright) * 255 | 0;
      img.data[colpos + 0] = cr;
      img.data[colpos + 1] = cg;
      img.data[colpos + 2] = cb;
      img.data[colpos + 3] = 255;
    }
  }
 }

 ct.putImageData(img, 0, 0);
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8" />
	<title>Canvas Rainbow</title>
	</head>
	<body>
	<canvas></canvas>
	<script src="index.js"></script>
	</body>
	</html>
	// https://jsfiddle.net/qw549Luf/

	var w = 256 * 6;
	var h = 256 * 2;
	var pixels = w * h;

	var r = [ 1, 1, 0, 0, 0, 1];
	var g = [ 0, 1, 1, 1, 0, 0];
	var b = [ 0, 0, 0, 1, 1, 1];
	var one256 = 1 / 256;

	var cv = document.querySelector('canvas');
	cv.width = w;
	cv.height = h;
	var ct = cv.getContext('2d');

	var img = ct.createImageData(w,h);

	var sectsize = 256 * 4;
	var rowsize = sectsize * 6;

	for ( var row = 0; row < h; row++ ) {
	var rowpos = row * rowsize;
	for ( var sect = 0; sect < 6; sect++ ) {
	var sectpos = rowpos + sect * sectsize;
	for ( var col = 0; col < 256; col++ ) {
	var colpos = sectpos + col * 4;
	var snext = (sect + 1) % 6;
	var fright = col * one256;
	var fleft = 1 - fright;
	var sr = r[sect];
	var sg = g[sect];
	var sb = b[sect];
	var srn = r[snext];
	var sgn = g[snext];
	var sbn = b[snext];
	var cr = (sr * fleft + srn * fright) * 255 \| 0;
	var cg = (sg * fleft + sgn * fright) * 255 \| 0;
	var cb = (sb * fleft + sbn * fright) * 255 \| 0;
	img.data[colpos + 0] = cr;
	img.data[colpos + 1] = cg;
	img.data[colpos + 2] = cb;
	img.data[colpos + 3] = 255;
	}
	}
	}

	ct.putImageData(img, 0, 0);