透過pngファイルの一部のみをHTML上で選択可能にする方法

Question

HTML、CSS、Javascriptのみで塗り絵ツールを作成しようとしています。

背景を透過したpngファイルの一部をHTML上で選択し、マウスのクリックイベントで色を塗れるようにしたいのですが、透過pngファイル全体が選択範囲となってしまい困っています。

透過pngファイルの一部(透過していない部分)のみを選択可能とするにはどうしたら良いでしょうか。
なお、透過pngファイルはGIMPにて作成しております。

何かアドバイス頂ければと思います。

Answer 1

処理のイメージですが、以下の様な感じになるとなると思います。
0. canvasに画像描画（drawImage()）
0. canvasのRBG情報を取得（getImageData()）
0. canvas中のクリックされた座標を取得(addEventListener('click', function(){}))
0. canvas中のクリックされた座標の色を取得(2の配列の中から、3の座標と一致する要素を取出す)
0. canvas中のクリックされた座標と接する場所が近似する色の場合塗り替える(2の配列を再帰的に検索し、値を塗りたい色に変更する)
0. canvasを5で作った配列で書き換え（putImageData()）

1～4,6はそれほど難しくないと思いますが、
慣れてない場合、5は少し手応えがある感じになると思います。