Добавление слушателя события на холст?

Question

Я видел похожие посты к этому и смотрел несколько уроков, но я не могу заставить свой холст иметь слушателя событий. Вот что у меня есть:

<canvas id="ctx" width="599" height="575" style="border:1px solid #000000;"></canvas>
<script>
var ctx = document.getElementById("ctx").getContext("2d");
ctx.addEventListener('mousedown',onDown,false);
function onDown(event){
console.log("click");
};
ctx.font = "normal 20pt Pixelate";
ctx.fillStyle= "gray";
ctx.fillRect  (0,0, 700, 700);
</script>

Так как мне добавить это? У меня есть ссылка на внешний сценарий js после этого, для которого требуется ссылка на щелчок, чтобы изменить переменную, но даже поместить там прослушиватель событий, который находится после объявления холста, все еще не удается установить sh это. Браузер говорит, что ctx.addEventListener не является функцией.

Answer 1

Прослушиватель событий должен применяться к HTMLCanvasElement (фактическому элементу DOM), а не к RenderingContext.

Например, это приведет к тому, что ваш пример будет работать:

var canvas = document.getElementById("ctx");
var ctx = canvas.getContext("2d");
canvas.addEventListener('mousedown',onDown,false);

Источники:

• https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API
• https://developer.mozilla.org/en-US/docs/Web/API/EventTarget