Easy Tutorial
❮ Prop Range Form Met Canvas Arcto ❯

HTML canvas translate() Method

Canvas Object

Example

Draw a rectangle at position (10,10), then set the new (0,0) position to (70,70). Draw another rectangle (note that it now starts drawing from position (80,80)):

JavaScript:


Browser Support

Internet Explorer 9, Firefox, Opera, Chrome, and Safari support the translate() method.

Note: Internet Explorer 8 and earlier versions do not support the <canvas> element.


Definition and Usage

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

Note: When you call methods like fillRect() after translate(), the values are added to the x and y coordinate values.

| JavaScript Syntax: | context.translate(x, y); | | --- | --- |

Parameter Values

Note: You can specify one or both parameters.

Parameter Description
x The value to add to the horizontal coordinate (x).
y The value to add to the vertical coordinate (y).

Canvas Object

❮ Prop Range Form Met Canvas Arcto ❯