CanvasRenderingContext2D.imageSmoothingEnabled

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.

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

Browser compatibility

See also

• The interface defining this property: CanvasRenderingContext2D
• CanvasRenderingContext2D.imageSmoothingQuality
• image-rendering