translate method
Specifies values to move the origin point in a canvas.
![]() ![]() |
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
- HTML Canvas 2D Context, Section 3
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
Show:

