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:

shadowOffsetY Property in HTML5 canvas Code Explanation

  1. “wikitechyCanvas” is declare id value of the HTML canvas.
  2. The getElementById() method is used to get the element with the specific id (“wikitechyCanvas”).
  3. “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.
  4. “shadowcolor= red“ the shadow of the rectangle will be displayed in red color.

Output for shadowOffsetY Property in HTML5 Canvas:

shadowOffsetY Property in HTML5 canvas Output

  1. The HTML canvas rectangle with gray border.
  2. The rectangle box with blue color.
  3. 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.

Related Searches to shadowOffsety Property in HTML5 Canvas