Html5 canvas drawImage: how to apply antialiasing

Taking your antialiasing to the next level

Now, let's dive deeper. Here's how to make your images pixel-perfect with some advanced antialiasing techniques.

Pre-blur: Your secret weapon for smoother edges

Even top-quality standards might need a boost sometimes. Consider pre-blurring your image before drawing it on the canvas for even smoother transitions.

// Let's add some "cinematic blur" effect here 🎬
ctx.filter = 'blur(1px)'; // Feel free to experiment with this value
img.onload = () => ctx.drawImage(img, 0, 0);


Remember, always ask for ctx.filter's consent before using it: typeof ctx.filter !== 'undefined.

Progressive downscaling: Taking things step by step

Step-down scaling is a great technique for antialiasing. It's all about taking things easy and gradually.

function stepDownScale(context, image, steps) {
  // Step 1: create a new canvas. Nothing can go wrong, right? 🤷‍♂️
  let canvas = document.createElement('canvas');
  let ctx = canvas.getContext('2d');
  canvas.width = image.width;
  canvas.height = image.height;
  ctx.drawImage(image, 0, 0);
  
  // Step 2: Downscale in steps, like you're going down a staircase 🪜
  for (let i = 0; i < steps; i++) {
    canvas.width *= 0.5;
    canvas.height *= 0.5;
    ctx.scale(0.5, 0.5);
    ctx.drawImage(canvas, 0, 0);
  }
  
  return canvas; // Returns canvas with smoother downscaling
}


Just calculate how many steps you need: Math.log2(Math.max(image.width / targetWidth, image.height / targetHeight)) and you're ready to scale.

Taming the browser beast

We all love our browsers, but they can have their quirks. Be mindful of these limitations because they're not all created equal. Utilising a library like pica could save your day.

Confronting the ugly truth about direct scaling

Direct scaling feels straightforward, but unfortunately, it often falls short of providing proper anti-aliasing. That's why investing effort in using techniques like pre-blurring or step-down scaling usually pays off.

Broadening your antialiasing toolbox

There are more tricks in the bag to make your images shine even brighter. Let's explore some of them.

Secondary canvas: The bigger, the better

For a smoother initial antialiasing, draw your image onto a secondary canvas at a larger size, then scale it down.

let offscreenCanvas = document.createElement('canvas');
// Canvas so offscreen, it's barely on the laptop anymore 💻
let offscreenCtx = offscreenCanvas.getContext('2d');

// More pixel real estate, more fun 🌇
offscreenCanvas.width = img.naturalWidth * 2;
offscreenCanvas.height = img.naturalHeight * 2;
offscreenCtx.drawImage(img, 0, 0, offscreenCanvas.width, offscreenCanvas.height);


Don't keep your gorgeous offscreen canvas to yourself. Use it to scale down to your target canvas.

High-quality transformations with toDataURL

The toDataURL method is the unsung hero of high-quality image conversions. Who said a base64 string couldn't steal the show?

function getBase64Image(canvas) {
  // Bye bye pixels, hello string 👋
  return canvas.toDataURL("image/jpeg");
}


Maintaining quality with background-image

The background-image CSS property can also carry some of the heavy lifting of maintaining quality when scaling.

// Like setting up a stage backdrop 🎭
canvas.style.backgroundImage = `url(${img.src})`;
