Efecto de sombra en CANVAS

Cualquier forma que dibujemos en el canvas de HTML admite el efecto de sombra. Un texto, un rectángulo o un circulo puede tener una sombra alrededor. Para ello el objeto de dibujo (al que estamos denominando lapiz en los ejemplos) posee una serie de propiedades como son:
shadowColor
El color que queremos darle a la sombra
shadowBlus
El grado de opacidad o desenfoque que muestra la sombra
shadowOffsetX, shadowOffsetY
Para la posición indicamos el desplazamiento en horizontal (shadowOffsetX) y en vertical (shadowOffsetY)
Mira en este ejmplo como se aplica a un rectángulo relleno

<canvas width="600" height="300" id="mipanel"></canvas>

<script>

var panel = document.getElementById("mipanel");

var lapiz = panel.getContext("2d");

lapiz.shadowBlur=5;

lapiz.shadowOffsetX=4;

lapiz.shadowOffsetY=4;

lapiz.shadowColor="#333";

lapiz.fillStyle="grey";

lapiz.beginPath();

lapiz.fillRect(20,20,100,80);

</script>

Probar este código

De la misma forma puedes aplicar sombras a un texto como puedes comprobar con el siguiente ejemplo, en el que además puedes ver como centrar el texto en el canvas:

<canvas width="600" height="300" id="mipanel"></canvas>

<script>

var panel = document.getElementById("mipanel");

var lapiz = panel.getContext("2d");

lapiz.shadowBlur=12;

lapiz.shadowOffsetX=4;

lapiz.shadowOffsetY=4;

lapiz.shadowColor="#333";

lapiz.fillStyle="green";

lapiz.font = "40px Arial";

lapiz.textAlign="center";

lapiz.fillText("Texto sombreado y centrado", panel.width/2, 100);

</script>