Efeito de Sombra no Canvas: Shadows

Neste tutorial de Canvas, vamos aprender como aplicar o efeito de shadows, ou seja, sombras em nossos desenhos.

Estudar offline pela apostila (Download)

Nível de Sombra: shadowBlur

O atributo shadowBlur especifica o nível de sombra que você vai aplicar em seus desenhos no Canvas. Por padrão, ele é 0.

Ou seja:
contexto.shadowBlur = 0

É o nível máximo de sombra, totalmente preenchido.

Vamos criar um desenho de um retângulo, com cor de sombra vermelha e nível 0:

<script type="text/javascript">
 var canvas = document.getElementById('meuCanvas');
 var contexto = canvas.getContext('2d');

 contexto.shadowBlur = 0;
 contexto.shadowOffsetX = 5;
 contexto.shadowOffsetY = 5;
 contexto.shadowColor = "red";
 contexto.fillRect(50, 50, 100, 100);
</script>

O resultado é:

Ou seja, é o nível mais 'denso' de sombra.
Agora vamos trocar: shadowBlur = 0;
Por: shadowBlur = 30;

Veja o nível 50 sombra:

Veja como está mais 'espalhada', difura, a sombra.
A medida que for aumentando o nível de shadowBlur, mais esfumaçada ficará a sombra.

Deslocamento e Direção da sombra: shadowOffsetX e shadowOffsetY

Note que a sombra só apareceu na direita e embaixo.
Note também que tem dois atributos no código anterior, que não mencionamos ainda:
shadowOffsetX
shadowOffsetY

shadowOffset significa deslocamento da sombra.
No caso, criamos uma sombra de 5px na horizontal (shadowOffsetX).
E sombra de 5 px na vertical (shadowOffsetY)

Se quisermos 10px na horizontal e 15 px na vertical, basta fazermos:

<script type="text/javascript">
 var canvas = document.getElementById('meuCanvas');
 var contexto = canvas.getContext('2d');

 contexto.shadowBlur = 20;
 contexto.shadowOffsetX = 10;
 contexto.shadowOffsetY = 15;
 contexto.shadowColor = "red";
 contexto.fillRect(25, 25, 200, 200);
</script>

Veja o resultado:

E se quisermos a sombra no lado esquerdo? Simples, basta darmos um valor negativo para shadowOffsetX.

E para fazer sombra acima da figura? Basta dar um valor negativo de pixel para shadowOffsetY.

Em vez de 10 e 15 do exemplo anterior, vamos usar -10 e -15:

<script type="text/javascript">
 var canvas = document.getElementById('meuCanvas');
 var contexto = canvas.getContext('2d');

 contexto.shadowBlur = 20;
 contexto.shadowOffsetX = -10;
 contexto.shadowOffsetY = -15;
 contexto.shadowColor = "red";
 contexto.fillRect(25, 25, 200, 200);
</script>

Resultado:

E para fazermos a sombra aparecer em todos os lados?

Simples: não forneça nem shadowOffsetX nem shadowOffsetY:

<script type="text/javascript">
 var canvas = document.getElementById('meuCanvas');
 var contexto = canvas.getContext('2d');

 contexto.shadowBlur = 50;
 contexto.shadowColor = "red";
 contexto.fillRect(25, 25, 200, 200);
</script>

Resultado:

JavaScript Progressivo