CanvasRenderingContext2D: imageSmoothingEnabled プロパティ

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

imageSmoothingEnabled は CanvasRenderingContext2D インターフェイスのプロパティで、キャンバス API の一部です。変倍された画像を平滑化するか (true、既定値) またはしないか (false) を決定します。 imageSmoothingEnabled プロパティを取得すると、最後に設定された値が返されます。

このプロパティは、ピクセルアートを使用するゲームやその他のアプリで有用です。画像を拡大するとき、既定のリサイズアルゴリズムではピクセルがぼけてしまいます。このプロパティを false に設定すると、ピクセルの鮮明さを維持します。

メモ: 平滑化の品質は、 imageSmoothingQuality プロパティで調整することができます。

HTML

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);
};

結果

仕様書

Specification
HTML Standard # dom-context-2d-imagesmoothingenabled-dev

ブラウザーの互換性

BCD tables only load in the browser