HTML Canvas using javascript to rotate text without moving the background image

Question

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/

Answer 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;