HTML canvas shadowOffsetY Property
Last Updated :
12 Mar, 2024
The canvas shadowOffsetY property in HTML canvas sets the vertical distance of a shadow from the shape. Positive values move the shadow downwards, while negative values move it upwards. This property affects the shadow position along the Y-axis.
Syntax:
context.shadowOffsetY = number
Property Values:
It is used number to set a positive or negative number which represents the vertical distance of shadow.
Value
| Description
|
---|
0
| shadow is right behind the shape
|
---|
20
| shadow starts 20 pixels below the shape’s top
|
---|
-20
| shadow starts 20 pixels above the shape’s top
|
---|
HTML canvas shadowOffsetY Property Examples
Example 1:Â In this example we creates a green rectangle with a blue shadow, set 40 pixels below, and a blur radius of 20 pixels using JavaScript.
HTML<!DOCTYPE html>
<html>
<head>
<title>
HTML canvas shadowOffsetY Property
</title>
</head>
<body>
<canvas id="GFG"
width="500"
height="300">
</canvas>
<script>
let x =
document.getElementById("GFG");
let context =
x.getContext("2d");
context.shadowBlur = 20;
// vertical distance of shadow
context.shadowOffsetY = 40;
context.shadowColor = "blue";
context.fillStyle = "green";
context.fillRect(50, 50, 350, 200);
context.stroke();
</script>
</body>
</html>
Output:Â
Example 2:Â In this example the html canvas draws a magenta rectangle with a green shadow 40 pixels above, blurred with a radius of 5 pixels using JavaScript.
HTML<!DOCTYPE html>
<html>
<head>
<title>
HTML canvas shadowOffsetY Property
</title>
</head>
<body>
<canvas id="GFG"
width="500"
height="300">
</canvas>
<script>
let x =
document.getElementById("GFG");
let context =
x.getContext("2d");
context.shadowBlur = 5;
// vertical distance of shadow.
context.shadowOffsetY = -40;
context.shadowColor = "rgb(0, 153, 0)";
context.fillStyle = "rgb(255, 0, 255)";
context.fillRect(50, 50, 350, 200);
context.stroke();
</script>
</body>
</html>
Output:Â
Supported Browsers
The browser supported by canvas shadowOffsetY Property in option tag are listed below:
Share your thoughts in the comments
Please Login to comment...