Nossos voluntários ainda não traduziram este artigo para o Português (do Brasil). Junte-se a nós e ajude-nos a fazer o trabalho!
Você também pode ler o artigo em English (US).

The imageSmoothingEnabled property of the CanvasRenderingContext2D interface, part of the Canvas 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.

Note: You can adjust the smoothing quality with the imageSmoothingQuality property.

Syntax

ctx.imageSmoothingEnabled = value;

Options

value
A Boolean indicating whether to smooth scaled images or not. The default value is true.

Examples

Disabling image smoothing

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

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.imageSmoothingEnabled = false;
  ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
};

Result

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 AndroidSafari on iOSSamsung Internet
imageSmoothingEnabled
Experimental
Chrome Full support 30
Full support 30
No support ? — 30
Prefixed
Prefixed Implemented with the vendor prefix: webkit
Edge Full support 15Firefox Full support 51
Full support 51
No support ? — 51
Prefixed
Prefixed Implemented with the vendor prefix: moz
IE Full support Yes
Prefixed
Full support Yes
Prefixed
Prefixed Implemented with the vendor prefix: ms
Opera Full support YesSafari Full support YesWebView Android Full support 4.4Chrome Android Full support YesEdge Mobile Full support YesFirefox Android Full support 51
Full support 51
No support ? — 51
Prefixed
Prefixed Implemented with the vendor prefix: moz
Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes

Legend

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

Etiquetas do documento e colaboradores

Colaboradores desta página: mdnwebdocs-bot, mfluehr, fscholz, mattwojo, nmve, teoli
Última atualização por: mdnwebdocs-bot,