Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
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.
Get unlimited access to all courses for just $25/month.Become a member
82 Video lessons · 101483 Viewers
61 Video lessons · 88250 Viewers
71 Video lessons · 72117 Viewers
56 Video lessons · 103881 Viewers
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.
Your file was successfully uploaded.