Canvas reference: The scale() function

The scale() function can be used to resize the canvas coordinate system - either increasing it or decreasing it

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).