W3cubDocs

/Web APIs

CanvasRenderingContext2D: imageSmoothingQuality property

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.

Examples

Setting image smoothing quality

This example uses the imageSmoothingQuality property with a scaled image.

HTML

html

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

JavaScript

js

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

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

Result

Specifications

Browser compatibility

Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet
imageSmoothingQuality 54 79 No No 41 9.1 54 54 No 41 9.3 6.0

See also

© 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/imageSmoothingQuality