HTML5 Canvasでダブルバッファリングを実現する方法を解説

HTML5 Canvasとダブルバッファリングの関係

HTML5のCanvasには、ダブルバッファリングを直接制御する専用APIは用意されていません。しかし、実際には多くのブラウザが内部でダブルバッファリングを行っているため、通常の描画では画面のちらつき（フリッカー）が発生しにくくなっています。

とはいえ、アニメーションや複雑なグラフィックスを扱う場合には、オフスクリーンキャンバス（バッファ用キャンバス）を自分で作成してダブルバッファリングを実装する方法が有効です。

オフスクリーンキャンバスを使ったダブルバッファリングの実装

基本的な考え方はシンプルです。まず画面に表示されない2つ目のcanvas要素（バッファ）を作成し、そこへ図形などを描画します。その後、drawImage()メソッドを使って、バッファの内容を一気に表示用のキャンバスへ転写します。これにより、中間的な描画過程が画面に露出せず、滑らかな表示を実現できます。

サンプルコード

// 表示用のcanvas要素
var canvas1 = document.getElementById('canvas');
var context1 = canvas1.getContext('2d');

// バッファ用のcanvasを作成（画面には表示されない）
var canvas2 = document.createElement('canvas');
canvas2.width = 250;
canvas2.height = 250;
var context2 = canvas2.getContext('2d');

// バッファ側のキャンバスに図形を描画
context2.beginPath();
context2.moveTo(10, 10);
context2.lineTo(10, 30);
context2.stroke();

// バッファの内容を表示用キャンバスへまとめて描画
context1.drawImage(canvas2, 0, 0);

コードのポイント

・document.createElement('canvas')で作成したキャンバスは、DOMに追加しない限り画面上に表示されません。そのため、オフスクリーンのバッファとして最適です。
・バッファへの描画がすべて完了してからdrawImage()で本体へ転写することで、ユーザーには完成した画像だけが見えるようになります。
・アニメーションのフレームごとにこの処理を繰り返すことで、ちらつきのない滑らかな描画が可能になります。

まとめ

HTML5 Canvasはダブルバッファリングを明示的にサポートするAPIを持っていませんが、2つ目のcanvas要素をバッファとして利用し、drawImage()で転写する手法により、簡単に同等の効果を実現できます。高品質なアニメーションやインタラクティブなグラフィックスを開発する際は、ぜひ活用してみてください。