Start learning with our library of video tutorials taught by experts. Get started
Viewed by members. in countries. members currently watching.
One of the most exciting additions that HTML5 offers to designers is the ability to draw free-form graphics on a drawing surface known as the Canvas. In this course, author Joe Marini introduces the technical concepts behind Canvas and shows how to perform drawing operations directly in a web page. The course covers drawing basic and complex shapes, setting colors and styles, adding shadows, patterns, and gradients, more advanced techniques such as scaling, rotating, and compositing objects, and how to incorporate Canvas elements in a slideshow and an animation.
Rotate transforms cause subsequent drawing operations to be rotated by a given angle. And remember, whenever we say angle in canvas, we're talking about radians; we're not talking about degrees. It's also important to note that rotation takes place around whatever the current origin of the canvas is, not the center of an object that you're about to draw. If you want to rotate around an object's center, or for that matter around any point on a particular object, you should use the translate transform to move the origin to the object center or whatever point you want to rotate around, then rotate, and then translate the origin back.
The rotate transform just takes one argument, and that's the angle argument. The angle specifies the amount to rotate the drawing operations that come after you set the rotation transform. Remember, that's radians, it's not degrees. So let's jump over to the code and take a look at rotate. So I've got my Rotate Transform snippets up here, and let's open up the rotate example. So, a couple of examples to show.
First, let's do the simple one. We'll copy and we'll paste. So what I'm doing here is causing the fillStyle of the context to be blue, and I'm going to fill a rectangle at 153, so X is 150, Y is 30, and the rectangle is 100 pixels wide and 50 pixels high. And then after that I'm going to rotate by half a radian and then draw the same rectangle again at the same location.
So let's save and let's bring this up in the browser. So you can see that what happened was the first rectangle was drawn with no rotation. The second rectangle, however, was rotated by half of the radian in the clockwise direction. And you can see that if you were to draw a straight line from the top of this rectangle, it would go almost to where the origin is, pretty much the same point that this one is pointing out right here. So rotation did not take place around the center of the object; it took place around the origin up here.
So if we wanted to say rotate an object around the center of itself, we'd have to first change the origin to the center of the object, then rotate it. So let's go back to the code and see if we can do that. So let's go back to the snippets, and let's take this example. We'll go back to the rotation. So we'll get rid of this one, and we'll replace it with a new one. Let's take a look at what's going on here. So I'm actually combining two different transforms here to achieve a particular effect.
So I start out by translating the origin from the upper-left corner to the exact middle of the canvas. So I divide the width in half, divide the height in half. That gives me the middle. Then I calculate a radian equivalent to a 20-degree rotation. Then I have this for loop, which start at 0, goes to 3600, and increments the degrees by 20 degrees each time. So I've divided this up into a certain number of steps, in this case 18, and each time we step, we're going to rotate by this radian, which is a 20-degree rotation.
We're going to stroke a line each time, so let's see what that looks like. So I go back over here and I refresh, and you can see what's happened is the original line that I drew right here, has been rotated around itself in a series of 18 steps, 20 degrees each time. So again, what's happening is I've translated to the middle of the canvas. Then I have a call to move to, which moves me 100 pixels negative, which means it moves me to the left in the X direction, and then I lineTo 100 in the positive X direction. So I'm creating a 200-pixel-long line centered about whatever the current origin is, which is in the middle of canvas, but it's rotated each time.
Each time to this for loop, I'm rotating by an additional 20 degrees. That's this radian right here. So for 18 steps, we rotate, and that's what causes each subsequent draw of the line to be drawn through the new origin but rotated each way. So this example shows us how to use two transforms together to achieve an effect, as well as using the rotate transform to rotate objects around the origin of the canvas.
There are currently no FAQs about HTML5: Graphics and Animation with Canvas.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.