We here at Switch On The Code have been working with and playing around with the HTML5 canvas element. So, today’s tutorial is going to build on top of the previous Image drawing tutorial and show you how to rotate drawn images, or really whatever you want.
Rotating About Object’s Center
The first type of rotation we are going to take a look at is rotating an object about its center. This is one of the simplest types of rotation to achieve using the canvas element. We are going to be using the sweet Gorilla pic from last week.
The basic idea is that we are going to translate the canvas to the point we want to rotate around, rotate the canvas, and then translate the canvas back to 0,0. If you have some experience with graphics engines this should sound pretty familiar. In code this looks like the below snippet.
myImage.onload = function() {
var xpos = 300; // the x position of the center of the image
var ypos = 200; // the y position of the center of the image
ctx.save(); // save the current state of the canvas context
ctx.translate(xpos, ypos);
ctx.rotate(47 * Math.PI / 180); // rotate by 47 degrees and convert to radians
ctx.translate(–xpos, –ypos);
ctx.drawImage(myImage, xpos – myImage.width / 2, ypos – myImage.height / 2);
ctx.restore(); // restore the previous state of the canvas context
}
myImage.src = ‘image.png’;
The commented code should be pretty self explanatory but there are two out of the ordinary calls I would like to mention. The .save() and the .restore() are very useful because this is how we keep the canvas rotation from affecting all the other things we draw on the canvas. For a simple example this may not be needed but it will be for anything more complex. But really this is all you need to rotate an object around its center.
Rotating About A Point
The second type of rotation we are going to look at is rotating an object around a point in space (not the object’s center). This is a more complicated way to rotate objects. Now, you might be thinking why would I want to do this? Well, the common use case is when you want an object to rotate around another object. Take a look at the diagram below and I’ll go over some of the concepts. You’ll also notice we swapped out our big gorilla pic for a smaller one – makes the rotation easier to see.
As you can see above we are going to be interested in two points, the rotation point and the object’s center. The other value that we are interested in is the distance between the two points, the marked radius. The radius is used to update the actual draw position of the image. Alright, enough chatter let’s jump into some code.
myImage = new Image();
myImage.onload = function() {
// regular rotation about a point
var angle = 124 * Math.PI / 180; // 124 degrees angle of rotation in radians
var rx = 300, ry = 200; // the rotation x and y
var px = 300, py = 50; // the objects center x and y
var radius = ry – py; // the difference in y positions or the radius
var dx = rx + radius * Math.sin(angle); // the draw x
var dy = ry – radius * Math.cos(angle); // the draw y
ctx.save();
ctx.translate(dx, dy);
ctx.rotate(angle);
ctx.translate(–dx, –dy);
ctx.drawImage(myImage, dx – myImage.width / 2, dy – myImage.height / 2);
ctx.restore();
}
myImage.src = ‘smallimage.png’;
So, what do we have going on up there? Well we first calculate the rotation angle in radians, then define some variables to hold the rotation point and the position of the object at 0 degrees. After that we figure out the radius. Next we figure out where the object should be drawn with some very basic triangle math. This point will also be where we translate to because we want to rotate the object like we did in the last example but draw it in the correct spot. The actual drawing code should be familiar from the first part of the tutorial. All this results in something that looks like the below image – minus the annotations.
That pretty much wraps it up for this tutorial. If you have any problems or questions feel free to leave a comment below. And keep an eye out for upcoming canvas tutorials.
Want to learn more? Check out these great HTML 5 Canvas books: