Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
Translating HTML5 canvas
Use the translate() method to move the HTML5 canvas coordinate system. The translate(x, y) method shifts the canvas origin to a different point in the grid.
The x parameter moves the canvas left (negative) or right (positive), and y moves it up (negative) or down (positive).
Syntax
context.translate(x, y);
Parameters
| Parameter | Description |
|---|---|
x |
Horizontal distance to move the origin |
y |
Vertical distance to move the origin |
Simple Translation Example
<!DOCTYPE html>
<html>
<head>
<title>Canvas Translation</title>
</head>
<body>
<canvas id="myCanvas" width="400" height="300" style="border:1px solid #000;"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
// Draw rectangle at origin (0,0)
ctx.fillStyle = 'blue';
ctx.fillRect(0, 0, 50, 50);
// Translate origin to (100, 50)
ctx.translate(100, 50);
// Draw rectangle at new origin
ctx.fillStyle = 'red';
ctx.fillRect(0, 0, 50, 50);
// Translate again
ctx.translate(100, 50);
ctx.fillStyle = 'green';
ctx.fillRect(0, 0, 50, 50);
</script>
</body>
</html>
Advanced Example: Spirograph Pattern
<!DOCTYPE html>
<html>
<head>
<title>Spirograph with Translation</title>
<style>
#canvasContainer {
width: 420px;
height: 420px;
margin: 0px auto;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<div id="canvasContainer">
<canvas id="mycanvas" width="400" height="400"></canvas>
</div>
<script>
function drawShape() {
const canvas = document.getElementById('mycanvas');
if (canvas.getContext) {
const ctx = canvas.getContext('2d');
// Fill background
ctx.fillStyle = 'white';
ctx.fillRect(0, 0, 400, 400);
// Create 3x3 grid of spirographs
for (let i = 0; i < 3; i++) {
for (let j = 0; j < 3; j++) {
ctx.save();
ctx.strokeStyle = "#FF0066";
// Translate to grid position
ctx.translate(50 + j * 100, 50 + i * 100);
drawSpirograph(ctx, 10 * (j + 3) / (j + 2), -2 * (i + 3) / (i + 1), 10);
ctx.restore();
}
}
} else {
alert('Canvas not supported in this browser.');
}
}
function drawSpirograph(ctx, R, r, O) {
let x1 = R - O;
let y1 = 0;
let i = 1;
ctx.beginPath();
ctx.moveTo(x1, y1);
do {
if (i > 20000) break;
let x2 = (R + r) * Math.cos(i * Math.PI / 72) -
(r + O) * Math.cos(((R + r) / r) * (i * Math.PI / 72));
let y2 = (R + r) * Math.sin(i * Math.PI / 72) -
(r + O) * Math.sin(((R + r) / r) * (i * Math.PI / 72));
ctx.lineTo(x2, y2);
x1 = x2;
y1 = y2;
i++;
} while (x2 != R - O && y2 != 0);
ctx.stroke();
}
// Draw when page loads
window.onload = drawShape;
</script>
</body>
</html>
How It Works
The translate() method moves the coordinate system's origin. When you draw at (0,0) after translation, you're actually drawing at the translated position. Use save() and restore() to preserve the original coordinate system.
Key Points
- Translation is cumulative - each
translate()adds to the previous translation - Use
ctx.save()before andctx.restore()after to isolate transformations - Negative values move left/up, positive values move right/down
- Translation affects all subsequent drawing operations
Conclusion
The translate() method is essential for positioning canvas elements. Combined with save() and restore(), it allows precise control over drawing locations without manually calculating coordinates.
Updated on: 2026-03-15T23:18:59+05:30
477 Views
Advertisements