0

I'm working on a little project using a canvas, Simply put it puts text ontop of an image.
There is a slider to change the position and size, But nothing for rotating the text.
I've searched around on stackoverflow looking for a way to rotate the text without the background image being effected, But nothing has helped yet.
I know about 

 context.rotate( Math.PI / 2 );
 context.translate( canvas.width / 2, canvas.height / 2 );

But this seems to be rotating the whole thing, Background included.

Can someone point me in the right direction?
Link to the pen:

http://codepen.io/TryHardHusky/details/KdQQVq/

User K
  • 380
  • 3
  • 16
  • 1
    Haven´t tried it but quite sure it´s similar to: http://stackoverflow.com/questions/7496674/how-to-rotate-one-image-in-a-canvas – juvian Oct 23 '15 at 15:48
  • 1
    Try this http://stackoverflow.com/questions/3167928/drawing-rotated-text-on-a-html5-canvas – TinMonkey Oct 23 '15 at 15:52

1 Answers1

1

Use save and restore.

ctx.save(); // pushes canvas state onto a stack
// your text code
ctx.restore(); // pops the last save off the stack.

Remember for each save you must have a restore. They can be nested. It saves onto a stack, meaning last in. first off.

Or slightly faster for your situation

// your text code
ctx.setTransform(1,0,0,1,0,0); // reset the transform to default;
Blindman67
  • 51,134
  • 11
  • 73
  • 136
  • hey, I tried using the save and restore along with `.rotate(Math.PI*2)` but all this did is move the text slightly to the right with no rotation – User K Oct 23 '15 at 16:59
  • Update: I got the rotate working but it's rotating starting from the far left corner, Any way to center rotate it? – User K Oct 23 '15 at 17:03
  • Yes you need to offset the image by half its width and height to rotate it around the center. To work out the text width you need to use `ctx.measureText()` or use `ctx.textAlign()` and `ctx.textBaseline()` to center the text. Just a side note to help us answer your questions in future. It is much better if you include all the code that is relevant to the question not just a where you think the problem is. Linking to places like codepen does not help as it causes my version of Chrome to crash 50% of the time and if not is so slow I run out off coffee before it starts. – Blindman67 Oct 23 '15 at 17:18