/

HTML / CSS / JavaScript Tutorial

JavaScript canvas2d object method: translate()

[this page | pdf | back links]

The translate() method of the JavaScript DOM object returned by the getContext("2d") method applied to the HTML <canvas> element applies a translation to current drawing, i.e. adjusts the position of its origin, remapping the position of the coordinate (0,0).

 

It has the following syntax with the following parameters.

 

context.translate(x, y)

 

Parameter

Required / Optional

Description

x

Required

Value added to x-coordinates

y

Required

Value added to y-coordinates

 

EXAMPLE:


HTML USED IN THIS EXAMPLE:
<!DOCTYPE html>
<html> <!-- Copyright (c) Nematrian Limited 2018 -->
<head></head>
<body>
<span id="element"></span>

<script>
var x2 = document.createElement("CANVAS");
x2.setAttribute("width", "200");
x2.setAttribute("height", "100");
x2.setAttribute("style", "border: 1px solid black");
var c2 = x2.getContext("2d");
c2.strokeStyle = "blue";
c2.strokeRect(60, 10, 40, 30);
c2.translate(50, 10);
c2.strokeStyle = "red";
c2.strokeRect(60, 10, 40, 30);
document.getElementById("element").appendChild(x2);
</script>

</body>
</html>

FUNCTION THAT MAY ASSIST IN TESTING WHETHER FEATURE IS SUPPORTED:
function isSupportedJavaScriptMethodCanvas2dTranslate() {
  var x = document.createElement("CANVAS"); var c = x.getContext("2d"); return !!c.translate;
}


NAVIGATION LINKS
Contents | Prev | Next | JavaScript DOM (and BOM)


Desktop view | Switch to Mobile