Skip to content
Related Articles

Related Articles

HTML | canvas scale() Method
  • Last Updated : 28 Jun, 2019

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.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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 contex = 
            x.getContext("2d"); 
        contex.strokeRect(10, 10, 150, 100); 
        contex.scale(2, 2);
        contex.strokeRect(50, 50, 150, 100);
    </script
<center>
</body
  
</html

chevron_right


Output:



Example 2: This example uses canvas scale() Method to decrease the drawing size.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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 contex = x.getContext("2d"); 
        contex.strokeRect(10, 10, 150, 100); 
        contex.scale(0.5, 0.5);
        contex.strokeRect(50, 50, 150, 100);
    </script
</center>
</body
  
</html>                    

chevron_right


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

full-stack-img

My Personal Notes arrow_drop_up
Recommended Articles
Page :