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>
Prueba este código
Un leve sombreado da idea de elevación sobre el papel.
