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

The CanvasRenderingContext2D.imageSmoothingQuality property of the Canvas 2D API allows you to set the quality of image smoothing.


ctx.imageSmoothingQuality = "low" || "medium" || "high"


One of "low", "medium", or "high".


Using the imageSmoothingQuality property

This is just a simple code snippet using the imageSmoothingQuality property with a scaled image.


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


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

var img = new Image();
img.src = '';
img.onload = function() {
  ctx.mozImageSmoothingEnabled = false;
  ctx.imageSmoothingQuality = "Medium";
  ctx.webkitImageSmoothingEnabled = false;
  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:


Specification Status Comment
HTML Living Standard
The definition of 'imageSmoothingQuality' in that specification.
Living Standard Initial definition.

Browser compatibility

Update compatibility data on GitHub
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidiOS SafariSamsung Internet
Basic support
Chrome Full support 54Edge ? Firefox No support NoIE ? Opera Full support 41Safari Full support YesWebView Android Full support 54Chrome Android Full support 54Edge Mobile ? Firefox Android No support NoOpera Android Full support 41Safari iOS Full support YesSamsung Internet Android Full support 6.0


Full support  
Full support
No support  
No support
Compatibility unknown  
Compatibility unknown
Experimental. Expect behavior to change in the future.
Experimental. Expect behavior to change in the future.

See also

Document Tags and Contributors

Contributors to this page: mfluehr, fscholz, thatmichael85, mantou, jpmedley
Last updated by: mfluehr,