Windows apps
Collapse the table of content
Expand the table of content
The topic you requested is included in another documentation set. For convenience, it's displayed below. Choose Switch to see the topic in its original location.

shadowOffsetY property

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

This property is read/write.

HTML Canvas 2D Context, Section 7Internet Explorer 9




object.shadowOffsetY = p

p = object.shadowOffsetY


Property values

Type: number

The vertical offset value.

Standards information


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


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

  <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 offsetY value.
              ctx.strokeRect(25, 25, 200, 200);
              ctx.shadowOffsetY = "10";
              ctx.strokeRect(75, 75, 200, 200);
              ctx.shadowOffsetY = "15";
              ctx.strokeRect(125, 125, 200, 200);
              ctx.shadowOffsetY = "20";
              ctx.strokeRect(175, 175, 200, 200);
              ctx.shadowOffsetY = "25";
              ctx.strokeRect(225, 225, 200, 200);
<body onload="draw();">
  <canvas id="MyCanvas" width="600" height="500">This browser or document mode doesn't support canvas</canvas>

See also




© 2017 Microsoft