jCanvasからHTML5 Canvas APIを直接操作する
jCanvasは便利な描画機能を提供しますが、どうしてもHTML5 Canvasを直接操作する必要がある場合はdrawメソッドを利用できます。リスト14はリスト1と同じ処理をjCanvasのdrawメソッド内で実行する例です。fnメソッドの引数で与えられるコンテキストを用いて描画処理を実装しています。リスト14を実行すると（当然ですが）リスト1と全く同じ表示となります。
リスト14 jCanvas内でHTML5 Canvas APIを直接実行（008_jquery_jcanvas_raw.html）
$("#canvas").draw({
fn: function(context) {
context.fillStyle="#ff0000";
context.strokeStyle="#000000";
context.lineWidth=2;
context.arc(240, 120, 50, 0, 2 * Math.PI, true);
context.fill();
context.stroke();
context.fillStyle="#0000ff";
context.font="24px Arial";
context.textAlign = "center";
context.textBaseline = "middle";
context.fillText("Canvasによる描画", 240, 280);
}
});
まとめ
本記事では、HTML5 CanvasをjQueryで活用するためのプラグイン「jCanvas」を紹介しました。HTML5 CanvasをjQueryの流儀で操作することを可能とし、レイヤーやイベント処理など描画を便利にする機能も利用できます。Canvasの機能を使うWebページでjQueryも使用するならば、利用を検討するに値するプラグインと言えます。
ただし、jCanvasは2次元図形の描画機能のみを備えているため、Canvas要素内に3次元図形を表示する場合（WebGL）は利用できません。また将来的にCanvasに機能が追加された場合、jCanvasでその機能を使えない可能性がある点にも注意する必要があります。
