How to rotate with shapes inside canvas?

Question

I am using canvas to load image using:

var canvas=document.getElementById('canvas');
var context=canvas.getContext('2d');

context.scale(0.5,0.5);
canvas.setAttribute('width', tempImg.width*0.5);
canvas.setAttribute('height', tempImg.height*0.5);
context.drawImage(tempImg ,0,0,canvas.width,canvas.height);

I am using other canvas to draw shape at run time using :

var annCanvas=document.getElementById('annCanvas');
var annContext=annCanvas.getContext('2d');
context.beginPath();
context.lineWidth=4;
context.strokeRect(x,y,w,h);
context.stroke();

Both canvas's position is absolute, so they look like overlape on each other.but i want to rotate both canvas simultaneously (by angle value 90,180,270,0).

Thanks in advance

Answer 1

use this:

context.rotate(90); // rotates 90 deg clockwise