w3.unpo<code>todo

Aplicar sombras

Las sombras pueden ser aplicadas a todos los trazados que dibujamos en el <canvas>.
Hay cuatro propiedades que determinan las características de las sombras: shadowColor ( el color ), shadowBlur ( el desenfoque ), shadowOffsetX ( el desplazamiento horizontal ) y shadowOffsetY ( el desplazamiento vertical ).
Las propiedades shadowOffsetX y shadowOffsetY pueden tomar valores tanto positivas ( la sombra cae hacia la derecha y abajo ) como negativas ( hacia la izquierda y arriba ).

Vea la chuleta con las propiedades y metodos() de canvas.

Veamos un ejemplo. A continuación aplicamos una sombra tanto a un rectángulo como a un texto.
Para esto establecemos primero el desenfoque:

ctx.shadowBlur=5;

el desplazamiento ( offset ) en x e y:

ctx.shadowOffsetX=2;
ctx.shadowOffsetY=2;

y el color de la sombra:

ctx.shadowColor="#333";

La sombra definida será aplicada a todos los trazados que dibujamos a continuación. Para que esto no pase podemos utilizar los métodos save() y restore().

Antes de definir la sombra guardamos el contexto con save().

ctx.save();

A continuación van los trazados con sombra ( el cuadrado y el texto ).
Antes de dibujar el texto sin sombra restablecemos los valores iniciales del contexto con restore().

ctx.restore();

Su navegador no soporta canvas :( 

	var canvas = document.getElementById("lienzo");
		if (canvas && canvas.getContext) {
		var ctx = canvas.getContext("2d");
			if (ctx) {  
			            ctx.save()
						ctx.shadowBlur=5;
						ctx.shadowOffsetX=2;
						ctx.shadowOffsetY=2;
						ctx.shadowColor="#333";
						// rectangulo
						ctx.fillStyle="white";
						ctx.beginPath();
						ctx.fillRect(20,20,100,80);
						// texto
						ctx.font = "18px Verdana";
						ctx.textAlign = "center";
						ctx.fillText("Los gozos y las sombras", canvas.width/2, 150);
						ctx.restore()
						// texto 2
						ctx.font = "20px Verdana";
						ctx.textAlign = "left";
						ctx.fillStyle="blue";
						ctx.fillText("texto sin sombra", 18, 200);
						}
			}

Lea más acerca de cómo escribir en el canvas