Skip to content

Instantly share code, notes, and snippets.

@astro
Created July 31, 2014 20:42
Show Gist options
  • Save astro/9be5d383ae6b1b99c4f5 to your computer and use it in GitHub Desktop.
Save astro/9be5d383ae6b1b99c4f5 to your computer and use it in GitHub Desktop.
<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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment