How Browser-Based Canvas Resizing Works: Maintaining Aspect Ratio and DPI

How the Browser Renders and Scales Pixels#

When an image file (e.g., from an `<input type="file">` element) is loaded in JavaScript, it is decoded into an `HTMLImageElement` or `ImageBitmap` object.

To resize this bitmap, we initialize an off-screen `HTMLCanvasElement`, assign the target dimensions to its `width` and `height` properties, and invoke `ctx.drawImage()`. The browser’s graphics hardware then resamples the source pixels into the destination bounding box.

async function resizeImage(file: File, targetWidth: number, targetHeight: number): Promise<Blob> {
  const img = new Image();
  img.src = URL.createObjectURL(file);
  await new Promise((resolve) => { img.onload = resolve; });

  const canvas = document.createElement('canvas');
  canvas.width = targetWidth;
  canvas.height = targetHeight;

  const ctx = canvas.getContext('2d');
  if (!ctx) throw new Error('2D context unavailable');
  ctx.imageSmoothingEnabled = true;
  ctx.imageSmoothingQuality = 'high';

  ctx.drawImage(img, 0, 0, targetWidth, targetHeight);
  URL.revokeObjectURL(img.src);

  return new Promise((resolve, reject) => {
    canvas.toBlob((blob) => {
      if (blob) resolve(blob);
      else reject(new Error('Export failed'));
    }, 'image/jpeg', 0.85);
  });
}

Interpolation Filters: Nearest Neighbor vs. Bilinear vs. Bicubic#

When downscaling or upscaling images, mathematical interpolation determines how color values are assigned to intermediate pixels:

• Nearest Neighbor: Picks the closest adjacent pixel. Very fast, but creates sharp jagged edges and aliasing. Ideal only for pixel art.
• Bilinear: Samples the 2x2 grid of neighboring pixels and calculates a linear average. Fast and smooth, but can soften sharp text.
• Bicubic / Lanczos: Samples a 4x4 or larger matrix using polynomial weight curves. Preserves sharpness, fine lines, and natural contrast.

The Mathematics of Aspect Ratio Locking#

To prevent distortion, resizing must calculate dependent dimensions using the original aspect ratio ($AR = \frac{W_{orig}}{H_{orig}}$).

When the user alters target width ($W_{new}$), the height must automatically update: $H_{new} = \text{round}\left(\frac{W_{new}}{AR}\right)$. Conversely, altering height calculates: $W_{new} = \text{round}(H_{new} \times AR)$.

High-DPI / Retina Displays: Understanding devicePixelRatio#

Modern smartphones and laptops feature High-DPI screens with device pixel ratios (DPR) of 2.0x, 3.0x, or higher. When rendering an image destined for display in CSS pixels (e.g., 400x300px), exporting an exact 400x300px image will appear blurry on a Retina screen.

To ensure razor-sharp rendering on Retina displays, scale the canvas resolution by the DPR: $W_{canvas} = W_{CSS} \times \text{window.devicePixelRatio}$, while keeping its CSS display size locked.

Memory Optimizations for Large Photos#

A 48-megapixel camera RAW or JPEG decompresses into roughly 192 megabytes of raw uncompressed RGBA pixel data in RAM (48,000,000 pixels × 4 bytes per pixel).

Always call `URL.revokeObjectURL()` immediately after decoding, avoid keeping unused canvas references in memory, and use `createImageBitmap()` when working inside Web Workers to keep the UI thread responsive.