結論と対象読者

高DPI画面では、CSS上の表示寸法とCanvas内部の描画寸法を分けて管理し、DotLCDの論理セルが物理ピクセル上でもできるだけ均一になるよう調整します。ただし、devicePixelRatioが整数とは限らないため、「CSSピクセル上の整数倍」と「物理ピクセル上の完全な整数倍」は別の条件です。

この記事は、スマートフォンやRetina相当の画面でドットがぼやける、行ごとに太さが変わる、端末によってセルの見え方が違う問題を扱う人向けです。

30秒要約

  • devicePixelRatioはCSSピクセルと物理ピクセルの比率です。
  • CanvasのCSSサイズだけを大きくすると、内部解像度不足でぼやける場合があります。
  • Canvas内部寸法をCSS寸法×DPRへ合わせると鮮明になります。
  • DotLCDでは、論理画素の表示倍率を先に整数で決め、その結果をDPRへ対応させます。
  • DPRが1.25や1.5などの場合、物理ピクセルで完全に均一なセルを作れない寸法もあります。

概要と背景

Canvasには、HTML属性で決まる内部描画サイズと、CSSで決まる表示サイズがあります。高DPI端末では1CSSピクセルが複数の物理ピクセルへ対応するため、内部サイズをCSSサイズのままにすると、ブラウザが拡大補間して表示する場合があります。

DotLCDでは、論理画素を同じ幅と高さのセルとして見せることが重要です。高DPI対応を単なる高解像度化として行うと、論理解像度自体を増やしてしまい、低解像度表現が失われます。

そのため、論理解像度は固定し、表示用バッファだけを高DPIへ対応させます。

特徴・できること

論理解像度を維持できる

たとえば160×144の論理画像を4倍表示する場合、CSS上の表示領域は640×576です。高DPI対応では、この論理構造を変えず、Canvas内部の描画バッファをDPRに合わせます。

セル境界のぼやけを減らせる

画像平滑化を無効にし、セル境界を適切な座標へ配置すると、補間によるにじみを抑えられます。

画面移動やズームへ追従できる

devicePixelRatioは、ページズームや異なる密度の画面へウィンドウを移動したときに変わる場合があります。初期化時だけでなく、変化を検知して再構築する設計が必要です。

現在の位置付けと利用上の前提

window.devicePixelRatioは現在の表示環境におけるCSSピクセルと物理ピクセルの比率を返します。ただし、この値だけで画面の実物密度や視認サイズが分かるわけではありません。

DotLCDで優先する順序は次のとおりです。

  1. 論理解像度を決める
  2. CSS上の整数表示倍率を決める
  3. CSS表示寸法を決める
  4. DPRに応じて内部バッファ寸法を決める
  5. 座標変換を設定する

DPRをそのまま整数へ丸めると、画面によってCanvas寸法や画質が不自然に変わります。メモリ使用量もDPRの二乗に近い割合で増えるため、上限を設ける判断が必要です。

近い対象との比較

対象意味
論理解像度DotLCDが保持する低解像度の画像寸法
CSS表示倍率画面上でセルを何CSSピクセルにするか
devicePixelRatio1CSSピクセルに対応する物理ピクセルの比率
Canvas内部寸法実際に描画バッファへ確保する寸法
ブラウザズームCSSピクセルとDPRへ影響する場合がある操作

確認/試行の条件と注意点

  1. DPR 1、1.25、1.5、2、3相当の環境で確認します。
  2. ブラウザズームを変更し、セル幅が不均一にならないか確認します。
  3. 別の画面へウィンドウを移動し、DPR変更後に再描画されるか確認します。
  4. 縦線と横線を1セルずつ表示し、太さのばらつきを確認します。
  5. DPR上限を1、2、3と変え、鮮明さ、発熱、メモリ使用量を比較します。
  6. 書き出し画像の解像度を、表示用DPRへ依存させるか別設定にするか確認します。

高DPI対応は、論理画素数を増やす機能ではありません。DotLCDの低解像度表現を維持しながら、表示面でのぼやけを減らすための処理です。

参考リンク

  • MDN: Window devicePixelRatio
  • https://developer.mozilla.org/en-US/docs/Web/API/Window/devicePixelRatio
  • MDN: Canvas API
  • https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API
  • MDN: CSS image-rendering
  • https://developer.mozilla.org/en-US/docs/Web/CSS/image-rendering