scale method
Scales the current context by the specified horizontal (x) and vertical (y) factors.
![]() ![]() |
Syntax
CanvasRenderingContext2D.scale(x, y);Parameters
- x [in]
-
Type: number
The horizontal scaling factor, where
1equals unity or 100% scale. - y [in]
-
Type: number
The vertical scaling factor.
Return value
This method does not return a value.
Standards information
- HTML Canvas 2D Context, Section 3
Remarks
When you create a CanvasRenderingContext2D object, it has a transformation matrix that identifies the current state. The scale method modifies the transformation by multiplying the matrix by the specified factor. For example, context.scale(1,.5) halves the vertical (or y-axis) values that are used in context and leaves the horizontal (or x-axis) values the same. Similarly, context.scale(2,2) doubles the size of the graphics.
Examples
The following code example shows scaling when it draws several rectangles .
<html> <head> <title>Scale example</title> <script type="text/javascript"> function draw() { var canvas = document.getElementById("MyCanvas"); if (canvas.getContext) { var ctx = canvas.getContext("2d"); ctx.beginPath(); ctx.lineWidth = "3"; ctx.strokeStyle = "blue"; ctx.rect(5, 5, 300, 250); ctx.stroke(); ctx.beginPath(); ctx.lineWidth = "5"; ctx.strokeStyle = "red"; ctx.rect(150, 200, 300, 150); ctx.stroke(); ctx.beginPath(); ctx.lineJoin = "round"; ctx.lineWidth = "10"; ctx.strokeStyle = "green"; ctx.rect(250, 50, 150, 250); ctx.stroke(); } } function scaleRect() { var canvas = document.getElementById("MyCanvas"); if (canvas.getContext) { var ctx = canvas.getContext("2d"); ctx.clearRect(0, 0, canvas.width, canvas.height); // Clear the rectangle before scaling. var xFactor = document.getElementById("xScale").value; var yFactor = document.getElementById("yScale").value; ctx.scale(xFactor, yFactor); draw(); } } function refresh() { window.location.reload(false); // Reload the page. } </script> </head> <body onload="draw();"> <div> <button onclick="scaleRect()">Do scaling</button> <select id="xScale" name="xScale"> <option value=".25">25%</option> <option value=".5">50%</option> <option value=".75">75%</option> <option value="1">100%</option> <option value="1.25">125%</option> <option value="1.5">150%</option> <option value="1.75">175%</option> <option value="2.">200%</option> <option value="3">300%</option> </select> <select id="yScale" name="yScale"> <option value=".25">25%</option> <option value=".5">50%</option> <option value=".75">75%</option> <option value="1">100%</option> <option value="1.25">125%</option> <option value="1.5">150%</option> <option value="1.75">175%</option> <option value="2.">200%</option> <option value="3">300%</option> </select> <button onclick="refresh()">refresh page</button> </div> <div> <canvas id="MyCanvas" width="1200" height="800">This browser or document mode doesn't support canvas </canvas> </div> </body> </html>
See also

