Atributo shadowOffsetX del canvas HTML

Manual de referencia de HTML5 Canvas

Definición y uso

shadowOffsetX Establece o devuelve la distancia horizontal entre la forma y la sombra.

  • shadowOffsetX=0 Indica que la sombra está justo debajo de la forma
  • shadowOffsetX=20 Indica que la sombra está 20 píxeles a la derecha de la posición left de la forma
  • shadowOffsetX=-20 Indica que la sombra está 20 píxeles a la izquierda de la posición left de la forma

Consejo:Para ajustar la posición vertical de la sombra en relación con la forma, utilice shadowOffsetY Atributos.

Ejemplo

Dibujar un rectángulo con una sombra desplazada 20 píxeles hacia la derecha (desde la posición left del rectángulo):

Su navegador no admite la etiqueta 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);

Pruebe usted mismo

Sintaxis

context.shadowOffsetX=number;

Valor del atributo

Valor Descripción
number Un valor positivo o negativo, que define la distancia horizontal entre la sombra y la forma.

Detalles técnicos

Valor predeterminado: 0

Compatibilidad del navegador

Los números en la tabla indican la versión del navegador que admite completamente la propiedad por primera vez.

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

Notas:Internet Explorer 8 y versiones anteriores no admiten el elemento <canvas>.

Manual de referencia de HTML5 Canvas