Propriedade shadowOffsetX do canvas HTML

Manual de referência do HTML5 Canvas

Definição e uso

shadowOffsetX Atributo que define ou retorna a distância horizontal entre a forma e a sombra.

  • shadowOffsetX = 0 Indica que a sombra está diretamente abaixo da forma
  • shadowOffsetX = 20 Indica que a sombra está 20 pixels à direita da posição left da forma
  • shadowOffsetX = -20 Indica que a sombra está 20 pixels à esquerda da posição left da forma

Dica:Para ajustar a distância vertical da sombra em relação à forma, use shadowOffsetY Atributos.

Exemplo

Desenhar um retângulo com uma sombra deslocada para a direita em 20 pixels (a partir da posição left do retângulo):

O seu navegador não suporta a tag canvas.

JavaScript:

var c = document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.shadowBlur=10;
ctx.shadowOffsetX=20;
ctx.shadowColor="black";
ctx.fillStyle="blue";
ctx.fillRect(20,20,100,80);

Experimente você mesmo

Sintaxe

context.shadowOffsetX=number;

Valor do atributo

Valor Descrição
number Um valor positivo ou negativo, define a distância horizontal da sombra em relação à forma.

Detalhes técnicos

Valor padrão: 0

Suporte do navegador

Os números na tabela indicam a versão do navegador que suportou a primeira vez essa propriedade.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 9.0 3.6 4.0 10.1

Observação:Os navegadores Internet Explorer 8 e anteriores não suportam o elemento <canvas>.

Manual de referência do HTML5 Canvas