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
Increase or decrease units in HTML5 Canvas grid
HTML5 canvas provides the scale(x, y) method to increase or decrease the units in the canvas grid. This allows you to draw scaled down or enlarged shapes and bitmaps by transforming the coordinate system.
The method takes two parameters: x is the scale factor in the horizontal direction and y is the scale factor in the vertical direction. Both parameters must be positive numbers. Values greater than 1 enlarge, while values between 0 and 1 shrink the grid.
Syntax
context.scale(x, y);
Parameters
- x: Horizontal scaling factor (positive number)
- y: Vertical scaling factor (positive number)
Basic Example
<!DOCTYPE HTML>
<html>
<head>
<title>Canvas Scale Example</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 original rectangle
ctx.fillStyle = 'blue';
ctx.fillRect(10, 10, 50, 30);
// Scale by 2x horizontally and 1.5x vertically
ctx.save();
ctx.scale(2, 1.5);
ctx.fillStyle = 'red';
ctx.fillRect(40, 20, 50, 30); // This will appear larger
ctx.restore();
// Scale down by 0.5
ctx.save();
ctx.scale(0.5, 0.5);
ctx.fillStyle = 'green';
ctx.fillRect(200, 100, 50, 30); // This will appear smaller
ctx.restore();
</script>
</body>
</html>
Advanced Example with Spirograph
<!DOCTYPE HTML>
<html>
<head>
<title>Canvas Scale with Spirograph</title>
</head>
<body>
<canvas id="spirograph" width="400" height="400" style="border: 1px solid #000;"></canvas>
<script>
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;
const x2 = (R + r) * Math.cos(i * Math.PI / 72) - (r + O) * Math.cos(((R + r) / r) * (i * Math.PI / 72));
const 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();
}
function drawShape() {
const canvas = document.getElementById('spirograph');
const ctx = canvas.getContext('2d');
ctx.fillStyle = '#f0f0f0';
ctx.fillRect(0, 0, 400, 400);
// First row - uniform scaling
ctx.strokeStyle = '#fc0';
ctx.lineWidth = 1.5;
ctx.save();
ctx.translate(50, 50);
drawSpirograph(ctx, 22, 6, 5);
ctx.translate(100, 0);
ctx.scale(0.75, 0.75);
drawSpirograph(ctx, 22, 6, 5);
ctx.translate(133.333, 0);
ctx.scale(0.75, 0.75);
drawSpirograph(ctx, 22, 6, 5);
ctx.restore();
// Second row - vertical scaling only
ctx.strokeStyle = '#0cf';
ctx.save();
ctx.translate(50, 150);
ctx.scale(1, 0.75);
drawSpirograph(ctx, 22, 6, 5);
ctx.translate(100, 0);
ctx.scale(1, 0.75);
drawSpirograph(ctx, 22, 6, 5);
ctx.translate(100, 0);
ctx.scale(1, 0.75);
drawSpirograph(ctx, 22, 6, 5);
ctx.restore();
// Third row - horizontal scaling only
ctx.strokeStyle = '#cf0';
ctx.save();
ctx.translate(50, 250);
ctx.scale(0.75, 1);
drawSpirograph(ctx, 22, 6, 5);
ctx.translate(133.333, 0);
ctx.scale(0.75, 1);
drawSpirograph(ctx, 22, 6, 5);
ctx.translate(177.777, 0);
ctx.scale(0.75, 1);
drawSpirograph(ctx, 22, 6, 5);
ctx.restore();
}
drawShape();
</script>
</body>
</html>
Key Points
-
Cumulative scaling: Multiple
scale()calls multiply together -
Use save/restore: Always pair with
ctx.save()andctx.restore()to avoid affecting other drawings - Coordinate transformation: Scaling affects all subsequent drawing operations, including positions
- Non-uniform scaling: Different x and y values create stretched or compressed effects
Conclusion
The scale() method is essential for creating responsive graphics and visual effects in HTML5 Canvas. Remember to use save() and restore() to manage transformations effectively.
Updated on: 2026-03-15T23:18:59+05:30
415 Views
Advertisements