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:

<script>

    function scalingCanvasExample(context) {

        context.save();

        context.translate(100;100);

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

        context.restore()

        context.scale(5,5);

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

        context.restore();

    }

</script>

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.