Índice

Agregar sombreado

Los efectos de sombreado se agregan mediante las propiedades shadowOffsetX, shadowOffsetY, shadowBlur y shadowColor.

Las propiedades shadowOffsetX=valor y shadowOffsetY=valor indican el margen de la sombra respecto a los ejes horizontal y vertical. Es posible asignar valores negativos para dirigir la sombra hacia arriba y hacia la izquierda. Los valores positivos provocan un efecto de sombreado hacia abajo y hacia la derecha. El valor por defecto es 0 para ambas propiedades.

La propiedad shadowBlur=valor determina el efecto de dispersión de la sombra. El valor por defecto es 0.

La propiedad shadowColor=color se refiere al color del efecto de sombreado. Este color se indica según la notación de color de las hojas de estilo CSS. El valor por defecto es el negro (black).

La idea de agregar un efecto de sombreado al ejemplo anterior es tentadora:

<!DOCTYPE html> 
<html lang="es"> 
<head> 
   <title>Html5</title> 
   <meta charset="UTF-8"> 
</head> 
<body> 
<canvas id="dibujo" width="240px" height="200px" 
style="border: 1px solid black"> 
Su navegador no soporta la etiqueta canvas. 
</canvas> 
<script type="text/javascript"> 
var canvas = document.getElementById("dibujo"); 
var contexto = canvas.getContext("2d"); 
contexto.textBaseline = "alphabetic"; 
contexto.textAlign = "left";  ...