Window: devicePixelRatio プロパティ

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

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

// 表示サイズを設定（CSS におけるピクセル数です）。
const size = 200;
canvas.style.width = `${size}px`;
canvas.style.height = `${size}px`;

// メモリー上における実際のサイズを設定（ピクセル密度の分だけ倍増させます）。
const scale = window.devicePixelRatio; // Retina でこの値を 1 にするとぼやけた canvas になります
canvas.width = Math.floor(size * scale);
canvas.height = Math.floor(size * scale);

// CSS 上のピクセル数を前提としているシステムに合わせます。
ctx.scale(scale, scale);

ctx.fillStyle = "#bada55";
ctx.fillRect(10, 10, 300, 300);
ctx.fillStyle = "#ffffff";
ctx.font = "18px Arial";
ctx.textAlign = "center";
ctx.textBaseline = "middle";

const x = size / 2;
const y = size / 2;

const textString = "I love MDN";
ctx.fillText(textString, x, y);

<div id="container">
  <p>
    この例により、ページをズームインまたはズームアウトすること
    (または異なる表示倍率の画面にページを移動させること) の
    <code>devicePixelRatio</code> プロパティに与える影響がわかります。
    どのようなことが起こるか、試してみましょう！
  </p>
</div>
<div id="output"></div>

body {
  font:
    22px arial,
    sans-serif;
}

#container {
  border: 2px solid #22d;
  margin: 1rem auto;
  padding: 1rem;
  background-color: #a9f;
}

let remove = null;
const output = document.querySelector("#output");

const updatePixelRatio = () => {
  if (remove != null) {
    remove();
  }
  const mqString = `(resolution: ${window.devicePixelRatio}dppx)`;
  const media = matchMedia(mqString);
  media.addEventListener("change", updatePixelRatio);
  remove = () => {
    media.removeEventListener("change", updatePixelRatio);
  };

  output.textContent = `devicePixelRatio: ${window.devicePixelRatio}`;
};

updatePixelRatio();