title: drawing a path and then an image in html5
body: <p>I'm trying to draw a circle and then have an image follow the circle around. Later I want to rotate and move the image around with respect to the circle drawn. The problem I'm facing is that when I try to rotate the image it won't rotate. It also doesn't show me an error in the console. I have functions allowing me to move the circle around and the image moves with it, I just can't seem to rotate the image.</p>
  
  <p>Here is the code:</p>
  
  <pre><code>draw: function(){
  //draw self on canvas;
  //intended only to be called from update, should never
  //need to be deliberately called
  ctx = this.context;
  
  ctx.save();
  ctx.fillStyle="#000000";
  ctx.beginPath();
  
  //void arc(double x, double y,
  //         double radius, double startAngle, double endAngle,
  //          optional boolean anticlockwise = false);
  ctx.arc(this.x,this.y,this.size,0,Math.PI*2,true);
  ctx.closePath();
  ctx.fill();
  //ctx.translate(this.x, this.y);
  ctx.rotate(this.imgAngle);
  //draw the hammer
  
  ctx.drawImage(this.hammer,this.hammerX,this.hammerY,100,100)
  ctx.rotate(Math.PI/2);
  
  ctx.restore();
  
  },
  </code></pre>