CanvasRenderingContext2D: свойство imageSmoothingEnabled

Свойство imageSmoothingEnabled интерфейса CanvasRenderingContext2D, являющегося частью API Canvas API, определяет, будут ли масштабируемые изображения сглаживаться (true, по умолчанию) или нет (false). При получении значения свойства imageSmoothingEnabled, возвращается последнее заданное значение.

Это свойство полезно для игр и других приложений, использующих пиксель-арт. При увеличении изображений алгоритм по умолчанию для масштабирования будет размывать пиксели. Установите это свойство в значение false, чтобы сохранить четкость пикселей.

Булево значение, указывающее, нужно ли сглаживать масштабируемые изображения. Значение по умолчанию — true.

В этом примере показано сравнение трёх изображений. Первое изображение отображается в натуральную величину, второе — в масштабе 3x, со включённым сглаживанием, и третье — в масштабе 3x, но со сглаживанием отключено.

HTML

<canvas id="canvas" width="460" height="210"></canvas>

JavaScript

const canvas = document.getElementById("canvas");

const ctx = canvas.getContext("2d");
ctx.font = "16px sans-serif";
ctx.textAlign = "center";

const img = new Image();
img.src =
  "https://interactive-examples.mdn.mozilla.net/media/examples/star.png";
img.onload = () => {
  const w = img.width,
    h = img.height;

  ctx.fillText("Source", w * 0.5, 20);
  ctx.drawImage(img, 0, 24, w, h);

  ctx.fillText("Smoothing = TRUE", w * 2.5, 20);
  ctx.imageSmoothingEnabled = true;
  ctx.drawImage(img, w, 24, w * 3, h * 3);

  ctx.fillText("Smoothing = FALSE", w * 5.5, 20);
  ctx.imageSmoothingEnabled = false;
  ctx.drawImage(img, w * 4, 24, w * 3, h * 3);
};

Результат

• Интерфейс, определяющий это свойство: CanvasRenderingContext2D
• CanvasRenderingContext2D.imageSmoothingQuality
• image-rendering