title: Rotating and moving an image in a canvas element?
body: <p>I would like to move and rotate an image of a ball in a  element.  The ball is 68x68 and the canvas is 300x200.  The ball moves along the x and y axis, flipping its x and y velocity when it hits a wall - all of this works.  I just can't figure how to do rotation on top of the movement.</p>
  
  <p>My draw() function, which I call through window.setInterval every 30ms, looks something like this:</p>
  
  <pre><code>  var draw = function() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      ctx.save();
      ctx.rotate(ball_radians);
      ctx.drawImage(ball_img, x, y);
      ctx.restore();
  
      // calculate new x, y, and ball_radians
    }
  </code></pre>
  
  <p>This makes the ball fly around the screen, so clearly I'm doing something wrong.  What am I missing?</p>