Scaling

Introduction to scaling

Scaling enlarges or reduces the user coordinate system. We can use this method to draw shapes of different sizes, without changing the drawing code.

We use the scale method of the Context to perform scaling:

ctx.scale(2, 2)

After scaling by (2, 2), the point (x, y) in user space maps onto the point (x*2, y*2) in device space. One effect of that is that all the drawn objects become twice as large.

The diagram below shows the scaled user space. As we saw before, device space is unchanged by the transformation.