html tutorial - scale() Method in HTML5 Canvas - html5 - html code - html form



Scale method in html5 canvas

Learn html - html tutorial - Scale method in html5 canvas - html examples - html programs

  • The scale() is the Method of HTML canvas.
  • The scale() method is used to set the size of the diagram(bigger or smaller).

Syntax for scale() Method in HTML5 Canvas:

context.scale(scalewidth,scaleheight);

Parameter values for scale() Method in HTML5 Canvas:

Parameter Description
scalewidth Scales the width of the current drawing (1=100%, 0.5=50%, 2=200%, etc.)
scaleheight Scales the height of the current drawing (1=100%, 0.5=50%, 2=200%, etc.)

Sample Coding for scale() Method in HTML5 Canvas:

Tryit<!DOCTYPE html>
<html>
    <head>
      <title>wikitechy-Scale() method in Canvas</title>
    </head>
    <body>
        <h2>Wikitechy-Scale() method in canvas</h2>
        <canvas id="wikitechyCanvas" width="300" height="170" 
              style="border:1px solid #d3d3d3;">
        </canvas>
        <script>
            var canvas = document.getElementById("wikitechyCanvas");
            var context = canvas.getContext("2d");
            context.strokeRect(5, 5, 25, 15);
            context.scale(2, 2);
            context.strokeRect(5, 5, 25, 15);
            context.scale(2, 2);
            context.strokeRect(5, 5, 25, 15);
            context.scale(2, 2);
            context.strokeRect(5, 5, 25, 15);
        </script>
    </body>
</html>

Code Explanation for scale() Method in HTML5 Canvas:

scale() method in HTML5 canvas Code Explanation

  1. ”wikitechyCanvas” is used to declare the id value of the <canvas> tag.
  2. The getElementById(); method is used to get the element with the specific id “wikitechyCanvas”.
  3. The Canvas.getContext(“2d”)) method returns an object that provides methods and properties for drawing a two-dimension diagram on the canvas.
  4. The strokeRect() method is used to begins the path for a line.
  5. The scale() method is used to scales the current drawing size as (2,2).

Output for scale() Method in HTML5 Canvas:

scale() method in HTML5 canvas Output

  1. The output shows that a canvas rectangle with gray color border.
  2. It shows scale of the rectangle by using the scale() method.

Browser Support for scale() Method in HTML5 Canvas:

Yes 9.0 Yes Yes Yes

Tips and Notes

  • If you scale a drawing, all future drawings will also be scaled.
  • The positioning will also be scaled. If you scale (3,3); drawings will be positioned thrice as far from the left and top of the canvas as you specify

Related Searches to scale() Method in HTML5 Canvas