We explored using keyboard input to move a shape on an HTML5 canvas here http://html5.litten.com/moving-shapes-on-the-html5-canvas-with-the-keyboard/. Now we’ll take a look at using input from the mouse. With a few simple calculations, you can drag and drop shapes on the canvas with your mouse.
Example of canvas rotate
rotate() rotates around the canvas' origin (width/2,height/2) therefore we translate the context to the center of the canvas before the rotation so that the rotation is about the center (and translate back afterwards).