Web/API/CanvasRenderingContext2D/imageSmoothingEnabled

The imageSmoothingEnabled property of the CanvasRenderingContext2D interface, part of the Canvas API, determines whether scaled images are smoothed (true, default) or not (false). On getting the imageSmoothingEnabled property, the last value it was set to is returned.

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

Note: You can adjust the smoothing quality with the imageSmoothingQuality property.

Syntax

ctx.imageSmoothingEnabled = value;

Options

value: A Boolean indicating whether to smooth scaled images or not. The default value is true.

Examples

Disabling image smoothing

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

HTML

<canvas id="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 = 'https://interactive-examples.mdn.mozilla.net/media/examples/star.png';
img.onload = function() {
  const w = img.width,
        h = img.height;

  ctx.fillText('Source', w * .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

Specification	Status	Comment
HTML Living StandardThe definition of 'CanvasRenderingContext2D.imageSmoothingEnabled' in that specification.	Living Standard

Browser compatibility

Update compatibility data on GitHub

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`imageSmoothingEnabled` Experimental'	Chrome Full support 30 Full support 30 No support ? — 30 Prefixed' Prefixed' Implemented with the vendor prefix: webkit	Edge Full support 15	Firefox Full support 51 Full support 51 No support ? — 51 Prefixed' Prefixed' Implemented with the vendor prefix: moz	IE Full support Yes Prefixed' Full support Yes Prefixed' Prefixed' Implemented with the vendor prefix: ms	Opera Full support Yes	Safari Full support Yes	WebView Android Full support 4.4	Chrome Android Full support Yes	Firefox Android Full support 51 Full support 51 No support ? — 51 Prefixed' Prefixed' Implemented with the vendor prefix: moz	Opera Android Full support Yes	Safari iOS Full support Yes	Samsung Internet Android Full support Yes

Legend

Full support: Full support
Experimental. Expect behavior to change in the future.': Experimental. Expect behavior to change in the future.
Requires a vendor prefix or different name for use.': Requires a vendor prefix or different name for use.