Skip to content

Instantly share code, notes, and snippets.

@syntagmatic
Created February 21, 2013 00:00
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save syntagmatic/5000831 to your computer and use it in GitHub Desktop.
Save syntagmatic/5000831 to your computer and use it in GitHub Desktop.
Spiral with Canvas Coordinate Transforms
<canvas id="picture" width=960 height=500></canvas>
<script>
var canvas = document.getElementById("picture");
var ctx = canvas.getContext("2d");
var width = canvas.width;
var height = canvas.height;
ctx.translate(width/2,height/2);
ctx.globalAlpha = 0.4;
for (var i = 0; i<100; i++) {
ctx.fillStyle = "rgb(" + (2*i) + "," + i + ",0)";
ctx.translate(i*2/3,0);
ctx.rotate(Math.PI/20);
ctx.fillRect(40,40,2*i,i);
}
</script>
<style>
html, body {
margin: 0;
padding: 0;
width: 100%;
}
</style>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment