CODEWITHSUNDEEP
javascriptjquerycanvas
User K
User K

Reputation: 380

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

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/

Upvotes: 0

Views: 510

Answers (1)

Blindman67
Blindman67

Reputation: 54026

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;

Upvotes: 1

Related Questions