Canvas Translate
You are Here:
Canvas Translate
ctx.translate() canvas method adds a translation transformation to the current matrix.
This example draws a square that is moved from its default position by the translate() method. An unmoved square of the same size is then drawn for comparison.
Example
HTML Online Editor
<!DOCTYPE html>
<html lang="en-US">
<body>
<canvas id="point" width="90" height="190">
Your browser does not support the canvas element.
</canvas>
<script>
var canvas = document.getElementById('point');
var ctx = canvas.getContext('2d');
// Moved square
ctx.translate(0, 100);
ctx.fillStyle = '#339933';
ctx.fillRect(0, 0, 80, 80);
// Reset current transformation matrix to the identity matrix
ctx.setTransform(1, 0, 0, 1, 0, 0);
// Unmoved square
ctx.fillStyle = '#8c8c8c';
ctx.fillRect(0, 0, 80, 80);
</script>
</body>
</html>
Syntax
ctx.translate(x, y)
Attributes Value
Value | Explanation |
---|---|
x | Specifies the distance to move in the horizontal direction.
|
y | Specifies the distance to move in the vertical direction.
|
Reminder
Hi Developers, we almost covered 93% of Canvas Tutorials with examples for quick and easy learning.
We are working to cover every Single Concept in Canvas.
Please do google search for:
Join Our Channel
Join our telegram channel to get an instant update on depreciation and new features on HTML, CSS, JavaScript, jQuery, Node.js, PHP and Python.
This channel is primarily useful for Full Stack Web Developer.