translate method

Specifies values to move the origin point in a canvas.

HTML Canvas 2D Context, Section 3Internet Explorer 9

Syntax

CanvasRenderingContext2D.translate(x, y);

Parameters

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

Remarks

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.

Examples

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


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

</head>
  <body>
      <canvas id="demo"  width="300" height="300">This browser or document mode doesn't support canvas</canvas>
  <script>
      var canvas = document.getElementById("demo")
      var ctx = canvas.getContext('2d');
      canvas.style.border = "2px solid";  // Put a border around the canvas.
      ctx.beginPath();
      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.                      
  </script>

  </body>
</html> 


See also

CanvasRenderingContext2D

 

 

Show:
© 2014 Microsoft