Canvas: O Cómo Dibujar Imágenes con JavaScript?

Hoy me he sentido inspirado a escribir, y nada mejor (como todo tutorial que se respete) que empezar explicando como funciona el mecanismo de dibujo en HTML5/javascript.

Básicamente debemos utilizar el elemento Canvas de HTML5, el cual nos brinda herramientas para dibujar fijuras geométricas, texto e imágenes, así como aplicar algunas transformaciones sobre dichos elementos, por ejemplo desplazamiento, escalamiento y rotaciones.

Para empezar a utilizar canvas, veamos el siguiente ejemplo:


<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8" />
 <style>
 canvas { background: #eee; display: block; margin: 0 auto; border: 1px solid black;} body { background-color: black; }
 </style>
</head>

 <body>
    <canvas id="Canvas1" width="480" height="320" > </canvas>
</body>

</html>


Con el cual obtendremos una salida similar a esto:

Ahora debemos mostrar una imagen, para ejemplo pueden usar la de este robot:

Para poder dibujarlo, básicamente seguimos el siguiente patrón:

1. Obtenemos la referencia al objeto Canvas1
2. Obtenemos la referencia a su contexto (si es 2D o 3D, nosotros usamos el 2D)
3. Creamos un objeto Image para cargar la imagen del robotin
4. Limpiamos el canvas (en realidad limpiamos su contexto)
5. Cuando la imagen esté completamente cargada, la dibujamos en el contexto del canvas.

Esto en código JavaScript quedaría de la siguiente forma:

<script>
var canvas = document.getElementById("Canvas1"); //1. referencia al objeto Canvas
var context = canvas.getContext('2d'); //2. referencia al contexto 2D del canvas

var img = new Image(); //3.1 objeto para cargar la imagen
img.src = "img/robowalk00.png"; //3.2 cargamos en memoria la imagen del robot

//4. Limpiamos el canvas:
context.clearRect(0,0, canvas.width, canvas.height);

//5. Cuando la imagen esté cargada, la dibujamos.
if(img.complete)
{
  context.drawImage(img, canvas.width/2, canvas.height/2);
}
else
{
  img.onload = function ()
 {
   context.drawImage(img, canvas.width/2, canvas.height/2);
 }
}
</script>

Como pueden ver, el código es bastante simple, pero es la base para todos los ejemplos que realizaremos más adelante. Así que asegúrense de entenderlo, probarlo y hacerlo funcionar.

En el siguiente enlace pueden descargar el código completo con el primer ejemplo, de forma que puedan probarlo por ustedes mismos.

Por cualquier duda o consulta que tengan, podemos expandir el tema en los comentarios ;)