HTML 5 атрибут холста щелчок

var canvas, context;

function drawBox() {
  context.fillStyle = "black";
  context.strokeRect(20, 20, canvas.width - 20, canvas.height - 20);
}

function clickReporter(e) {
  console.log("clicked");
}

canvas = document.getElementById("clickCanvas");
context = canvas.getContext("2d");
drawBox();

// Add the eventlistener
canvas.addEventListener("click", clickReporter);

<canvas id="clickCanvas" width="300" height="300">Your browser does not support the HTML5 canvas</canvas>

var canvas, context;

function drawBox() {
  context.fillStyle = "black";
  context.strokeRect(20, 20, canvas.width - 20, canvas.height - 20);
}

function clickReporter(e) {
  console.log("clicked");
}

canvas = document.getElementById("clickCanvas");
context = canvas.getContext("2d");
drawBox();

<!--- Add the eventlistener --->
<canvas id="clickCanvas" width="300" height="300" onclick="clickReporter()">Your browser does not support the HTML5 canvas</canvas>