# キャンバスのピクセル密度を慎重に選択してください > ゲームを画面全体で鮮明に見せる必要がある場合は、キャンバスの背景解像度、デバイスのピクセル比、メモリ使用量、描画コストのバランスをとります。 - URL: https://oneshotgems.ai/ja/topics/canvas-pixel-density - カテゴリ: ゲーム開発者向け - 種類: ガイド - 更新日: 2026年10月5日 キャンバスには CSS 表示サイズとピクセル バッキング ストアがあります。これらのサイズが異なる場合、ブラウザーは描画されたビットマップを拡大縮小して、アートを柔らかくする可能性があります。すべてのデバイス ピクセルを一致させると鮮明さが向上しますが、ゲームが処理する必要があるピクセル数が増加します。適切な設定はアート スタイルとレンダリング予算によって異なります。ピクセル アート スプライトには整数スケーリングと最近傍の選択が必要な場合がありますが、ライン アート インターフェイスにはより高いバッキング解像度が役立つ場合があります。 ## ピクセルを設定する前に CSS ボックスを測定します 表示されたキャンバスの寸法を読み取り、選択したデバイス スケールを掛け、バッキングの幅と高さを設定し、ゲーム ロジックが CSS 空間単位を使用し続けることができるように描画座標を変換します。これらのキャンバス属性を割り当てると描画状態がリセットされるため、幅または高さを変更した後は変換を再適用してください。 1、1.5、2 などの倍率で 1 ピクセルのグリッド、斜めのエッジ、小さな UI テキストを比較します。鮮明さと応答性の両方を確認します。完全な devicePixelRatio 乗数は出発点であり、すべてのゲームが従うべきルールではありません。レンダリング スケールを下げると、CSS レイアウトを変更せずに、密集したディスプレイのコストを削減できます。 ## サイズ変更とメモリを選択の一部として扱う バッキング ストアのピクセル数は両方の次元で増加するため、各方向にスケールを 2 倍にすると 4 倍のピクセルが作成されます。高密度設定を出荷する前に、サポートされている最大のディスプレイ サイズでビジー シーンをテストし、メモリ不足や再描画の速度の低下を確認します。 MDN のキャンバス ガイダンスには、devicePixelRatio ベースのセットアップが示されています。 WebGL のベスト プラクティス ページでは、非整数の比率とズームに関する微妙な点が指摘されています。ブラウザーのズームまたはディスプレイ間でウィンドウを移動した後は再確認し、有効なサイズが変わっていない場合はバッキング ストアを繰り返しリセットしないようにしてください。 ## よくある質問 **キャンバスの幅は常に CSS 幅と devicePixelRatio の積に等しい必要がありますか?** いいえ。コンテンツは鮮明になりますが、処理負荷とメモリ使用量が増えます。同じシーンと見た目のチェックを使い、フル解像度版と上限を設けた解像度版を比較してください。 **サイズを変更すると描画がぼやけてしまうのはなぜですか?** キャンバスの幅または高さを変更すると、そのビットマップがクリアされ、コンテキストの状態がリセットされます。バッキングの寸法を再計算し、コンテキストを再度スケールし、シーンを再描画します。 ## 気になることを、もっと - [キャンバス レンダリングのボトルネックを見つける](https://oneshotgems.ai/ja/topics/canvas-game-performance): 繰り返し可能なシーンを含む 2D キャンバス ゲームをプロファイリングし、フレームが費やされる場所を測定した後でのみ、コストのかかる描画作業を削減します。 - [ブラウザーゲームのサイズ変更を適切に処理する](https://oneshotgems.ai/ja/topics/game-resize-handling): プレイヤーがウィンドウのサイズや向きを変えたとき、ゲーム座標、canvas の寸法、レイアウトの同期を保ちます。 - [キャンバス上でスプライト アトラスを確実にレンダリングする](https://oneshotgems.ai/ja/topics/sprite-atlas-rendering): 1 つのレンダリング マップ内でソース四角形、トリミング ルール、ピボット、ロード チェックを定義することで、スプライト アトラス フレームを整列させます。 ## 関連情報 - [MDN: キャンバスの最適化](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Optimizing_canvas) - [MDN: WebGL のベスト プラクティス](https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API/WebGL_best_practices) --- 正規ページ: https://oneshotgems.ai/ja/topics/canvas-pixel-density