TheimageSmoothingEnabled property of theCanvasRenderingContext2D interface, part of theCanvas API, determines whether scaled imagesare smoothed (true, default) or not (false). On getting theimageSmoothingEnabled property, the last value it was set to is returned.

This property is useful for games and other apps that use pixel art. When enlargingimages, the default resizing algorithm will blur the pixels. Set this property tofalse to retain the pixels' sharpness.

Value

A boolean value indicating whether to smooth scaled images or not. The default value istrue.

Examples

Disabling image smoothing

This example compares three images. The first image is drawn at its natural size, thesecond is scaled to 3X and drawn with image smoothing enabled, and the third is scaledto 3X but drawn with image smoothing disabled.

HTML

<canvas width="460" height="210"></canvas>

JavaScript

const canvas = document.getElementById("canvas");const ctx = canvas.getContext("2d");ctx.font = "16px sans-serif";ctx.textAlign = "center";const img = new Image();img.src = "/shared-assets/images/examples/big-star.png";img.onload = () => {  const w = img.width,    h = img.height;  ctx.fillText("Source", w * 0.5, 20);  ctx.drawImage(img, 0, 24, w, h);  ctx.fillText("Smoothing = TRUE", w * 2.5, 20);  ctx.imageSmoothingEnabled = true;  ctx.drawImage(img, w, 24, w * 3, h * 3);  ctx.fillText("Smoothing = FALSE", w * 5.5, 20);  ctx.imageSmoothingEnabled = false;  ctx.drawImage(img, w * 4, 24, w * 3, h * 3);};

Result

Specifications

Browser compatibility

See also

• The interface defining this property:CanvasRenderingContext2D
• CanvasRenderingContext2D.imageSmoothingQuality
• image-rendering