How can I rotate a figure in canvas, html5?

Question

im tried to rotate a string using this

window.onload= function(){ var canvas=document.getElementById("foo"); var context=canvas.getContext("2d"); context.moveTo(250, 50); context.lineTo(250, 250); context.stroke(); context.rotate(0.30); }; 

what am I doing wrong? I think I skipped some steps. can anyone explain?

Answer 1

Use this instead:

 context.rotate(0.30); // <<< set current transformation to rotated context.moveTo(250, 50); context.lineTo(250, 250); context.stroke(); 

Answer 2

rotate () actually rotates the entire coordinate system. What is the default value of 0.0 (the upper left corner of your canvas). You need to do something in this direction:

 context.save(); // saves the coordinate system context.translate(250,50); // now the position (0,0) is found at (250,50) context.rotate(0.30); // rotate around the start point of your line context.moveTo(0,0) // this will actually be (250,50) in relation to the upper left corner context.lineTo(0,200) // (250,250) context.stroke(); context.restore(); // restores the coordinate system back to (0,0) 

Check out this link for a really good explanation of how the translate () and rotate () functions work: tutsplus tutorial

Steve