画面上の大きさ、描画するピクセル数、入力の座標を分けると、Canvasの表示と操作のずれを追いやすくなります。
この記事でわかること
- 表示サイズと描画サイズを分けて記録する
- 端末のピクセル比を考慮する
- 画面を回した後にも座標を確かめる
一つの「幅」だけで管理しない
CSSで表示する幅と、Canvas内部の描画領域の幅は別です。内部の描画サイズが小さいまま見た目だけを大きくすると、拡大された画像のようにぼやける場合があります。
devicePixelRatioは物理ピクセルとCSSピクセルの比率です。鮮明さを上げるために描画サイズへ反映する場合も、画面上のゲームの大きさまで意図せず変えないように整理します。
入力座標をゲーム内の座標へ変換する
getBoundingClientRectで画面上の位置とサイズを調べ、入力位置からCanvasの左上を引きます。その後、表示サイズとゲーム内座標の比率を使って変換します。
固定の上端位置や拡大率を埋め込むと、スマートフォンの向きやレイアウトが変わったときにずれが出ます。ボタンの当たり判定を描いて、表示と入力が一致するかを確認すると切り分けやすくなります。
画面の中央より、四隅で確かめる
中央では目立たないずれも、端へ行くほど大きくなることがあります。四隅と中央に同じ確認点を置き、縦向き・横向きの両方で触ります。
- 表示幅と内部幅を記録する
- 四隅と中央をタップする
- 画面を回して再確認する
- ブラウザの拡大率を変えて確認する
参考にした情報源
情報確認日：2026.10.14。引用画像・投稿の埋め込みは使用していません。