The scale() function
Summary: The scale() function can be used to resize the canvas coordinate system - either increasing it or decreasing it
An example of scaling the canvas up by a factor of two
The scale()
function increases or decreases the size of the pixels
on the canvas - scaling them up or scaling them down. If you
use negative values the drawings you make may be off-canvas. So scaling the X
direction by 2 increases the X pixel size making
everything bigger, by 1 and it remains the same, by 0.5 makes things smaller
and negative values cause the X pixel system to
begin being reversed - so they're actually off to the left of the canvas
(which you can't then see).
Arguments to the function
- The X scale factor that should be applied
- The Y scale factor that should be applied
An example
You can use the function like this:
<script>
window.onload = function ()
{
var canvas = document.getElementById("cvs");
var context = canvas.getContext('2d');
// This doubles the size of the canvas in both the X and Y directions
context.scale(2, 2);
context.beginPath();
context.moveTo(0, 0);
context.lineTo(200, 200);
context.stroke();
}
</script>
Here's an RGraph chart that has had the canvas scaled up before drawing. Because every pixel is now twice as big as it was originally the chart no longer fits on the visible area of the canvas. It's the same chart as that on the rotate page (not rotated though).