Open In App

HTML canvas scale() Method

Improve
Improve
Like Article
Like
Save
Share
Report

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


Last Updated : 12 Jun, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads