Latest web development tutorials
 

HTML canvas translate() Method

< Canvas Object

Example

Draw a rectangle in position (10,10), set new (0,0) position to (70,70). Draw same rectangle again (notice that the rectangle now starts in position (80,80):

YourbrowserdoesnotsupporttheHTML5canvastag.

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillRect(10,10,100,50);
ctx.translate(70,70);
ctx.fillRect(10,10,100,50);
Try it Yourself »

Browser Support

The numbers in the table specify the first browser version that fully supports the method.

Method
translate() 4.0 9.0 3.6 4.0 10.1

Definition and Usage

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

Note: When you call a method such as fillRect() after translate(), the value is added to the x- and y-coordinate values.

Illustration of the <span class=translate() method"/>

JavaScript syntax: context.translate(x,y);

Parameter Values

Note: You can specify one or both parameters.

Parameter Description Play it
x The value to add to horizontal (x) coordinates Play it »
y The value to add to vertical (y) coordinates Play it »

< Canvas Object