HTML5 Canvas tutorial how to scale an image by transformation

html5 canvas tutorialhow to scale an image by using transformation

This html5 Canvas tutorial how to scale an image by tranformation is html5 canvas tutorial for beginner.In these tutorials we are describing basic concept of html5 Canvas. There are three forms as well as three types of transformation supported by HTML5 Canvas. The term transformation is known as revolution,conversion,modification and change. However This tranformation (modification,conversion,revolution,change) consist of three types. Moreover The transformation changes are Change of context placement(translation), size(scaling) and angle(rotation).

Transformation Types in HTML5 Canvas are:

transformation of translation
scaling transformation
lastone is transformation of rotation

`scaling`

The transformation of `scaling` is one kind of transformation in HTML5 Canvas by which we can apply change of size of image or text in html5 canvas.`scale` means increase. When we say `scaling` ,our meaning is increase or decrease the size of image,shape or text.The code for `scale()` method using html5 canvas will be.
`context.scale(x,y);`
Here x is change in width and y stands for change in height.If value of x and y is 1 there is no change. Less than 1 value means decrease and more than one means increase. For example 0.5 value will decrease to half and 2 value will double the size. When we use scale value for `x` and `y` for starting point also change ,see in below example ,the second rectangle GREEN one stating point is with coordinate(50,200),but when use scale method and change `x` by ratio 2 and cahnge `y` by ratio 0.5.The net effect will become (100,100) and second rectangle starting point is in the middle of first rectangle which has coordinate(100,100).

—————————————————————-

Complete code for html5 canvas tutorial for transformation using `scale( )`method



<!DOCTYPE html>
<html>
    <head>
        <title>Drawing </title>
    </head>
    <body>
        <canvas id ="myCanvas" width ="400" height ="300" style="border: 1px solid blue;" >
        </canvas>
        <script>
            var  canvas = document.getElementById("myCanvas");
            var context =canvas.getContext('2d');
            var rectWidth=200;
            var rectHeight =200;

                //rectangle before translation
            context.fillStyle="red";    
            context.fillRect(0,0,rectWidth,rectHeight);
            context.scale(2.0,0.5);
            // rectangle after scaling

            context.fillStyle="blue";
            context.fillRect(50,200,rectWidth,rectHeight);
            
        </script>

        
    </body>
</html>

Tutorial for transformation by using `scale()` method in browser using html5 Canvas

===============================================================