HTML5 - Pintar una imagen en el canvas

Buenas a todos!
Para pintar una imagen en el Canvas en HTML5, únicamente tenemos que tener una instancia del contexto perteneciente a un Canvas concreto, y una instancia de un objeto Image:

<canvas id='c'></canvas>
<script languaje="JavaScript">
  var can;
  var ctx;  

  var backgroundStars_img = new Image();
  backgroundStars_img.src = "back_stars.png";  

  function init() {
    can          = document.getElementById("c");
    ctx          = can.getContext("2d");
    can.width    = 480;
    can.height   = 320;
    ctx.drawImage(backgroundStars_img,0,0,480,320,0,0,480,320);      
  }  

 window.onload = init;
</script>
  
Las imágenes que estamos empleando para el tutorial son las siguientes:
"back_stars.png" y "ovnis.png"

 
Cuando queremos pintar varias imágenes sobre el canvas, tenemos que tener en cuenta que el orden de pintado es el orden en el que llamamos a la función drawImage, es decir, si queremos pintar un background y luego objetos sobre ese background. Primero deberemos pintar el background y luego ir pintando los objetos sobre éste.

<canvas id='c'></canvas>
<script languaje="JavaScript">
  var can;
  var ctx;  

  var backgroundStars_img = new Image();
  backgroundStars_img.src = "back_stars.png";
  var ovniVerde_img = new Image();
  ovniVerde_img.src = "ovnis.png";   

  function init() {
    can          = document.getElementById("c");
    ctx          = can.getContext("2d");
    can.width    = 480;
    can.height   = 320;
    ctx.drawImage(backgroundStars_img,0,0,480,320,0,0,480,320);      
    ctx.drawImage(ovniVerde_img,0,0,148,59,324,91,79,31);
  }  

 window.onload = init;
</script>
El resultado del código anterior es el siguiente:

Si os fijáis, la imagen "ovnis.png", contiene 2 ovnis, uno naranja y uno verde, pero únicamente hemos pintado el primer ovni.
Esto es debido a que la función drawImage nos permite seleccionar la sección que queremos pintar de una imagen concreta.

     drawImage(img,sx,sy,swidth,sheight,x,y,width,height);

img: es una instancia de un objeto de tipo Image que contiene la imagen a pintar.
sx: es la coordenada x dentro de la imagen a partir de la que empezamos a recortar.
sy: es la coordenada y dentro de la imagen a partir de la que empezamos a recortar.
swidth: el ancho en píxeles del recorte que haremos a la imagen.
sheight: el alto en píxeles del recorte que haremos a la imagen.
x: la coordenada x dentro del canvas donde pintaremos la imagen.
y: la coordenada y dentro del canvas donde pintaremos la imagen.
width: el ancho que tendrá la imagen final.
height: el alto que tendrá la imagen final.

Gracias a esto, podremos juntar en un único fichero todos los fotogramas de una animación concreta, y ir recorriéndolos para obtener lo que denominamos un sprite animado.

Hay una cosa importante que no he comentado! para crear animaciones o ir moviéndo los objetos por el canvas, es vital pintar por completo todo el fotograma siguiente, (o almenos las zonas que sí que van a ser alteradas). En caso de que no lo hagamos, como ya he explicado, cada vez que llamemos a drawImage, se pintará sobre lo que ya esté pintado en el canvas (será un caos). Por esta razón es necesario crear un bucle de pintado.


<canvas id='c'></canvas>
<script languaje="JavaScript">
  var can;
  var ctx;  

  var backgroundStars_img = new Image();
  backgroundStars_img.src = "back_stars.png";  
  var ovniVerde_img = new Image();
  ovniVerde_img.src = "ovnis.png";

  function init() {
    can             = document.getElementById("c");
    ctx             = can.getContext("2d");
    can.width         = 480;
    can.height         = 320;
    setInterval(gameLoop, 1000/30);
  }  

  function gameLoop(){
    ctx.drawImage(backgroundStars_img,0,0,480,320,0,0,480,320);
    ctx.drawImage(ovniVerde_img,0,0,148,59,324,91,79,31);
  }

  window.onload = init;

</script>

Con setInterval indicamos la perioricidad con la que queremos que se ejecute una función concreta, en este caso gameLoop, que es la función en la que llamaremos a las rutinas de pintado drawImage.
 
    setInterval(gameLoop, 1000/30);

Hasta aquí el tutorial! Con estas pocas piezas ya se pueden empezar a hacer bastantes cosas!
No dudéis preguntar cualquier duda!