Estoy tratando de cargar una imagen de un archivo y dibujarla en un lienzo. Tengo esto..
const canvas = document.createElement("canvas");
const context = canvas.getContext("2d");
myImage = new Image();
myImage.src = "img/image.jpg";
context.drawImage(myImage, 0, 0, 100, 100);
Esto no está dibujando nada en la pantalla, ¿dónde me estoy equivocando? Puedo ver que las herramientas de desarrollo cargan la imagen, así que sé que puede encontrar el archivo por sí mismo.
Si el elemento canvas ya está en la página, deberá reemplazar el método createElement con querySelector :
// const canvas = document.createElement("canvas");
const canvas = document.querySelector("canvas");
const context = canvas.getContext("2d");
myImage = new Image();
myImage.src = "img/image.jpg";
myImage.addEventListener("load", ()=>{
context.drawImage(myImage, 0, 0, 100, 100);
}); // Thanks to Xion 14 for the reminder!
De lo contrario, deberá agregar el elemento canvas al DOM, por ejemplo, a través de document.body.appendChild( canvas );