Open In App

HTML canvas shadowOffsetY Property

Improve
Improve
Like Article
Like
Save
Share
Report

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:


Last Updated : 12 Mar, 2024
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads