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.

<img src="/canvas/paisaje2.jpg" style="display:none" id="paisaje">
<canvas width="600" height="500" id="miPanel"></canvas>
<script>
window.onload = function(){
var canvas = document.getElementById('miPanel');
var miImagen=document.getElementById("paisaje");
lapiz = canvas.getContext('2d');
lapiz.drawImage(miImagen, 50, 40);
}
</script>

Prueba este código

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

<img src="/canvas/paisaje2.jpg" style="display:none" id="paisaje">
<canvas width="420" height="420" id="miPanel" style="border:1px solid #000000;"></canvas>
<script>
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>

Prueba este código

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