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.

Crear el Canvas

<canvas height="300px" width="300px" id="micanvas"></canvas>

Obtener el contexto del Canvas

Y obtener acceso al contexto:

var canvas = document.getElementById("micanvas");
var ctx = canvas.getContext("2d");

Crear el objeto Image

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";

Insertar la imagen en el Canvas

Lo siguiente será insertar la imagen en el CANVAS. Para ello el 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);

Gestionar la carga de la imagen

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.