HTML | canvas translate() Method
The HTML canvas translate() Method is used to specify that the object is translated by given translate amount. Syntax:
context.translate(x, y)
Parameter Values:
- x: It stores the value, that how much the canvas will move left or right means x-axis wise.
- y: It stores the value, that how much the canvas will move up and down means y-axis wise.
Example 1: Here you can check by changing the x-axis and y-axis.
html
<!DOCTYPE html><html><head> <title> HTML canvas translate() Method </title></head><body> <center> <h1 style="color:green">GeeksforGeeks</h1> <canvas id="GFG" width="500" height="250" style="border:2px solid gray"> </canvas> <script> var geeks = document.getElementById("GFG"); var context = geeks.getContext("2d"); context.translate(250, 110); //context.translate(x, y); context.fillStyle = "#00FF00"; context.fillRect(20, 20, 150, 100); </script> </center></body></html> |
Output: 
Example 2:
html
<!DOCTYPE html><html><head> <title> HTML canvas translate() Method </title></head><body> <center> <h1 style="color:green">GeeksforGeeks</h1> <canvas id="GFG" width="500" height="250" style="border:2px solid gray"> </canvas> <script> var geeks = document.getElementById("GFG"); var context = geeks.getContext("2d"); context.rect(00, 00, 150, 100); context.fillStyle = "green"; context.fill(); context.stroke(); context.translate(250, 50); context.rect(100, 100, 150, 100); context.fillStyle = ""; context.fill(); context.stroke(); </script> </center></body></html> |
Output: 
Note: If you call fillRect() method after translate() method, the value is added to the x- and y-coordinate values. Supported Browsers:
- Google Chrome
- Internet Explorer 9.0 or above
- Firefox
- Safari
- Opera
Please Login to comment...