オフスクリーンCanvasにプリレンダリングし、描画内容を可視領域に表示する

Canvas APIを使ってブラウザゲームやアニメーションなど複雑な描画処理を行う場合、オフスクリーン（描画領域外）Canvasにプリレンダリングし、その内容を可視領域にあるCanvas要素にコピーし表示する手法がある。

利用シーン

たとえば15個の要素からなる背景があったとする。（下図参照）
可視領域内にあるCanvasにレンダリングしていると、1フレームごとに15回の描画処理が行われる。

それをあらかじめ背景用のオフスクリーンCanvasに描画しておいて、1フレームごとに可視領域内のCanvasにコピーして描画すると、背景の描画処理は1回ですむ。
負荷の高い描画処理が15→1回になることでパフォーマンス向上が見込めるという技だ。

プリレンダリングした内容をCanvasに表示する

// 可視領域のCanvas
const canvas = document.getElementById('game');
const ctx = canvas.getContext('2d');

// オフスクリーン
const offscreen = document.createElement('canvas');
offscreen.width = canvas.width;
offscreen.height = canvas.height;
const offscreenCtx = offscreen.getContext('2d');

// いろんな描画処理
offscreenCtx.fillRect(0, 0, 30, 30);  // などなど

// 可視領域のCanvasにコピーして描画する
ctx.drawImage(offscreen, 0, 0);

やっていることは非常に簡単で、オフスクリーンCanvasはdocument.createElement('canvas')で作ってメモリ上で管理し、offscreenの2Dコンテキストをつかって背景などを描画していく。

最後に可視領域のCanvasにdrawImage(offscreen, 0, 0)で描画することができる。

参考サイト

• canvas を最適化する - ウェブデベロッパーガイド | MDN

以上

written by @bc_rikko