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.…

Resume Transcript Auto-Scroll

Author

Released

6/3/2011

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.