This page is Ready to Use

Notice: The WebPlatform project, supported by various stewards between 2012 and 2015, has been discontinued. This site is now available on github.

translate

Summary

Modifies the transformation matrix of this context by adding the scaling transformation described by the arguments to the transformation matrix. The arguments represent the scale factors in the horizontal (x) and vertical (y) directions. The factors are multiples.

Method of apis/canvas/CanvasRenderingContext2Dapis/canvas/CanvasRenderingContext2D

Syntax

var object = object.translate(x, y);

Parameters

x

Data-type
String

The value to add to horizontal (or x) coordinates.

y

Data-type
String

The value to add to vertical (or y) coordinates.

Return Value

Returns an object of type DOM NodeDOM Node

Type: HRESULT

If this method succeeds, it returns S_OK. Otherwise, it returns an HRESULT error code.

Examples

This short example translates the drawing matrixes by 50px to the right and 50px to the bottom

ctx.fillStyle = "lime";
ctx.fillRect(0,0,100,100);
ctx.translate(50,50);   // move the drawing coordinates by 50 px
ctx.fillStyle = "rgba(255,0,0,0.5)";
ctx.fillRect(0,0,100,100);  // note the x/y start positions at 0 (is actually 50)

Full example that draws two rects, the second one 50x50px translated.

<!DOCTYPE html>
<html>
<head>
  <title>Canvas Textmetrics</title>
  <script>
    function draw() {
      var canvas = document.getElementById("MyCanvas");
      if (canvas.getContext) {  // check for support
        var ctx = canvas.getContext("2d");

        ctx.fillStyle = "lime";
        ctx.fillRect(0,0,100,100);
        ctx.translate(50,50);   // move the drawing coordinates by 50 px
        ctx.fillStyle = "rgba(255,0,0,0.5)";
        ctx.fillRect(0,0,100,100);  // note the x/y start positions at 0 (is actually 50)

      }
    }
  </script>
</head>
<body onload="draw();">
  <canvas id="MyCanvas" width="400" height="400">This browser or document mode doesn't support canvas</canvas>
</body>
</html>

Notes

The translate method effectively remaps the (0,0) origin on a canvas. You can specify one or both parameters. When you call a canvas method such as lineTo, the translate value is added to the respective x-coordinate and y-coordinate values. translate does not return an error if either value or any derived value is out of the canvas dimensions.

Related specifications

W3C HTML Canvas 2D Specification
W3C Candidate Recommendation

Attributions