Imágenes externas

El canvas tamibén se puede usar como contenedor para imágenes, lo que te permite, entre otras cosas, dibujar sobre ella formas o gradientes como has visto en los otros capítulos dedicados al elemento canvas.

Lo primero que tienes que hacer es cargar la imagen. Eso lo puedes hacer con el elemento img de html5 o con javascript. En cualquier caso antes de dibujar la imagen en el canvas, hay que asegurarse que se ha cargado completamente, para eso se debe usar un evento onload, en los ejemplos tienes varias formas de hacerlo. Se trata de usar el mecanismo deeventos: cuando la imagen se carga lhace una llamada a una cunción y se ejecuta el código que tenga programado.

window.onload = function(){

var canvas = document.getElementById('miPanel');

var miImagen=document.getElementById("paisaje");

lapiz = canvas.getContext('2d');

lapiz.drawImage(miImagen, 50, 40);

}

</script>

Sobre esta imagen puedes dibujar formas o poner texto o probar cualquier efecto. Es decir esta imagen cargada puede usarse como una imagen de fondo para el canvas . En este ejemplo se usa el evento onload del objeto imagen

var canvas = document.getElementById('miPanel');

var miImagen=document.getElementById("paisaje");

lapiz = canvas.getContext('2d');

miImagen.onload = function(){

lapiz.drawImage(miImagen, 10, 10);

lapiz.beginPath();

lapiz.font = "40px Arial";

lapiz.textAlign = "center";

lapiz.fillStyle = "white";

lapiz.fillText("De viaje", 300, 200);

}

</script>

Esto en cuanto a usar imágenes cargadas desde el servidor. Pero hay otra forma: usando los mapas de bits