Downscaling large images in Canvas

When resizing high resolution images in canvas elements, they usually end up aliased.

To work around this we can use step-down downscaling. This means reducing the image size in steps, rather than setting the final dimensions directly.

Here’s a basic function that will half the image resolution until it’s close to the right size.

The main downside of this approach is that the resulting image is sometimes blurry.

pica

If you don’t want to implement the downscaling function yourself, you can use pica.