The scale function

• Arguments to the function
• An example

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 horizontal direction by 2 increases the X-axis pixel size making everything bigger, by 1 and it remains the same, by 0.5 makes things smaller and negative values cause the X-axis 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-axis scale factor that should be applied
• The Y-axis 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>