Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to add default horizontal scaling to a canvas-type text with JavaScript?
We can add default horizontal scaling to a canvas-type text by accessing the canvas context and setting the scale property to a specific value. This can be done by calling the context's scale method and passing in the desired value for the horizontal scaling. By doing this, all text drawn on the canvas will have the default horizontal scaling applied to it.
HTML Canvas
HTML canvas is a 2D drawing surface that can be used to create dynamic and interactive graphics, charts, and animations on web pages. It is an HTML element that allows developers to draw graphics using JavaScript.
The canvas element is a container for graphics and can be manipulated using the canvas API to draw shapes, text, and images. It's a powerful tool that allows developers to create rich, interactive user experiences on the web without the need for external libraries or plugins.
Approach
To add default horizontal scaling to a canvas-type text with JavaScript, you can use the following steps −
Create a canvas element and set its width and height.
Get the 2D context of the canvas by calling the getContext() method.
Use the fillText() method to draw the text on the canvas.
Set the default horizontal scaling by calling the scale() method on the 2D context and passing in the scaling factor as the first argument.
Draw the text again on the canvas using the fillText() method.
The following is an example of how this can be done −
// Create a canvas element
var canvas = document.createElement("canvas");
canvas.width = 500;
canvas.height = 500;
// Get the 2D context of the canvas
var ctx = canvas.getContext("2d");
// Draw the text on the canvas
ctx.fillText("Hello World!", 50, 50);
// Set the default horizontal scaling
ctx.scale(1.5, 1);
// Draw the text again on the canvas
ctx.fillText("Hello World!", 50, 50);
Example
<!DOCTYPE html>
<html>
<head>
<title>Canvas Text Scaling</title>
</head>
<body>
<canvas id="myCanvas"></canvas>
<script>
// Get the canvas element by its id
var canvas = document.getElementById("myCanvas");
canvas.width = 500;
canvas.height = 500;
// Get the 2D context of the canvas
var ctx = canvas.getContext("2d");
// Set the font and text color
ctx.font = "30px Arial";
ctx.fillStyle = "black";
// Draw the text on the canvas
ctx.fillText("Hello World!", 50, 50);
// Set the default horizontal scaling
ctx.scale(1.5, 1);
// Draw the text again on the canvas
ctx.fillText("Hello World!", 50, 100);
</script>
</body>
</html>
Explanation
In this example, the text "Hello World!" is drawn on the canvas with a default horizontal scaling of 1.5. This means that the text will be scaled horizontally by a factor of 1.5, making it appear wider on the canvas. The text will be drawn twice, the first time with the normal size and the second with the size scaled by 1.5.
193 Views
