Summary -

In this topic, we described about the Canvas Translations with detailed example.

translate() transform method used to translate the HTML5 Canvas context. HTML5 canvas offers translate(x, y) process to move the canvas and its origin to a distinct point in the grid.

The translate() method remaps the (0,0) position on the canvas.

Syntax -

object.translate(x, y);

Parameter Description
X Specifies the value, that how much the canvas will move left or right x-axis wise.
Y Specifies the value, that how much the canvas will move up and down y-axis wise.
Note! We can specify one or both parameters.

Example -

The following example describes how to draw different rectangles using above method.
<!DOCTYPE html>
<html>
  <body>
      <canvas id="myCanvas" width="450" height="220"
                     style="border:2px solid #00d3d3;">
            Your browser does not support the HTML5 canvas tag.
      </canvas>
      <script>
            var c = document.getElementById("myCanvas");
            var ctx = c.getContext("2d");
            ctx.fillStyle  ="#329ea8";
            ctx.fillRect(10, 10, 100, 50);
            ctx.translate(100, 50);
            ctx.fillRect(10, 10, 100, 50);
            ctx.translate(100, 50);
            ctx.fillRect(10, 10, 100, 50);
            ctx.translate(100, 50);
            ctx.fillRect(10, 10, 100, 50);
     </script>
  </body>
</html>

Output -

Your browser does not support the HTML5 canvas tag.

Browser Support

The following numbers in the table stipulate the initial browser version that completely endorses the property.

Property Chrome Edge Firefox Safari Opera
translations Yes 9.0 and above Yes Yes Yes