canvas.html

<canvas id="myCanvas" width="400" height="300" style="border:1px solid #000000;"> </canvas>

<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

var width = c.width / 6;
var height = c.height / 4;
var o = 0;

function paint() {
  o -= 1;
  for(var y = 0; y < c.height; y += height) {
    for(var x = 0; x < c.width; x += width) {
      var h = o + 360 * (x + y) / 400;
      var s = "100";
      var l = "60";
      var hsl = "hsl(" + h + "," + s + "%," + l + "%)";
                       console.log("fill", hsl);
      ctx.fillStyle = hsl;
      ctx.fillRect(x, y, width, height);
    }
  }
}
setInterval(paint, 40);
</script>