Canvas shadowOffsetY attribute
definition and usage
shadowOffsetY attribute setting or returning the vertical distance between the shape and the shadow.
shadowOffsetY=0Indicates that the shadow is directly below the shapeshadowOffsetY=20Indicates that the shadow is 20 pixels below the top position of the shapeshadowOffsetY=-20Indicates that the shadow is 20 pixels above the top position of the shape
tip:To adjust the horizontal position of the shape, use shadowOffsetX attribute
example
Draw a rectangle with a shadow offset 20 pixels downwards (from the top position of the rectangle):
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.shadowBlur=10;
ctx.shadowOffsetY=20;
ctx.shadowColor="black";
ctx.fillStyle="blue";
ctx.fillRect(20,20,100,80);
syntax
context.shadowOffsetY=number;
attribute value
| value | description |
|---|---|
| number | A positive or negative value defines the vertical distance between the shadow and the shape. |
Detalhes técnicos
| Valor padrão: | 0 |
|---|
Suporte do navegador
Os números na tabela indicam a versão do navegador que suportou pela 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:O Internet Explorer 8 e versões anteriores não suportam o elemento <canvas>.
