Was this page helpful?
Your feedback about this content is important. Let us know what you think.
Additional feedback?
1500 characters remaining
Export (0) Print
Expand All

shadowOffsetX property

Gets or sets the horizontal distance of a shadow from a shape.

This property is read/write.

HTML Canvas 2D Context, Section 7Internet Explorer 9

 

Syntax

JavaScript

object.shadowOffsetX = p

p = object.shadowOffsetX

 

Property values

Type: number

The horizontal offset value.

Standards information

Remarks

You can use positive or negative values to control the position of a shadow. If you do not specify the shadowOffsetX property, the default value is zero.

Examples

The following code example creates a series of squares that have different horizontal shadow offsets.


<html>
<head>
  <script type="text/javascript">
      function draw() {
          var canvas = document.getElementById("MyCanvas");
          if (canvas.getContext) {
              var ctx = canvas.getContext("2d");
              // Define the shadow parameters.
              ctx.shadowColor = "black";
              ctx.shadowBlur = "5";
              ctx.shadowOffsetX = "5";
              ctx.shadowOffsetY = "5";

              // Change the offsetX value.
              ctx.strokeRect(25, 25, 200, 200);
              ctx.shadowOffsetX = "5";
              ctx.strokeRect(75, 75, 200, 200);
              ctx.shadowOffsetX = "10";
              ctx.strokeRect(125, 125, 200, 200);
              ctx.shadowOffsetX = "15";
              ctx.strokeRect(175, 175, 200, 200);
              ctx.shadowOffsetX = "20";
              ctx.strokeRect(225, 225, 200, 200);
          }
      }
  </script>
</head>
<body onload="draw();">
  <canvas id="MyCanvas" width="600" height="500">This browser or document mode doesn't support canvas</canvas> 
</body>
</html>


See also

CanvasRenderingContext2D

 

 

Show:
© 2015 Microsoft