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



Shadowoffsetx property in html5 canvas

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:

shadowoffsetx 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. “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.
  4. “shadowcolor= red“ the shadow of the rectangle will be displayed in red color.

Output for shadowOffsetX Property in HTML5 Canvas:

shadowoffsetx 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 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.

Related Searches to shadowOffsetx Property in HTML5 Canvas