This page is Ready to Use

Notice: The WebPlatform project, supported by various stewards between 2012 and 2015, has been discontinued. This site is now available on github.

shadowOffsetX

Summary

Specifies the distance that the shadow will be offset in the positive horizontal distance, in coordinate space units.

Property of apis/canvas/CanvasRenderingContext2Dapis/canvas/CanvasRenderingContext2D

Syntax

var result = CanvasRenderingContext2D.shadowOffsetX;
CanvasRenderingContext2D.shadowOffsetX = value;

Return Value

Returns an object of type NumberNumber

Examples

<canvas id="myCanvas" width="300" height="150" style="border:1px solid blue;"></canvas>
<p>. . .</p>
<script>
var can=document.getElementById("myCanvas");
var ctxt=can.getContext("2d");
ctxt.shadowBlur=15;
ctxt.shadowOffsetX=10;
ctxt.shadowOffsetY=10;
ctxt.shadowColor="blue";
ctxt.fillStyle="orange";
ctxt.fillRect(30,20,100,100);
</script>

Notes

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.

Related specifications

W3C HTML Canvas 2D Specification
W3C Candidate Recommendation

Attributions