translate method

Specifies values to move the origin point in a canvas.

HTML Canvas 2D Context, Section 3Internet Explorer 9



CanvasRenderingContext2D.translate(x, y);


x [in]

Type: number

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

y [in]

Type: number

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

Return value

This method does not return a value.

Standards information


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.


The following code example uses translate to create two squares that are offset by 50 pixels. Try the example in your browser

<!DOCTYPE html> 
  <title>Canvas Translate example</title>

      <canvas id="demo"  width="300" height="300">This browser or document mode doesn't support canvas</canvas>
      var canvas = document.getElementById("demo")
      var ctx = canvas.getContext('2d'); = "2px solid";  // Put a border around the canvas.
      ctx.lineWidth = "3";
      ctx.strokeStyle = "blue";
      ctx.strokeRect(50, 50, 150, 150);
      ctx.translate(50, 50);   // Move the square down by 50 pixels.
      ctx.strokeRect(50, 50, 150, 150);
      ctx.stroke();           // Draw it.                      


See also