HTML5 Scaling Canvas

We can always scale object on canvas with the help of context.scale transformation routine. In order to scale an object, we need to draw it first and then scale to our specified parameters.

Let’s see how HTML5 scale such object for us in the code:


                function scalingCanvasExample(context) {



                    //place your draw image code in between translate      and restore



                    //place your draw image for scaling code in      between translate and restore




The context.scale function accepts two different arguments which are effectively dimensions of the scaling x and y. We used 5 for both dimensions with the intention of scaling object to be five times larger.

With the help of HTML5 Scaling capabilities we can create one object and apply multiple scaling to it. It can be very useful if we try to draw multiple items of the same time but different in size. For instance, we can use scaling on the canvas with multiple houses. Once located closer and farther away on the background. This way we don’t have to draw images multiple times. We just reuse same image multiple times saving ourselves time. 

Featured pages


Learn about HTML5 architecture, design principles and patterns on HTML5 Overview Tutorial. Become …


Learn about HTML5 tags and discover a new list of HTML5 tags. Find out about HTML5 tags support by…


 Learn HTML5 development techniques, tips and tricks on our website. Find out what is required…

Date Time Picker

HTML5 forms use date and time controls regularly. HTML5 date and time controls are used by booking …