ctx.addEventListener使画布绘图消失

Question

When I add

 ctx.addEventListener('mousedown', onDown, false);

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

<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 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);
}

Answer 1

You can't add an event listener to the canvas's context. You'll need to add it to the canvas itself.

Instead of:

ctx.addEventListener('mousedown', onDown, false);

… do this:

canvas.addEventListener('mousedown', onDown, false);

Answer 2

jsBin demo

use:

ctx.canvas.addEventListener

or:

canvas.addEventListener

cause context is just an Object in which the HTMLElementCanvas lives in.

To spot such errors your-self, the easiest way is to debug your code using Developer Tools, opening the console tab and reading the errors you're shown: