HTML Reference Manual

HTML tag大全

HTML canvas translate() method

translate() is a Canvas 2D API adds a translation transformation method by moving the canvas and canvas origin x horizontally, origin y vertically in the grid.

HTML canvas reference manual

Online example

At position (10,10)) Draw a rectangle, setting the new (0,0) position to (70,70). Draw the same rectangle again (note that the rectangle is now from (80,80) Starting position:

Example

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML canvas translate() method usage-Basic Tutorial(oldtoolbag.com)</<title>
</<head>
<body>
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3">
Your browser does not support HTML5　canvas tag.
</canvas>
<script>
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);
</script>
</body>
</html>

Test to see ‹/›

Browser compatibility

IEFirefoxOperaChromeSafari

Internet Explorer 9and Firefox, Opera, Chrome, and Safari support 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 value

Note: You can specify one or both parameters.

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

HTML canvas reference manual

HTML: <template> tag