Insertar una imagen en un Canvas HTML5

06/Sep/2012 HTML5 , , 8 Comentarios
Ejemplos de Artículos sobre HTML5

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.

8 comentarios en “Insertar una imagen en un Canvas HTML5”

Víctor Cuervo

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

Víctor Cuervo

Lewis

como puedo insertar una imagen dentro del lienzo?

Víctor Cuervo

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.

Víctor Cuervo

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

Víctor Cuervo

Nos alegra mucho que te haya servido santino. :-D

Víctor Cuervo

Alejandro

Jajajaja muy bueno!!! nada que ver loco!

Víctor Cuervo

Cristian

muchas gracias por compartir tu conocimiento! me soluciono un inconveniente que tenia con canvas, muy bien explicado.

Víctor Cuervo

Víctor Cuervo

Cristian, muchísimas gracias por tu comentario. Anima a seguir escribiendo y explicando cosas.

Saludos.

¿Algo que nos quieras comentar?

Déjanos tu comentario, no te preocupes que tu email no será publicado

*