CanvasRenderingContext2D.imageSmoothingEnabled

This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

The CanvasRenderingContext2D.imageSmoothingEnabled property of the Canvas 2D 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.

Syntax

ctx.imageSmoothingEnabled = value;

Options

value
A Boolean indicating whether to smooth scaled images or not.

Examples

Using the imageSmoothingEnabled property

This example illustrates the effect of applying the imageSmoothingEnabled property to a scaled image. The image's natural dimensions are 86 x 117.

HTML

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

JavaScript

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

var img = new Image();
img.src = 'https://mdn.mozillademos.org/files/222/Canvas_createpattern.png';
img.onload = function() {
  ctx.msImageSmoothingEnabled = false;
  ctx.imageSmoothingEnabled = false;
  ctx.drawImage(img, 0, 0, 400, 200);
};

Edit the code below to see your changes update live in the canvas:

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 AndroidiOS SafariSamsung Internet
Basic support
Experimental
Chrome Full support 30
Full support 30
No support ? — 30
Prefixed
Prefixed Requires the vendor prefix: webkit
Edge Full support 15Firefox Full support 51
Full support 51
No support ? — 51
Prefixed
Prefixed Requires the vendor prefix: moz
IE Full support Yes
Prefixed
Full support Yes
Prefixed
Prefixed Requires 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 Requires 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,