
Una de las cosas que podemos hacer con un CANVAS de HTML5 es insertar una imagen dentro de él. Para ello lo primero que vamos a hacer es crear un elemento CANVAS…
Y obtener acceso al contexto:
var canvas = document.getElementById("micanvas");
var ctx = canvas.getContext("2d");
A la hora de insertar una imagen en el Canvas vamos a utilizar el objeto Image, el cual es representado mediante un objeto HTMLImageElement del DOM. El atributo src llevará la URL asociada a la imagen.
var img = new Image();
img.src = "imagenes/logo_aulambra.png";
Lo siguiente será insertar la imagen en el CANVAS. Para ello en contexto del CANVAS nos ofrece el método .drawImage() El método .drawImage() recibe como parámetros la referencia a la imagen que acabamos de crear y las coordenadas x,y del Canvas a partir de las cuales posicionaremos la imagen.
ctx.drawImage(img, 0, 0);
Si ejecutamos el método .drawImage() puede que se cargue la imagen en el CANVAS o no. Esto es debido a que solo se ejecuta si ya se ha descargado la imagen. En caso contrario no pintará nada. Es por ello que necesitamos saber si se ha cargado la imagen. Para ello gestionaremos el evento .onload de la imagen, el cual se ejecuta una vez cargada la imagen. Quedándonos el siguiente código:
img.onload = function(){
ctx.drawImage(img, 0, 0);
}
Con estos sencillos pasos tendremos la imagen insertada en el CANVAS.
Has
pues fijate que en el canvas no me inserta el dibujo, queda el canvas arriba y el dibujo abajo, lo que necesito es que se dibuje una figura dentro del lienzo
Lewis
como puedo insertar una imagen dentro del lienzo?
Víctor Cuervo
Hola @Lewis,
Lo tienes explicado en http://lineadecodigo.com/html5/insertar-una-imagen-en-un-canvas-html5/
Espero que te sea de ayuda.
Saludos.
santino
muchas gracias por compartir tu conocimiento! me soluciono un inconveniente que tenia con canvas, muy bien explicado.
salvo por tu cara de puto pero el tutorial estuvo bueno
Víctor Cuervo
Nos alegra mucho que te haya servido santino. :-D
Alejandro
Jajajaja muy bueno!!! nada que ver loco!
Cristian
muchas gracias por compartir tu conocimiento! me soluciono un inconveniente que tenia con canvas, muy bien explicado.
Víctor Cuervo
Cristian, muchísimas gracias por tu comentario. Anima a seguir escribiendo y explicando cosas.
Saludos.