Chart.js で書いたグラフが消えない

前提・実現したいこと

htmlで検索された数字を変数としてx軸としてy軸に１の高さを持った棒グラフを描画し続けることをしたいのですが、１回書いた棒グラフが消えず、カーソルを合わせると前のグラフが出てきてしまいます。

発生している問題・エラーメッセージ

HTML
1<html lang="jp" dir="ltr">
2    <head>
3        <meta charset="utf-8">
4        <title>test</title>
5        <script src="Chart.min.js"></script>
6    </head>
7    <body>
8      filter: <input type="text" id="myfilter" maxlength="3">
9      <input type="button" value="検索！" id="search">
10      <script>
11      var array01 =[];
12      var array02 =[];
13      document.getElementById('search').onclick = function() {
14      var t1=parseInt(document.querySelector('#myfilter').value);
15      var t2=1
16        if (MyC) {
17          MyC.destroy();
18        }
19        array01.push(t1);
20        array02.push(t2);
21      var ctx = document.getElementById("canvas");
22      var MyC = new Chart(ctx, {
23    type: 'bar',
24    data: {
25      labels: array01,
26      datasets: [
27        {
28          label: ' ',
29          data: array02,
30          backgroundColor: "rgba(219,39,91,0.5)"
31        }
32      ]
33    }
34  });
35}
36      </script>
37      <canvas id="canvas"></canvas>
38</body>
39</html>

試したこと

新しくグラフを作成する際に、作成したデータのIDを確認し、.destroyで消しているつもりなのですが消えません。

補足情報（FW/ツールのバージョンなど）

macでAtom、filezillaを使っています。

行動規範の内容に同意します

回答1件

ベストアンサー

変数MyCがローカルスコープのためオブジェクトの保持ができていないので、
グラフ作成後もif文内を通りませんね。

HTML
1・・・
2<script>
3  var MyC;
4  var array01 =[];
5  var array02 =[];
6  document.getElementById('search').onclick = function() {
7    var t1=parseInt(document.querySelector('#myfilter').value);
8    var t2=1
9    if (MyC) {
10      MyC.destroy();
11    }
12    array01.push(t1);
13    array02.push(t2);
14    var ctx = document.getElementById("canvas");
15    MyC = new Chart(ctx, {
16      type: 'bar',
17      data: {
18        labels: array01,
19        datasets: [
20          {
21            label: ' ',
22            data: array02,
23            backgroundColor: "rgba(219,39,91,0.5)"
24          }
25        ]
26      }
27    });
28  }
29</script>
30・・・