How to use Canvas Translate Transform in HTML5

In this article I am going to explain about Canvas Translate Transform in Html5.
  • 2128

Canvas Translate Transform in Html5

Translate Transform is an Canvas tool that is use for move entire canvas element. Translate Transform enable us to move entire canvas element on specifics position. For its we use Translate() method that define canvas height and width position by which we can move on specifics position.



    cntx.translate(x, y);






      body {







        window.onload = function () {

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

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

            var rectWidth = 150;

            var rectHeight = 75;


            //In following method we can set the position of Canvas

            cntx.translate(cnv.width / 4, cnv.height / 4);


            cntx.fillStyle = "green";

            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.