CanvasRenderingContext2D.imageSmoothingQuality

Nos bénévoles n'ont pas encore traduit cet article en Français. Inscrivez-vous et aidez-nous à réaliser cette tâche !
Vous pouvez également lire cet article en English (US).

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

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.

Syntax

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

Options

Possible values:

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

Example

Setting image smoothing quality

This example uses the imageSmoothingQuality property with a scaled image.

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.imageSmoothingQuality = 'low';
  ctx.drawImage(img, 0, 0, 300, 150);
};

Result

Specifications

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

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 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

Legend

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

Étiquettes et contributeurs liés au document

Contributeurs à cette page : mfluehr, fscholz, thatmichael85, mantou, jpmedley
Dernière mise à jour par : mfluehr,