(clickイベントでcanvasを表示、数秒後非表示にする)

前提・実現したいこと

clickイベントで画像を表示し、setIntervalを使って5秒後にcanvasを非表示（初期状態）にしたいです

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

countが1より小さくなってもcanvasが表示された状態です。

該当のソースコード

js
1<!DOCTYPE html>
2<html lang="ja" dir="ltr">
3  <head>
4    <meta charset="utf-8">
5    <title></title>
6  </head>
7  <body>
8    <canvas id="canvas" width="300" height="300"></canvas>
9    <input type="button" id="btn" value="ボタン">
10    <script type="text/javascript">
11      window.onload = function(){
12        function draw(){
13          var canvas = document.getElementById("canvas");
14          var ctx = canvas.getContext("2d");
15
16          var img = new Image();
17          img.src = "sample.jpg";
18          img.onload = function() {
19            ctx.drawImage(img, 0, 0, 300, 300);
20          }
21        }
22
23        var buttan = document.getElementById("btn");
24        buttan.addEventListener("click", draw);
25
26        var count = 5;
27        var sample = setInterval(function(){
28          count--;
29          console.log(count);//カウントの確認
30          if(count < 1){//countが0になったらcanvasを初期化
31            clearInterval(sample);
32            buttan.removeEventListener("click", draw);
33          }
34        },1000);
35      }
36    </script>
37  </body>
38</html>
39
40}