rotate image inside HTML5 canvas, it will rotate and directly draw the image to the canvas, without saving and restoring the cordination of the context (ctx.save() & ctx.restore() ).

rotate image in canvas with javascript HTML5

var canvas;
var ctx;


var gameDiv =document.getElementById('game');
  canvas =document.createElement("canvas");
	gameDiv.appendChild(canvas);

	canvas.width = 600;
	canvas.height = 475;
	ctx=canvas.getContext("2d");

odin = new Image();
odin.src = "http://devimages.apple.com/iphone/gamecenter/images/hero-gamecenter.jpg";

odin.onload = function(){
    //draw function

    //you could save here cordination system of the context with ctx.save();

    ctx.drawImage(odin, 50,50);                                       // image without rotation
    //ctx.clearRect(0,0,canvas.width, canvas.height);                 // dont clear the example image
    ctx.translate( 50 + (odin.width /2), 50 + (odin.height /2));      // set orgin 0,0 of context to the center of the image                
    ctx.rotate(Math.PI * 0.75 );                                      // rotate the context it will rotate from the orgin
    ctx.drawImage(odin,-odin.width /2,-odin.height /2);               // draw the rotated image.

    //you could now do ctx.restore to the original translate and rotate.
    
}