How to use Canvas Scale Transform in HTML5

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

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.



    cntx.scale(x, y);








            margin: 0px;

            padding: 0px;




        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);






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





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
© 2020 DotNetHeaven. All rights reserved.