今さらcanvasにフリーハンドで絵が書けるライブラリ

透明とは

いわゆる消しゴム的な処理とか、綺麗さっぱり消したいときとかにどうするか。
背景に色が付いてるならその色で塗ればいいだけなんですが、背景が透明の場合。
透明で塗る、とは・・？ってなるかもですが、これ実は簡単にできます。

canvasコンテキストに、globalCompositeOperationってプロパティがあって、それを使います。

ctx.globalCompositeOperation = 'destination-out';

これだけで新しく描いた部分が(正確には新しく描かれることで重なった古い部分が)消せます。
色とか別になんでもいいです。

一つ気をつけるなら、値を戻し忘れないようにすることで、

// 消す準備
var oldGCO = ctx.globalCompositeOperation;
ctx.globalCompositeOperation = 'destination-out';

// 消す処理

// 消し終わったら戻す
ctx.globalCompositeOperation = oldGCO;

これ忘れると書けない！ナンデ！ってなります。

http://www.html5.jp/canvas/ref/property/globalCompositeOperation.html

canvasの便利メソッド

コード書いてて地味に便利やな・・ってなったのでメモ。

ctx.canvas.toDataURL('image/png');

Uncaught SecurityError: Failed to execute 'toDataURL' on 'HTMLCanvasElement': tainted canvases may not be exported

ctx.drawImage(img, 0, 0, ctx.canvas.width, ctx.canvas.height)

座標の計算

こういうライブラリ書いてて一番ありそうなのは、マウスの位置と描画位置がズレる・・ってやつかなーと。

• canvasにはwidth/heightをしっかり指定する
• getBoundingClientRectなりでcanvasの位置を特定する
• スクロール位置も加味する

と、マウスの位置ぴったりに描画できるようになるはず。

// canvas位置が動かないなら、getBoundingClientRect/scrollの値はキャッシュすべし
ev.pageX - (ctx.canvas.getBoundingClientRect().left + window.scrollX)