Insertar una imagen en un Canvas 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.

Publicaciones relacionadas:

Dibujar líneas en Canvas con HTML5 Dibujar un rectángulo en un Canvas con HTML5 Crear un Path sobre un Canvas de HTML5 Detectar el soporte del Canvas de HTML5 Vídeo Insertar Imagen en un Canvas HTML5