YouTipHTML canvas scale() Method
JavaScript Reference Manual
JavaScript Objects
- JavaScript Array Object
- JavaScript Boolean Object
- JavaScript Date Object
- JavaScript Math Object
- JavaScript Number Object
- JavaScript String Object
- JavaScript RegExp Object
- JavaScript Global Properties/Functions
- JavaScript Operators
- JavaScript Error
Browser Objects
DOM Objects
- HTML DOM Document Object
- HTML DOM Element Object
- HTML DOM Attribute Object
- HTML DOM Event Object
- HTML DOM Console Object
- CSSStyleDeclaration Object
- DOM HTMLCollection
HTML Objects
- <a>
- <area>
- <audio>
- <blockquote>
- <button>
- <col>
- <colgroup>
- <del>
- <details>
- <dialog>
- <fieldset>
- <img>
- <ins>
- - button
- - checkbox
- - color
- - date
- - datetime
- - datetime-local
- - file
- - hidden
- - image
- - month
- - number
- - range
- - password
- - radio
- - reset
- - search
- - submit
- - text
- - time
- - url
- - week
- <label>
- <legend>
- <li>
- <map>
- <menu>
- <meter>
- <object>
- <ol>
- <progress>
- <q>
- <table>
- <td>
- <th>
- <tr>
- <textarea>
- <title>
- <time>
- <track>
- <video>
HTML canvas scale() Method
Canvas ObjectExample
Draw a rectangle, scale to 200%, then draw the rectangle again:
JavaScript:
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.strokeRect(5,5,25,15);
ctx.scale(2,2);
ctx.strokeRect(5,5,25,15);
Browser Support
Internet Explorer 9, Firefox, Opera, Chrome, and Safari support the scale() method.
Note: Internet Explorer 8 and earlier versions do not support the <canvas> element.
Definition and Usage
The scale() method scales the current drawing to a larger or smaller size.
Note: If you scale a drawing, all subsequent drawings will also be scaled. Positioning will also be scaled. If you scale(2,2), the drawing will be positioned twice as far from the top-left corner of the canvas.
| JavaScript Syntax: | context.scale(scalewidth,scaleheight); |
Parameter Values
| Parameter | Description |
|---|---|
| scalewidth | Scales the width of the current drawing (1=100%, 0.5=50%, 2=200%, and so on). |
| scaleheight | Scales the height of the current drawing (1=100%, 0.5=50%, 2=200%, and so on). |
More Examples
Draw a rectangle; scale to 200%, draw the rectangle again; scale to 200%, draw the rectangle again; scale to 200%, draw the rectangle again:
JavaScript:
var c = document.getElementById("myCanvas2");
var ctx = c.getContext("2d");
ctx.strokeRect(5,5,25,15);
ctx.scale(2,2);
ctx.strokeRect(5,5,25,15);
ctx.scale(2,2);
ctx.strokeRect(5,5,25,15);
ctx.scale(2,2);
ctx.strokeRect(5,5,25,15);