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
How to add default horizontal scaling to a canvas-type text with JavaScript?
We can add default horizontal scaling to canvas text by using the scale() method on the 2D rendering context. This method transforms all subsequent drawing operations, including text, by scaling them horizontally and vertically.
HTML Canvas
HTML canvas is a 2D drawing surface that allows developers to create dynamic graphics, charts, and animations using JavaScript. The canvas element provides a powerful API for drawing shapes, text, and images directly in the browser.
The canvas element acts as a container for graphics and can be manipulated using the Canvas API to create rich, interactive user experiences without external libraries or plugins.
Understanding Canvas Text Scaling
The scale() method applies a scaling transformation to the canvas coordinate system. When you call ctx.scale(scaleX, scaleY), all subsequent drawing operations are scaled by these factors:
scaleX - Horizontal scaling factor (1.0 = normal width, 1.5 = 50% wider, 0.5 = 50% narrower)
scaleY - Vertical scaling factor (1.0 = normal height)
Basic Example
<!DOCTYPE html>
<html>
<head>
<title>Canvas Text Scaling</title>
</head>
<body>
<canvas id="myCanvas" width="600" height="300"></canvas>
<script>
// Get canvas and context
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
// Set font properties
ctx.font = "24px Arial";
ctx.fillStyle = "black";
// Draw normal text
ctx.fillText("Normal Text", 50, 50);
// Apply horizontal scaling (1.5x width, 1x height)
ctx.scale(1.5, 1);
// Draw scaled text
ctx.fillText("Scaled Text (1.5x)", 33, 100);
</script>
</body>
</html>
Advanced Example with Multiple Scales
<!DOCTYPE html>
<html>
<head>
<title>Multiple Text Scaling</title>
</head>
<body>
<canvas id="scaleCanvas" width="700" height="400"></canvas>
<script>
var canvas = document.getElementById("scaleCanvas");
var ctx = canvas.getContext("2d");
ctx.font = "20px Arial";
ctx.fillStyle = "blue";
// Normal text
ctx.fillText("1.0x: Normal Width", 50, 50);
// Save current state
ctx.save();
// 1.2x horizontal scaling
ctx.scale(1.2, 1);
ctx.fillText("1.2x: Slightly Wider", 42, 100);
// Restore and apply different scaling
ctx.restore();
ctx.save();
// 2.0x horizontal scaling
ctx.scale(2.0, 1);
ctx.fillText("2.0x: Double Width", 25, 150);
// Restore and apply narrow scaling
ctx.restore();
ctx.scale(0.7, 1);
ctx.fillText("0.7x: Condensed Text", 71, 200);
</script>
</body>
</html>
Best Practices
When working with canvas text scaling, consider these important points:
Use save() and restore() - Always save the canvas state before scaling and restore it afterward to avoid affecting other drawing operations
Adjust coordinates - After scaling, you may need to adjust text positioning since the coordinate system is transformed
Reset transformations - Use
ctx.setTransform(1, 0, 0, 1, 0, 0)to reset all transformations
Using save() and restore() Pattern
<!DOCTYPE html>
<html>
<head>
<title>Proper Scaling Pattern</title>
</head>
<body>
<canvas id="patternCanvas" width="500" height="200"></canvas>
<script>
var canvas = document.getElementById("patternCanvas");
var ctx = canvas.getContext("2d");
ctx.font = "18px Arial";
ctx.fillStyle = "green";
// Method 1: Using save/restore (Recommended)
ctx.fillText("Before scaling", 50, 50);
ctx.save(); // Save current state
ctx.scale(1.8, 1); // Apply scaling
ctx.fillText("Scaled text", 28, 100);
ctx.restore(); // Restore original state
ctx.fillText("After scaling (normal again)", 50, 150);
</script>
</body>
</html>
Conclusion
Canvas text horizontal scaling is achieved using the scale() method with different horizontal and vertical factors. Always use save() and restore() to manage transformations properly and avoid affecting other canvas operations.
405 Views
