Canvas API: Adicionando Sombras

O elemento canvas suporta a adição de sombras aos objetos desenhados. Para criar sombras no contexto do canvas, são usados os seguintes atributos:

shadowOffsetX: deslocamento horizontal em pixels para a direita (ou para a esquerda, se o valor for negativo).
shadowOffsetY: deslocamento vertical em pixels para baixo (ou para cima, se o valor for negativo).
shadowBlur: número de pixels para definir o grau de desfoque da sombra.
shadowColor: cor da sombra.

Por exemplo, vamos definir uma sombra para um retângulo:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Exemplo de Canvas</title>
  </head>
  <body>
    <canvas id="canvas" width="400" height="250"></canvas>
    <script>
      const canvas = document.getElementById("canvas");
      const context = canvas.getContext("2d");
      context.fillStyle = "#3498db";
      context.shadowOffsetX = 10;
      context.shadowOffsetY = 10;
      context.shadowBlur = 10;
      context.shadowColor = "#999";
      context.fillRect(10, 10, 200, 200);
    </script>
  </body>
</html>

Nesse caso, a sombra é aplicada ao retângulo:

Renderização de sombras no canvas em JavaScript

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Exemplo Canvas</title>
  </head>
  <body>
    <canvas id="canvas" width="400" height="250"></canvas>
    <script>
      const canvas = document.getElementById("canvas");
      const context = canvas.getContext("2d");
      context.font = "16px Verdana";
      context.fillStyle = "#222";
      context.shadowOffsetX = 3;
      context.shadowOffsetY = 3;
      context.shadowBlur = 3;
      context.shadowColor = "#AAA";
      context.fillText("Sombras no Canvas", 80, 30);

      const img = new Image();
      img.src = "forest.png";
      img.onload = function () {
        context.shadowOffsetX = 8;
        context.shadowOffsetY = 8;
        context.shadowBlur = 5;
        context.shadowColor = "#333";
        context.drawImage(img, 50, 50, 192, 128);
      };
    </script>
  </body>
</html>

Sombras no canvas em JavaScript