Canvas Basic Animation

index.html

<canvas id="painting" width=960 height=500></canvas>
<script>
canvas = document.getElementById("painting")
screen = canvas.getContext("2d")

t = 0
function frame() {
  i = canvas.width
  while (i -= 10) {
    j = canvas.height
    while (j -= 10) {
      hue =  (t * i * j / 3000) % 300 
      screen.fillStyle = "hsl(" + hue + ",70%,54%)"
      screen.fillRect(i,j,10,10)
    }
  }

  t++
  requestAnimationFrame(frame)
}

frame()
</script>

thumbnail.png