HTML5 Canvas Translate () method

Instance

Draws a rectangle at position (10,10) and sets the new (0,0) position to (70,70). Draw the new rectangle again (note that the rectangle is now drawn from the position (80,80)):

Your Browser does not support the HTML5 canvas tag.

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);

Browser support

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

Note: Internet Explorer 8 or earlier browsers do not support the <canvas> element.

Definition and usage

The translate () method remap 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.

JavaScript Syntax:

Context.translate (x,y);

Parameter values

Parameters	Description
X	Value added to the horizontal coordinate (x)
Y	Value added to the vertical coordinate (y)

HTML5 Canvas Translate () method