From the course: Learning HTML Canvas

Unlock the full course today

Join today to access over 22,600 courses taught by industry experts or purchase this course individually.

Using scaling

Using scaling

From the course: Learning HTML Canvas

Start my 1-month free trial

Using scaling

“

- [Instructor] The next transform we're going to learn about is The Scale Transform which causes drawing operations to be multiplied by a scale factor in the x and y directions. So the way that the scale transform works is pretty simple. So suppose I use the fillRect function to create a rectangle that is 20 pixels wide and 10 pixels high. If I call the canvas's scale function, with a factor of two for each axis, and then call the same fillRect function again with the same values. The result would be a rectangle that's 40 pixels wide and 20 pixels high. So let's try this out and make sure that the theory is correct. So once again here in the editor, I've got scale_start open. And you can see I've already got some code that draws a rectangle that's 100 by 50 pixels. So I'm going to add the code to scale the next rectangle and then draw the same size rect again. So I'll use the scale function to do that, so I'll save off the current drawing state. And we learned about this earlier in…

Contents