先日はプログラミング作業につきあっていただき、ありがとうございました。
結局うまく動作するには至りませんでしたが、それでも大きく前に進むことができたと思っていました。

が、

あの後jQueryのプラグイン見つけちゃったよ＼(^o^)／
ライセンス的にも問題なさそうだったからちょちょっと改造したら、ものの数分で普通に動作してしまった＼(^o^)／

ごめん、あの時のコード全部使わなくなったわ…。もっと早く見つけられたら良かった…orz

今、canvas要素を使ってお絵かきツールを作ろうと奮闘中なんですが、やっぱりお絵かきするならスポイドツールが欲しい。でもcanvas上の色情報を取得するメソッドなんてないし…と思ってたら、ありました。

getImageData()メソッドです。

具体的な説明はこちら。まあ何をするかというと、このメソッドが返すImageDataオブジェクトの、data属性を直接読みに行っちゃうわけですね。つまりこんな感じ。

var imageData = ctx.getImageData(0, 0, 1, 1);
var red, green, blue, alpha;
red = imageData.data[0]; // 赤
green = imageData.data[1]; // 緑
blue = imageData.data[2]; // 青
alpha = imageData.data[3]; // アルファ値

getImageData()の引数をマウスのクリック座標とかにすれば、スポイドツールの完成です。

ちなみにPhotoShopとかSAIみたいに、実際に画面に表示されている色（アルファブレンド済みの色）を計算する方法はGoogleで検索すると色々出てきますが、分かりやすかったのはこのページ。

• アルファブレンドの高速化

あ、ちなみにこれ、メソッドの実装状況の都合でFirefoxとOpera9.5でしか動きません。まあ私が作ってるツールは、IEもSafariも画像出力できないんでそもそも捨ててるってことで問題ないんですが。もうちょっといろんなブラウザが対応してくれたらいいんですけどねえ…現状だと完全に自己満足です。