CanvasRenderingContext2D: imageSmoothingQuality property

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

See full compatibility

The imageSmoothingQuality property of the CanvasRenderingContext2D interface, part of the Canvas API, lets you set the quality of image smoothing.

Note: For this property to have an effect, imageSmoothingEnabled must be true.

Value

One of the following:

"low": Low quality.
"medium": Medium quality.
"high": High quality.

The default value is "low".

Examples

Setting image smoothing quality

This example uses the imageSmoothingQuality property with a scaled image.

HTML

html

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

JavaScript

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

let img = new Image();
img.src = "canvas_create_pattern.png";
img.onload = () => {
  ctx.imageSmoothingQuality = "low";
  ctx.drawImage(img, 0, 0, 300, 150);
};

Result

Specifications

Specification
HTML # dom-context-2d-imagesmoothingquality-dev

Browser compatibility

	desktop					mobile
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari on iOS	Samsung Internet	WebView Android	WebView on iOS
`imageSmoothingQuality`	Chrome – Full support Chrome 54 (Release date: 2016-10-12) footnote Full support	Edge – Full support Edge 79 (Release date: 2020-01-15) footnote Full support	Firefox – No support Firefox footnote No support	Opera – Full support Opera 41 (Release date: 2016-10-25) footnote Full support	Safari – Full support Safari 9.1 (Release date: 2016-03-21) footnote Full support	Chrome Android – Full support Chrome Android 54 (Release date: 2016-10-19) footnote Full support	Firefox for Android – No support Firefox for Android footnote No support	Opera Android – Full support Opera Android 41 (Release date: 2016-10-25) footnote Full support	Safari on iOS – Full support Safari on iOS 9.3 (Release date: 2016-03-21) footnote Full support	Samsung Internet – Full support Samsung Internet 6 (Release date: 2017-08-23) footnote Full support	WebView Android – Full support WebView Android 54 (Release date: 2016-10-19) footnote Full support	WebView on iOS – Full support WebView on iOS 9.3 (Release date: 2016-03-21) footnote Full support

Tip: you can click/tap on a cell for more information.

Full support: Full support
No support: No support