canvas.onmousedown = function (event) { console.log(JSON.stringify(event)); // this logs {"isTrusted":true} };mismo ancho
canvas.addEventListener("mousedown", function (event) { console.log(JSON.stringify(event)); // this logs {"isTrusted":true} }); y cuando trato de registrar solo el event sin analizarlo, la aplicación falla
Ese sandbox tiene mucho código, solo me voy a centrar en lo que tienes aquí...
El objeto de evento del mouse es complejo y lo más probable es que JSON.stringify esté tomando un atajo; y corrija si intenta generar el objeto completo, será lento o podría bloquearse como lo describe, pero hay otras propiedades allí, puede verlas en el ejemplo a continuación.
var canvas = document.querySelector("canvas") var ctx = canvas.getContext("2d") ctx.fillStyle = "red" for (let i = 10; i < 100; i += 10 ) ctx.rect(i, i, 50, 50); ctx.stroke(); canvas.onmousedown = function (event) { console.log(JSON.stringify(event)); console.log(event.x, event.y); ctx.beginPath() ctx.arc(event.x, event.y, 5, 0, 8) ctx.fill(); }; body { margin: 0 } <canvas id="canvas"></canvas> Puede ver que estoy usando event.x, event.y para dibujar círculos en el punto en el que el usuario hizo clic.
Puede leer más sobre las propiedades disponibles en la documentación oficial:
https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent#properties
Me imagino que su objetivo final no es solo generar:
console.log(JSON.stringify(event)) debe haber algo más que necesite que hagan esos eventos ...
Tal vez sea mejor hacer una nueva pregunta...
Explique allí qué está tratando de hacer en esos eventos y qué error está obteniendo, si corresponde.