canvasに描画したものを全て削除するには？

下記を参考に、canvasを使ってマウスで線を描ける仕組みをつくっているのですが、描いた線を全て消す方法がわからずに困っています。

https://gist.github.com/Cartman0/436459b9b85cfdd …

canvasのエリア内ではなく、canvasを置いているHTMLにあるaタグでくくったリンクを押すことで非同期によって消したいのですが、どのようなコード（関数？）を書いて、どのように実行すればよいのでしょうか。

ご存知の方がおられましたら、ご回答いただけますと幸いです。よろしくお願いいたします。

No.2 ベストアンサー 回答者： fujillin 回答日時： 2017/06/05 09:41

ANo1です。

解決したのかどうかわかりませんが・・・

一番簡単な例として、ご提示のサンプルに以下を追加すればクリアできるようになりますね。

◆HTML
<div><a href="#" id="hoge">クリア</a></div>

◆SCRIPT
//7.キャンバス クリア処理
document.getElementById('hoge').addEventListener('click', function(e){
ctx.clearRect(0, 0, 540, 320);
e.preventDefault();
}, false);

この回答へのお礼

具体的なコードまでご提示いただきまして、ありがとうございました！これだけのことでたくさんの学びがありました。せっかく持っているオライリーの本を本棚の肥やしにしていないで、きちんと学びたいと思います。

お礼日時：2017/06/05 20:30

No.1 回答者： fujillin 回答日時： 2017/06/04 16:44

こんにちは

canvasに描かれた線や図形等は全体でひとつの図になっています。
これをクリアするには、clearのメソッドを利用するか、新しく(上から)矩形等で塗り潰すことでも可能です。どちらの場合も範囲の指定が出来ますので、全体とは限らず部分的な消去をすることもできます。
（範囲にcanvas全体を指定すれば、全消去になります）

具体的なメソッドとしては、clearRect()またはfillRect() メソッドなどを利用なされば良いでしょう。
http://www.html5.jp/canvas/ref/method/clearRect. …

＞canvasを置いているHTMLにあるaタグでくくったリンクを押すことで
＞非同期によって消したいのですが～
ページ内で完結している処理なので、非同期云々は関係ないと思いますが、該当するリンク要素のクリックイベントとして、上記のctx.clearRectなどの処理を設定しておけば実現できるはずです。
ただし、ご提示のサンプルではctxオブジェクトが匿名関数のなかで設定されていますので、そのスコープの範囲内に記述する必要がありますね。

この回答へのお礼

丁寧なご回答をいただき、ありがとうございました。

canvasの概念的なことも漠然としていて、手のつけようがなかったので、大変、参考になりました。
また、匿名関数の辺りも曖昧だったので、ご指摘いただき、大変、ありがたいです。

お礼日時：2017/06/04 19:00