HTML5 Canvas Reference - shadowOffsetX








The shadowOffsetX property sets or gets the horizontal 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

shadowOffsetX Yes Yes Yes Yes Yes

JavaScript syntax

context.shadowOffsetX=number;

Property Values

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

Example

The following code shows how to set the shadowOffsetX.


<!DOCTYPE html>
<html>
<body>
<canvas id="canvas" width='500px' height='200px'/>
<script type='text/javascript'>
    var ctx = document.getElementById("canvas").getContext("2d");
<!--  ww w.j a  v  a 2  s. c om-->
    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:





Example 2

The following code enlarge the shadowOffsetX to show only the shadow.


<!DOCTYPE html>
<html>
<body>
<canvas id="canvas" width='500px' height='200px'/>
<script type='text/javascript'>
    var ctx = document.getElementById("canvas").getContext("2d");
<!--   ww w.j  a va  2 s.  c  om-->
    ctx.shadowBlur=100;
    ctx.shadowOffsetX = 150;
    ctx.shadowColor="red";
    ctx.fillStyle="rgba(0,0,0,0.7)";
    ctx.fillRect(20,60,100,80);


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

The code above is rendered as follows:

Example 3

The following code shows how to draw 3D text.


<!DOCTYPE html>
<html>
<body>
<canvas id="canvas" style='background-color:#EEE;' width='500px' height='200px'/>
<script type='text/javascript'>
   canvas = document.getElementById("canvas");
   context = canvas.getContext("2d");
   <!--from ww w.j av a 2 s.  c om-->
   context.font = "40pt Calibri";
   context.fillStyle = "black";
   // align text horizontally center
   context.textAlign = "center";
   // align text vertically center
   context.textBaseline = "middle";
   draw3dText(context, "Hello 3D World!", canvas.width / 2, 120, 5);
   
   
   function draw3dText(context, text, x, y, textDepth){
       var n;
       
       // draw bottom layers
       for (n = 0; n < textDepth; n++) {
           context.fillText(text, x - n, y - n);
       }
       
       // draw top layer with shadow casting over
       // bottom layers
       context.fillStyle = "#5E97FF";
       context.shadowColor = "black";
       context.shadowBlur = 10;
       context.shadowOffsetX = textDepth + 2;
       context.shadowOffsetY = textDepth + 2;
       context.fillText(text, x - n, y - n);
   }
    
</script>
</body>
</html>

The code above is rendered as follows: