Tengo un lienzo y deseo dibujar un icono en él. Soy consciente de que debe esperar a que se cargue la imagen antes de intentar dibujar la imagen; sin embargo, nada de lo que he intentado ha funcionado.

Intenté usar la URL de la imagen completa (protocolo, dominio y ruta), moví todo, nada funcionó.

He estado buscando en Google durante la mayor parte de una hora y casi todas las soluciones implican asegurarse de que la imagen se cargue primero.

Aquí hay un par de fragmentos de lo que tengo.

 const image = new Image() image.addEventListener('load', _ => { addImage(canvas, image, coords) }) image.src = '/images/image-location.svg'

 function addImage(canvas, image, coords) { const ctx = canvas.getContext('2d') ctx.save() ctx.drawImage(image, 0, 0, image.width, image.height, ...coords, 50, 50) ctx.restore() }

Lancé un console.log dentro del detector de eventos solo para asegurarme de que se estaba disparando y de hecho se dispara. Incluso inicié sesión dentro addImage y definitivamente llega tan lejos.

¿Cuál es la solución a esto?