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 illustrates the effect of setting the imageSmoothingEnabled property to false on a scaled image. The image's natural dimensions are 86 x 117.

HTML

<canvas id="canvas"></canvas>

JavaScript

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

let img = new Image();
img.src = 'https://mdn.mozillademos.org/files/222/Canvas_createpattern.png';
img.onload = function() {
  ctx.imageSmoothingEnabled = false;
  ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
};

Result

Specifications

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

Browser compatibility

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
Basic support
Experimental
Chrome Full support 30
Full support 30
No support ? — 30
Prefixed
Prefixed Implemented with the vendor prefix: webkit
Edge Full support 15Firefox 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 ? Safari ? WebView Android Full support 4.4Chrome Android ? Edge Mobile Full support YesFirefox Android Full support 51
Full support 51
No support ? — 51
Prefixed
Prefixed Implemented with the vendor prefix: moz
Opera Android ? Safari iOS ? Samsung Internet Android ?

Legend

Full support  
Full support
Compatibility unknown  
Compatibility unknown
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.

See also

Document Tags and Contributors

Contributors to this page: mfluehr, fscholz, mattwojo, nmve, teoli
Last updated by: mfluehr,