Scales the current context by the specified horizontal (x) and vertical (y) factors.
.png){kind=icon}
.png){kind=icon} |
Syntax
CanvasRenderingContext2D.scale(x, y);Parameters
- x [in]
-
Type: Floating-point
The horizontal scaling factor, where
1equals unity or 100% scale. - y [in]
-
Type: Floating-point
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
Send comments about this topic to Microsoft
Build date: 11/28/2012
