The HTML canvas scale() Method is used to scale the current drawing into smaller or larger size. After scaling the drawing, all the feature of drawing scaled. It will have to define before the canvas. Syntax:
context.scale( scalewidth, scaleheight )
Parameter Values:
- scalewidth: It scale the width of current drawing, (1=100%, 0.5=50%, 2=200%, and so on).
- scaleheight: It scale the height of current drawing, (1=100%, 0.5=50%, 2=200%, and so on)
Example 1: This example uses canvas scale() Method to increase the drawing size.
html
<!DOCTYPE html>
<html>
<head>
<title>
HTML canvas scale() Method
</title>
</head>
<body>
<center>
<h1 style="color:green">GeeksforGeeks</h1>
<canvas id="GFG"
width="500"
height="300">
</canvas>
<script>
var x =
document.getElementById("GFG");
var context =
x.getContext("2d");
context.strokeRect(10, 10, 150, 100);
context.scale(2, 2);
context.strokeRect(50, 50, 150, 100);
</script>
<center>
</body>
</html>
|
Output: 
Example 2: This example uses canvas scale() Method to decrease the drawing size.
html
<!DOCTYPE html>
<html>
<head>
<title>
HTML canvas scale() Method
</title>
</head>
<body>
<center>
<h1 style="color:green">GeeksforGeeks</h1>
<canvas id="GFG"
width="500"
height="300">
</canvas>
<script>
var x = document.getElementById("GFG");
var context = x.getContext("2d");
context.strokeRect(10, 10, 150, 100);
context.scale(0.5, 0.5);
context.strokeRect(50, 50, 150, 100);
</script>
</center>
</body>
</html>
|
Output: 
Supported Browsers: The browser supported by HTML canvas scale() Method are listed below:
- Google Chrome
- Internet Explorer 9.0 or above
- Firefox
- Safari
- Opera
Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape,
GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out -
check it out now!
Last Updated :
12 Jun, 2023
Like Article
Save Article