JavaScriptでcanvasを２つ使う理由

Question

質問

JavaScriptでcanvasを使ってゲームを作る際、htmlに記述したcanvasとは別にJavaScirpt上でcanvasを作って進めている動画をよく目にするのですがこれって理由があるのですか？

例↓
https://youtu.be/xkGthkcgFEU　5:30～

Comments

[m.ts10806]

>動画をよく目にするのですが

幾つか例示してください。
要件を満たせていれば手法は詳細設計や実装に任されます。
ということは設計した人、実装した人しか分からないということになります。
動画の投稿主に確認するのが確実です。

[AkitoshiManabe]

> ゲームを作る際
「ゲーム開発」のタグがあったと思います。

[nano_09]

m.ts10806さん>追加させていただきました。

AkitoshiManabeさん>知りませんでした。ありがとうございます。

Answer 1

以下、HTML5 canvas のパフォーマンスの改善 - 画面領域外の canvas にプリレンダリングする からの引用です。

ゲームの作成時によく行われることですが、複数フレームからなる画面に同じようなプリミティブを再描画する場合は、シーンの大きな部分をプリレンダリングすると高いパフォーマンスが得られます。プリレンダリングとは、画面領域外に別途用意した canvas に一時的な画像をレンダリングしておき、その画面領域外の canvas を可視領域にレンダリングすることをいいます。この手法は、コンピュータ グラフィックスの世界ではディスプレイ リスト（リンク先は英語）とも呼ばれています。

たとえば、60 fps で動作するマリオを再描画する場合は、帽子、ひげ、「M」のロゴの部分をフレームごとに再描画する方法と、アニメーション実行前にマリオをプリレンダリングする方法があります。

詳細は引用元をご参照ください。