canvasで表示されてる画像を１つだけ選択して表示する方法

Javascriptでcanvasを使用し、複数の画像を表示したり、消したり、一部の画像のみを表示させる処理を検討しています。

現在、画面を開いたときに複数の画像をロードし、画面に描画することはできたのですが、
今度は、その中から特定のひとつの画像をクリックした際に、他のすべての画像を削除（非表示）にし、その対象の画像のみを表示させたままにしたいのです。

調べると「ClearRect」というメソッドがあるそうなのですが、引数で座標を指定するようです。
考え方としては、この「ClearRect」を使い、画像ひとつひとつを削除していくという考えでいいのでしょうか？

No.2 回答者： fujillin 回答日時： 2015/05/11 17:34

え～～っと・・・

ご質問への回答からは少し外れているかもしれませんが、

「画像」とおっしゃっているものは、いわゆる<img src="～～">で表示するようなたぐいのものでしょうか。
それとも線や丸、四角などの描画図形でしょうか？

というのも、もしも前者であるのなら通常のHTML上で対応したほうが簡単そうに思えるからです。
canvasですと、表示された結果は全体で一つの画像のようになってしまいますので、ANo1様の回答にもありますように、クリックされた位置から対象となっている画像をスクリプトで算出・特定し、消去（または再描画）することになります。
画像がタイリングされているような場合は比較的簡単ですが、重なっていたり移動できたりすると、それなりに面倒な処理になると予想されます。

一方で、DOM要素であれば、そのまま個別のオブジェクトとして認識されていますので、クリックされた対象の特定も簡単ですし、個別に表示/非表示することも簡単だからです。
どうしてもcanvas上でないとならない理由があるのであれば、ANo1様の回答のような方法になろうかと思います。

なさりたいことの全体像がつかめていませんが、線や丸なども含めてオブジェクトとして扱えるSVGを利用するという方法もあるかもしれません。
　http://ascii.jp/elem/000/000/585/585608/

No.1 回答者： hitomura 回答日時： 2015/05/10 23:27

……ふむ、その仕様なら1個1個消すよりも、クリックされた画像が何なのかを調べて画像全てを消した後にクリックされた画像を再描画する方が速そうだなぁ。

というか、画像と表示するか否かをセットにしたデータを持つようにして、何かアクションがあるたびに表示するか否かのデータを修正して canvas （再）描画をするようにし、canvas 描画時には画像描画を表示するとなっているもののみを描くように再描画したほうが、あとあと他の機能を追加するときに楽なような気がする。