Spiral with Canvas Coordinate Transforms

index.html

<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>