PixiJSでのRetinaディスプレイの対応

Canvasで描画した時と同様にぼやける。

resolutionを指定することで、Canvasのscaleとwidthとheightの設定をしてくれる。

  const app = new PIXI.Application({
    ...
    resolution: window.devicePixelRatio || 1,
  });

autoDensityを指定することで、CSSで元のサイズに戻してくれる。

  const app = new PIXI.Application({
    ...
    resolution: window.devicePixelRatio || 1,
    autoDensity: true, // 旧バージョンでは autoResize
  });

特定範囲の画像としての切り出し

編集したCanvasの特定範囲のみを切り出して、画像として保存したい場合がある。この場合もdevicePixelRatioを考慮した切り出しを行う必要がある。

特定範囲を切り出して別のCanvasに転写し...

  const scale = window.devicePixelRatio || 1;

  // 切り出しはscale()で拡大したサイズを基準に行う必要がある。
  // 文字周辺の塗りつぶしエリアを切り出そうとした場合、
  // このエリアはCanvasに対し20pxのマージン位置に描画したので、
  // この位置に対しscale()の拡大率を掛けて切り出し範囲を求める。
  const srcCanvasX = 20 * scale;
  const srcCanvasY = 20 * scale;
  const srcCanvasWidth = srcCanvas.width - 40 * scale;
  const srcCanvasHeight = srcCanvas.height - 40 * scale;

  const distCanvasX = 0;
  const distCanvasY = 0;
  const distWidth = srcCanvasWidth;
  const distHeight = srcCanvasHeight;

  distCanvas.width = distWidth;
  distCanvas.height = distHeight;
  distCtx.clearRect(0, 0, distWidth, distHeight);

  distCtx.drawImage(
    srcCanvas,

    srcCanvasX,
    srcCanvasY,
    srcCanvasWidth,
    srcCanvasHeight,

    distCanvasX,
    distCanvasY,
    distWidth,
    distHeight,
  );

画像を生成してCSSでサイズを縮小する。

  distImage.src = distCanvas.toDataURL('image/png');
  distImage.style.width = `${distWidth / scale}px`;
  distImage.style.height = `${distHeight / scale}px`;

実寸での画像の切り出し

画像を実寸で生成しなければならない事情があるけど、少しでも画質をマシにしたい場合は、実寸でCanvasを転写した後に画像を生成する。

実寸でCanvasを転写し...

  // 出力画像のサイズをdevicePixelRatioで割って縮小する
  const distCanvasX = 0;
  const distCanvasY = 0;
  const distWidth = srcCanvasWidth / scale;
  const distHeight = srcCanvasHeight / scale;

画像を生成する。

  distImage.src = distCanvas.toDataURL('image/png');