Rotating your text with canvas
The HTML5 canvas methods can do more than just coloring the text or adding drop shadows. You can also use it to move or manipulate the objects in the canvas area. In this recipe, we will rotate the objects in the canvas.
Getting ready
This recipe builds on top of the previous recipes. If you skipped them, that's okay, you can go back to the previous recipe to refer to the complete code.
How to do it…
Once you have your previous recipe's canvas set up, the basic steps for rotation are easy. Add a rotate method to the beginning of the function:
context.rotate(Math.PI/4,0,0);
You will probably notice that the text rotated right off of the canvas. What happened? The rotate method rotates the entire canvas and is not aware ...
Get HTML5 and CSS3: Building Responsive Websites now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.
