jQueryでキャンバスをリセットする方法

Question

###質問
いつもお世話になっております。

input入力時に変化するチャートを作成中でして、入力のたびにキャンバスが重複してしまうためリセットする方法を知りたいです。

###現状

リセットする関数として適切なのはclearRect()かと考えていますが、初めて使う関数である上に、チャート作成プラグインを解析して必要な場所を探し出す能力もないため、どのような書き方が適切か？イマイチ分かりません。

実際のサンプル

https://jsfiddle.net/ozkx15p9/

質問は、HTML蘭の42行目にあるclearRect()の使い方についてです。

どのように書けばキャンバスが重複することがないか？

もしお分かりになる方がいらっしゃいましたら、ご回答どうぞ宜しくお願い致します。

###参考情報

●チャート作成プラグイン「Canvas Chart」
例：https://webkaru.net/jquery-plugin/canvas-chart/

●jQueryバージョン
2.2.4

Answer 1

clearRect()はコンテキストのメソッドです。canvasを扱う場合には直接要素からメソッドが生えているわけではなく、

var ctx = canvas.getContext('2d');

としてctxに対して何かする場合がほとんどです。

document.querySelector('canvas').getContext('2d').clearRect(0, 0, 500, 500);

Comments

[ninjanin]

ありがとうございます。
後半はctxに対して何をしているのでしょうか？ctxの記述がなく意図がつかめませんでした。
あと、プラグインによって作成されるチャートを特定しclearRect()しなければならないのだと思いますが、その特定はどうなりますか？

[x_x]

提示されたサンプルにはcanvas要素が一つしかありません。
そのため、querySelectorでそのまま取得したコードです。
複数あるというのであれば、idなりで特定すればいいでしょう。

ctxという変数名に深い意味はありませんが、よく使われるものです。
提示されたサンプルでもそう書いてあるはずです。
サンプルのコード自体は理解されているのでしょうか？
https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/getContext

[ninjanin]

ああ、なるほど。わかりました。ありがとうございました！