javascript - ctx.addEventListener makes canvas drawing disappear -

when add

 ctx.addeventlistener('mousedown', ondown, false); 

the canvas drawing (background , shapes) disappear , page blank, , when remove event listener code reappear again. wondering why happening? in advance

<script>    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 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 found     cx = event.pagex     cy = event.pagey     alert("x,y ="+cx+','+cy); } 

you can't add event listener canvas's context. you'll need add canvas itself.

instead of:

ctx.addeventlistener('mousedown', ondown, false); 

… this:

canvas.addeventlistener('mousedown', ondown, false);