YouTipMet Canvas Translate
# HTML canvas translate() Method
[ Canvas Object](#)
## Example
Draw a rectangle at position (10,10), set the new (0,0) position to (70,70). Draw a new rectangle again (note that the rectangle now starts drawing from 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 Β»](#)
* * *
## 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 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](#)