html tutorial - shadowOffsetY Property in HTML5 Canvas - html5 - html code - html form
- The shadowOffsetY is the style property of HTML Canvas.
- The shadowOffsetY is used to set or returns the vertical distance of shadow from the shape.
Syntax for shadowOffsetY Property in HTML5 Canvas:
context.shadowOffsetY=number;
Property values for shadowOffsetY Property in HTML5 Canvas:
Value | Description |
---|---|
number | The positive or negative number that specifies the vertical distance of the shadow from the shape. |
Sample Coding for shadowOffsetY Property in HTML5 Canvas:
Tryit<!DOCTYPE html>
<html>
<head>
<title>wikitechy shadowoffsety propertey in canvas</title>
</head>
<body>
<h1>wikitechy shadowoffsety property in canvas</h1>
<canvas id="wikitechyCanvas" width="300" height="150"
style="border:1px solid #d3d3d3;">
</canvas>
<script>
var c = document.getElementById("wikitechyCanvas");
var context = c.getContext("2d");
context.shadowBlur = 10;
context.shadowOffsetY = 20;
context.shadowColor = "red";
context.fillStyle= "blue";
context.fillRect(30, 30, 120, 100);
</script>
</body>
</html>
Code Explanation for shadowOffsetY Property in HTML5 Canvas:

- “wikitechyCanvas” is declare id value of the HTML canvas.
- The getElementById() method is used to get the element with the specific id (“wikitechyCanvas”).
- “shadowoffsetY”=20 is distance between the rectangle and the shadow.
- shadowOffsetY=20 indicates that the shadow starts 20 pixels to the below.
- ShadowOffsetY=-20 indicates that the shadow starts 20 pixels to the above. - “shadowcolor= red“ the shadow of the rectangle will be displayed in red color.
Output for shadowOffsetY Property in HTML5 Canvas:

- The HTML canvas rectangle with gray border.
- The rectangle box with blue color.
- The Shadow of rectangle is displayed in red color to the below.
Browser Support for shadowOffsetY Property in HTML5 Canvas:
![]() |
![]() |
![]() |
![]() |
![]() |
---|---|---|---|---|
Yes | 9.0 | Yes | Yes | Yes |
Tips and Notes
- You can adjust the horizontal distance of the shadow from the shape, by using shadowOffsetX property.