html tutorial - shadowOffsetX Property in HTML5 Canvas - html5 - html code - html form

Learn html - html tutorial - Shadowoffsetx property in html5 canvas - html examples - html programs
- The shadowOffsetX is the style property of HTML Canvas.
- The shadowOffsetx is used to set or returns the horizontal distance of shadow from the shape.
- shadowOffsetX =-10 indicates that the shadow starts 10 pixels to the shape’s left position.
- shadowOffsetX=0 indicates that the shadow is right behind the shape.
Syntax for shadowOffsetX Property in HTML5 Canvas:
context.shadowOffsetX=number;
Property values for shadowOffsetX Property in HTML5 Canvas:
Value | Description |
---|---|
number | The positive or negative number that specifies the horizontal distance of the shadow from the shape. |
Sample Coding for shadowOffsetX Property in HTML5 Canvas:
Tryit<!DOCTYPE html>
<html>
<head>
<title>wikitechy shadowoffsetx property in canvas</title>
</head>
<body>
<h1>wikitechy shadowoffsetx 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 = 20;
context.shadowOffsetX = 30;
context.shadowColor = "red";
context.fillStyle= "blue";
context.fillRect(30, 30, 120, 100);
</script>
</body>
</html>
Code Explanation for shadowOffsetX 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”).
- “shadowOffsetX”=30 is a distance between the rectangle and the shadow.
- shadowOffsetX=30 indicates that the shadow starts 30 pixels to the right.
- shadowOffsetX=-30 indicates that the shadow starts 30 pixels to the left. - “shadowcolor= red“ the shadow of the rectangle will be displayed in red color.
Output for shadowOffsetX 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 right.
Browser Support for shadowOffsetX Property in HTML5 Canvas:
![]() |
![]() |
![]() |
![]() |
![]() |
---|---|---|---|---|
Yes | 9.0 | Yes | Yes | Yes |
Tips and Notes
- You can adjust the vertical distance of the shadow from the shape, by using shadowOffsetY property.