HTML5 Canvas Reference - shadowColor








The shadowColor property sets or gets the color used for shadows.

To create a shadowEffect, there are four properties of the Canvas context that need to be manipulated:

  • context.shadowColor
    The color of the shadow. This uses the same "#RRGGBB" format of the fill Style and strokeStyle properties.
  • context.shadowOffsetX
    The x offset of shadow. This can be a positive or negative number.
  • context.shadowOffsetY
    The y offset of shadow. This can be a positive or negative number.
  • context.shadowBlur
    The blur filter diffusion of the shadow. The higher the number, the more diffusion.

To create a red shadow that is 5 pixels to the right and 5 pixels down from your text, with a blur of 2 pixels, you would set the properties like this: 

context.shadowColor  = "#FF0000"; 
context.shadowOffsetX  = 5; 
context.shadowOffsetY  = 5; 
context.shadowBlur  = 2;




Browser compatibility

shadowColor Yes Yes Yes Yes Yes

JavaScript syntax

context.shadowColor=color;

Property Values

Value Description
color The CSS color value for shadows. Default value is #000000

Example

The following code uses two different shadow colors.

<!DOCTYPE html>
<html>
<body>
<canvas id="canvas" width='500px' height='200px'/>
<script type='text/javascript'>
    var ctx = document.getElementById("canvas").getContext("2d");
    ctx.shadowBlur = 25;<!-- www .  ja  va2s .  c  o  m-->
    ctx.fillStyle = "yellow";
    
    ctx.shadowColor = "black";
    ctx.fillRect(20, 20, 110, 80);
    
    ctx.shadowColor = "blue";
    ctx.fillRect(140, 20, 110, 80);


</script>
</body>
</html>

Click to view the demo





Example 2

The following code adds shadows to a text.


<!DOCTYPE html>
<html>
<body>
<canvas id="canvas" width='500px' height='200px'/>
<script type='text/javascript'>
    var ctx = document.getElementById("canvas").getContext("2d");
<!--from  w ww. j a  va2  s. com-->
    ctx.font = "bold 20px sans-serif";
    ctx.shadowColor = "rgb(190, 190, 190)";
    ctx.shadowOffsetX = 2;
    ctx.shadowOffsetY = 2;
    ctx.shadowBlur = 5;
    ctx.fillStyle = "rgb(255, 0, 0)";
    ctx.fillText("java2s.com...", 5, 20);


</script>
</body>
</html>

The code above is rendered as follows: