CanvasRenderingContext2D.imageSmoothingQuality

The CanvasRenderingContext2D.imageSmoothingQuality property of the Canvas 2D API allows you to set the quality of image smoothing.

Syntax

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

Options

value

One of "low", "medium", or "high".

Examples

Using the imageSmoothingQuality property

This is just a simple code snippet using the imageSmoothingQuality property with a scaled image.

HTML

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

JavaScript

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

var img = new Image();
img.src = 'https://mdn.mozillademos.org/files/222/Canvas_createpattern.png';
img.onload = function() {
  ctx.mozImageSmoothingEnabled = false;
  ctx.imageSmoothingQuality = "Medium";
  ctx.webkitImageSmoothingEnabled = false;
  ctx.msImageSmoothingEnabled = false;
  ctx.imageSmoothingEnabled = false;
  ctx.drawImage(img, 0, 0, 400, 200);
};

Edit the code below to see your changes update live in the canvas:

Specifications

Browser compatibilityUpdate compatibility data on GitHub

See also

• The interface defining it, CanvasRenderingContext2D
• image-rendering