HTML5 Canvas Reference - shadowOffsetY








The shadowOffsetY property sets or gets the vertical distance between the shadow and the shape.

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

shadowOffsetY Yes Yes Yes Yes Yes

JavaScript syntax

context.shadowOffsetY=number;

Property Values

Value Description
number Default to 0. A positive or negative number to set the vertical distance between the shadow and the shape

Example

The following code sets shadowOffsetY when drawing text.


<!DOCTYPE html>
<html>
<body>
<canvas id="canvas" width='500px' height='200px'/>
<script type='text/javascript'>
    var context = document.getElementById("canvas").getContext("2d");
<!--  w w w  .  java 2  s .c o m-->
    context.shadowOffsetX = 2;
    context.shadowOffsetY = 2;
    context.shadowBlur = 5;
    context.shadowColor = "rgba(0, 0, 0, 0.5)";
    context.textBaseline = "top";
    context.font = "75px helvetica";
    context.textAlign = "center";
    context.fillText("java2s.com", 200,10);


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

The code above is rendered as follows:





Example 2

The following code sets the shadowOffsetY to a large value.


<!DOCTYPE html>
<html>
<body>
<canvas id="canvas" width='500px' height='200px'/>
<script type='text/javascript'>
    var ctx = document.getElementById("canvas").getContext("2d");
<!--  w ww .j  a  v  a 2 s .c o  m-->
    ctx.shadowBlur = 10;
    ctx.shadowOffsetY = 20;
    ctx.shadowColor = "black";
    ctx.fillStyle = "blue";
    ctx.fillRect(20, 20, 70, 80);



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

The code above is rendered as follows: