質問: ### 質問 いつもお世話になっております。 `input`入力時に変化するチャートを作成中でして、入力のたびにキャンバスが重複してしまうためリセットする方法を知りたいです。 ### 現状 リセットする関数として適切なのは`clearRect()`かと考えていますが、初めて使う関数である上に、チャート作成プラグインを解析して必要な場所を探し出す能力もないため、どのような書き方が適切か?イマイチ分かりません。 > > 実際のサンプル > > > > > 質問は、HTML蘭の42行目にある`clearRect()`の使い方についてです。 どのように書けばキャンバスが重複することがないか? もしお分かりになる方がいらっしゃいましたら、ご回答どうぞ宜しくお願い致します。 ### 参考情報 ●チャート作成プラグイン「Canvas Chart」 例: ●jQueryバージョン 2.2.4
回答: clearRect()はコンテキストのメソッドです。canvasを扱う場合には直接要素からメソッドが生えているわけではなく、 ``` var ctx = canvas.getContext('2d'); ``` としてctxに対して何かする場合がほとんどです。 ``` document.querySelector('canvas').getContext('2d').clearRect(0, 0, 500, 500); ```