javascript - キャンバスを使用して画像にオーバーレイを描画するにはどうすればよいですか？

Question

画像JavaScriptで図形（ポリ、長方形、円）を描きたい。選択した形状を使用してホットスポットを生成したい場合、以下は私が望むリンクの例です。また、画像の上にキャンバスをオーバーレイで描画するにはどうすればよいですか？

例： https ：//google-developers.appspot.com/maps/documentation/javascript/examples/drawing-tools http://www.maschek.hu/imagemap/imgmap

Answer 1

http://jsbin.com/acuvom/5でこのようなものを実装しました

基本的には元画像と同じ幅・高さの透明キャンバスを同じ位置に描画します。私の例では、画像の選択領域を抽出するために画像もキャンバスに移動しましたが、この部分は省略できます。

オーバーレイ キャンバスに描画すると、下にある画像が透けて見える半透明の領域が描画されます。