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.
The scale transformation causes drawing operations to be multiplied by a scale factor in the X and Y directions. And you can scale operations in the X and Y directions independently. You can provide a scaling factor for X and a scaling factor for Y. So the way that scale transformation works is pretty simple. So suppose I had a rectangle that was 20 pixels wide and 10 pixels high. Well, if you put that through a scale transform and I pass in say a factor of 2 for both the X and the Y direction, the result of that would be, if I call the same function, even though I said fill the rectangle with 20 pixels wide and 10 high, because of the scale factor, this would be 40 pixels wide and 20 pixels high. So let's take a look at that in code and see how it works.
So here I am in the code editor, and I've got my Scale Transform section of my snippets. So let's open up our scale example. So here is our scaling code. Let's go back to the snippets. So I'm going to copy this guy over and paste. So, a couple of things I want to point out. First, I'm using the blue fill style to fill the rectangle at the 0,0 location.
So what I'm going to do now is perform a scale transform and draw the same size rectangle again, only at a different location. So here you can see the width and the height of the same. I'm just offsetting this rectangle so we can see it. I'm also using the save and restore in order to save the drawing context of the canvas and restore it after doing any drawing. So let's save. Let's go out to the scale_start. So you can see, here is the rectangle, right. Here is the first one. Here is the second one.
Now they're both being told to draw at the same size, but because of the scaling factor, this one is larger. So let's take a look at where save and restore canvas state come in handy. So suppose these weren't here, and suppose I had another call to scale, only in this case I want to scale things down. So I would say, instead of 1.50.5-- and let's change this one to 0.5 as well, and I'll do the same thing with the fillRect, and in fact I'll offset this one a little bit--325--so we can see it.
Now let's go over to the canvas and see what happened. We'll refresh. Actually, I should probably move it a little bit more. So you can see that the scale factor is not really affecting this the way that we'd expect it to, because what's happening is I'm first doing a scale-up and then a scale back down. If I put save and restore around this, watch how that changes things.
Now we save, and then we go back out. Now let's refresh. See, now things are really being shrunk down. So what was happening was, since I was calling this scale function after this one--remember, transforms are additive. So I go from a scale factor of 1 to a scale factor of 1.5 and then 2. Then I go to scale factor of a half. Well, that only cuts this scale factor in half, not the original one. But by putting the save and restore around it, this scale function operates on the drawing context's regional scale factor, which is 1 and 1 in both the X and Y directions.
So now we've seen how to use a scale transform and we've even seen how to use save and restore to save the canvas's drawing context so that transforms don't interfere with each other.
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.