How to use Canvas Scale Transform in HTML5

In this article I am going to explain about Canvas Transform Scale in Html5.
  • 1953

Canvas Scale Transform in Html5

We use Canvas Scale Transform for defined height and width of Canvas element. For its we use Scale() method where defined X and Y properties. X specifies width and y specifies height on an element.

Syntax

<script>

    cntx.scale(x, y);

</script>

Example

<html>

<head>

    <style>

        body

        {

            margin: 0px;

            padding: 0px;

        }

    </style>

    <script>

        window.onload = function () {

            var cnvs = document.getElementById("myCanvas");

            var cntx = cnvs.getContext("2d");

            var rectWidth = 150;

            var rectHeight = 75;

 

 

            cntx.translate(cnvs.width / 3, cnvs.height / 4);

 

            //In following method we can set height and width

            cntx.scale(2, 1)

 

            cntx.fillStyle = "brown";

            cntx.fillRect(-rectWidth / 2, -rectHeight / 2, rectWidth, rectHeight);

        };

 

    </script>

</head>

<body>

    <canvas id="myCanvas" width="578" height="200"></canvas>

</body>

</html>

Output

scale.jpg

Further Readings

You may also want to read these related articles: here
 
Ask Your Question 
 
Got a programming related question? You may want to post your question here
 
© 2019 DotNetHeaven. All rights reserved.