Estoy tratando de agregar eventos a un objeto de imagen, que creo dinámicamente (usando el constructor Image()) y lo vinculo a un elemento de lienzo HTML. He agregado con éxito el evento "cargar". Sin embargo, no puedo agregar ningún otro evento, como "clic" o "mousedown". Los bloques de código Javascript y HTML se pegan a continuación.
Se llama al controlador de eventos de "carga" y recibo la alerta. Sin embargo, el evento "mousedown" no lo es. ¿Por qué veo este comportamiento y cómo puedo corregirlo?
Muchas gracias por su ayuda.
pd: El evento "mouseup" en el elemento funciona bien.
function myDraw(){ var img = new Image(); // Create new img element img.addEventListener('load', function() { alert('Loaded! img type is \n' + typeof img); // execute drawImage statements here const canvas = document.getElementById('canvas'); canvas.setAttribute('width', 1000); canvas.setAttribute('height', 1000); const ctx = canvas.getContext('2d'); ctx.drawImage(img, 200,200); }, false); img.src = './floorplan.jpg'; // Set source path img.addEventListener("mousedown",function(){ alert('Mouse down'); }, false); const c1 = document.getElementById('h1'); c1.addEventListener('mouseup',function(){ alert('Mouse up'); }, false); } myDraw(); <div> <h1 id="h1">CANVAS</h1> <canvas id="canvas"></canvas> <!--img id="fplan" src = "./floorplan.jpg" /--> </div> <script src='./script.js' type="text/javascript"></script>Parece que necesitaba agregar el detector de eventos al elemento del lienzo y no la imagen cargada en el lienzo.
El c1.addEventListener('click',clickZoom, false); la línea logra esto.
const c1 = document.getElementById('canvas'); c1.setAttribute('width', 1000); c1.setAttribute('height', 1000); const ctx = c1.getContext('2d'); var img = new Image(); // Create new img element function myDraw(){ img.addEventListener('load', function() { // execute drawImage statements here ctx.drawImage(img, 200,200); }, false); img.src = './floorplan.jpg'; // Set source path c1.addEventListener('click',clickZoom, false); } function clickZoom() { alert('Zoom clicked'); ctx.drawImage(img, 200, 200, ctx.canvas.width * 0.5, ctx.canvas.height * 0.5); // this needs changing wrt image size not canvas size!! } myDraw(); <div> <h1 id="h1">CANVAS</h1> <canvas id="canvas"></canvas> <!--img id="fplan" src = "./floorplan.jpg" /--> </div> <script src='./script.js' type="text/javascript"></script>