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

<canvas width="600" height="300" id="miPanel"></canvas>
<script>		
		var miImagen = new Image();
		var canvas = document.getElementById('miPanel');
		miImagen.src = '/canvas/paisaje2.jpg';
		lapiz = canvas.getContext('2d');
		miImagen.addEventListener('load', function() {
lapiz.drawImage(miImagen, 10, 10);
}, false); </script>
Prueba este código

Como ves requiere un poco de "ingeniería". El método addEventListener se encarga de programar el evento load para esperar a que la imagen se cargue antes de dibujarla en el canvas

Pero si quieres puedes cargar la imagen con HTML. Como ves primero pongo un elemento img (lo oculto si quiero que solo se muestre en el canvas).

<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 otras formas.