javascript - html rotate entire canvas by 90 degrees -

i have image drawn html cavas. able rotate image 90 degrees can't seem find example on how rotate entire canvas image, object on canvas.

does have example code rotate entire canvas 90 degrees?

i accepted anwser below wanted provide additional example code : http://jsfiddle.net/vtynf/1/

<canvas id="mycanvas" width="578" height="200"></canvas>  <script>   var canvas = document.getelementbyid('mycanvas');   var context = canvas.getcontext('2d');    context.translate(canvas.width/2,canvas.height/2)    context.rotate(90 * (math.pi / 180));      context.beginpath();   context.rect(188 - canvas.width/2, 50 - canvas.height/2, 200, 100);   context.fillstyle = 'yellow';   context.fill();   context.linewidth = 7;   context.strokestyle = 'black';   context.stroke(); </script> 

you have apply rotation before draw canvas. can't rotate drawn.

so:

to rotate canvas, content.rotate() expects value in radians. first, lets make simple converting degrees radians using:

function getradianangle(degreevalue) {     return degreevalue * math.pi / 180; }  

you may want translate canvas first before rotating it's origin set correctly.

context.translate(context.width/2,context.height/2);

once know value want, rotate canvas before draw anything!

please note, in example, rectangle have drawn, being offset in first 2 parameters of context.rect(x,y,w,h)`.

i find it's easier set widths variables, simple math re position box automatically, notice sits in center, , rotates nicely!

demo: http://jsfiddle.net/shannonhochkins/vtynf/6/