# 証拠に基づいて Canvas のパフォーマンスを変更する

> 繰り返し可能なシーンを含む 2D キャンバス ゲームをプロファイリングし、フレームが費やされる場所を測定した後でのみ、コストのかかる描画作業を削減します。

- URL: https://oneshotgems.ai/ja/topics/canvas-game-performance
- カテゴリ: ゲーム開発者向け
- 種類: ガイド
- 更新日: 2026年10月5日

Canvasの速度低下は、描画、シミュレーション、画像のデコード、Canvas周辺のレイアウト処理が原因になり得ます。勘で最適化すると、遅い部分を残したままコードの保守だけが難しくなりがちです。まず、カクつきを確実に再現できるシーンを用意します。ブラウザーのパフォーマンスツールで負荷の高い時間帯を特定し、一度に一種類の処理だけを変更してください。理論上の最大性能を追うのではなく、再現可能な場面で実際に見えるボトルネックを取り除くことが目標です。

## 繰り返し可能なストレスシーンを作成する

既知の数の移動オブジェクト、重なり合うエフェクト、およびテキスト ラベルを使用してテスト状態を構築します。記録または固定シードをキャプチャして、各実行でほぼ同じ作業が行われるようにします。空のシーンのベースラインと混雑したシーンを比較し、JavaScript の更新、キャンバスの描画、画像のデコード、またはスタイルとレイアウトの作業に時間が費やされているかどうかを検査します。

描画が主な負荷なら、似たパスをまとめる、不要な状態変更を減らす、変更された領域だけを描画するといった方法を試します。更新処理が主な負荷なら、プロファイラーで衝突判定やオブジェクトの反復処理を調べます。MDNのCanvas最適化ガイドは、これらを評価すべき選択肢として説明しており、常に高速化を保証する設定とはしていません。

## コストを 1 つ変更して結果を確認する

静的な背景を何度も描画しているなど、コストの原因と思われる処理を一つ選びます。その背景をオフスクリーンCanvasにキャッシュし、同じシーンで変更前後を比較します。異なるサイズやリサイズ後の表示も確認してください。古い寸法を使ったりテキストの拡大率が変わったりすると、キャッシュが不正確になることがあります。

比較に使った端末、ブラウザー、シーン、操作を記録します。1台で得た結果はその実行の診断には役立ちますが、あらゆるブラウザーや端末の性能を示すものではありません。合成シーンで改善した最適化が別の場面で操作感を悪くする場合もあるため、元の操作を再テストします。

## よくある質問

**変更されたピクセルのみを再描画する必要がありますか?** シーンの複雑さと、全面描画にかかるコストによります。部分描画では管理処理が増え、動くオブジェクトの周囲に古いピクセルが残る場合があります。同じ再現可能なシーンで両方の方法を比べてください。

**Canvasの描画処理をまとめれば必ず速くなりますか？** いいえ。試す価値のある仮説です。対象のブラウザーと負荷を測り、描画を壊さず実測したボトルネックを改善した場合にだけ変更を採用します。

## 気になることを、もっと

- [ゲーム画像を鮮明にするCanvas解像度の設定](https://oneshotgems.ai/ja/topics/canvas-pixel-density): ゲームを画面全体で鮮明に見せる必要がある場合は、キャンバスの背景解像度、デバイスのピクセル比、メモリ使用量、描画コストのバランスをとります。
- [ブラウザ ゲームのパフォーマンスを確実に測定する](https://oneshotgems.ai/ja/topics/measuring-game-performance): ブラウザ ゲームの再現可能なパフォーマンス テストを構築し、フレームの症状を原因から分離し、一致するシーンの変更を比較します。

## 関連情報

- [MDN: キャンバスの最適化](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Optimizing_canvas)

---
正規ページ: https://oneshotgems.ai/ja/topics/canvas-game-performance