Efecto de sombra en CANVAS
- 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)
<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>
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>