title: ctx.addEventListener makes canvas drawing disappear
body: <p>When I add</p>
  
  <pre><code> ctx.addEventListener('mousedown', onDown, false);
  </code></pre>
  
  <p>The canvas drawing (background and shapes) disappear and the page is blank, and then when I remove this event listener from the code they reappear again. Just wondering why this is happening? Thanks in advance</p>
  
  <pre><code>&lt;script&gt;
  
  
   var ctx, W, H;
   var x = 10;
  
  window.onload = function() {
  
  
    var canvas = document.getElementById("canvas");
    W = window.innerWidth;
    H = window.innerHeight;
    canvas.width = W;
    canvas.height = H;
  
  
    ctx = canvas.getContext("2d");
    ctx.addEventListener('mousedown', onDown, false); //When this is here, canvas drawing disappears, when it's not here canvas drawing reappears again
  
  
  
  
    setInterval(draw, 1);
  
  
  function draw() {
    ctx.globalCompositeOperation = "source-over";
    ctx.fillStyle = "#E6E6FF";
    ctx.fillRect(0, 0, W, H);
  
    ctx.fillStyle = "black";
    ctx.fillRect(x,20,10,10);
    ctx.font = "30px Arial";
    ctx.fillText("Hello World",10,80);
    ctx.fill();
  
  }
  
  
  }
  
  
  function onDown(event) {
      //where x is found
      cx = event.pageX
      cy = event.pageY
      alert("X,Y ="+cx+','+cy);
  }
  </code></pre>