Crea tu web, tutor html, css

Efecto de sombra

Cualquier forma que dibujemos en el canvas 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>
Prueba 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.