Open In App

HTML canvas shadowOffsetX Property

Last Updated : 09 Jun, 2023
Improve
Improve
Like Article
Like
Save
Share
Report

The canvas shadowOffsetX property is used to set or return the horizontal distance of the shadow from the shape. This property holds a positive or negative value where a positive value indicates the shadow to the right and negative value indicates the shadow to the left. Syntax:

context.shadowOffsetX=number

Property Values:

  • number: It is used to set a positive or negative number which represents the horizontal distance of the shadow.

Example-1: 

html




<!DOCTYPE html>
<html>
  
<head>
    <title>
        HTML canvas shadowOffsetX Property
    </title>
</head>
  
<body>
    <canvas id="GFG"
            width="500"
            height="300">
  </canvas>
  
    <script>
        var x = document.getElementById("GFG");
        var context = x.getContext("2d");
        context.shadowBlur = 20;
        
        // set horizontal distance.
        context.shadowOffsetX = 40;
        context.shadowColor = "blue";
        context.fillStyle = "green";
        context.fillRect(50, 50, 350, 200);
        context.stroke();
    </script>
  
</body>
  
</html>


Output: Example-2: 

html




<!DOCTYPE html>
<html>
  
<head>
    <title>
        HTML canvas shadowOffsetX Property
    </title>
</head>
  
<body>
    <canvas id="GFG"
            width="500"
            height="300">
  </canvas>
  
    <script>
        var x = 
            document.getElementById("GFG");
        var context = x.getContext("2d");
        context.shadowBlur = 5;
        context.shadowOffsetX = 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:

  • Google Chrome
  • Internet Explorer 9.0
  • Firefox
  • Safari
  • Opera


Previous Article
Next Article

Similar Reads

HTML canvas lineWidth Property
The HTML canvas lineWidth property is used to set or return the width of the line (thickness of the line). The width of the line is set in terms of pixels. The default value of this property is 1. Syntax: context.lineWidth = number; Property Values: number: This property value indicates the number which specifies the line width in terms of pixels.
2 min read
HTML canvas textAlign Property
The HTML canvas textAlign Property is used to set or return the current alignment for text content, according to the anchor point. Basically, the text will start at that position and the text will end at that specified position. Syntax: context.textAlign="center | end | left | right | start"; Property Values: start: It has a Default. The text start
2 min read
HTML canvas font Property
The HTML canvas font Property is used to change the present font family of the Text content of the &lt;canvas&gt; element. The font Property has a Default Property i.e 10px sans-serif Syntax: context.font="italic small-caps bold 12px arial"; Property Values: font-family: It is used to set the font type of an HTML element. It holds several font name
2 min read
HTML canvas lineJoin Property
The HTML canvas lineJoin property is used to set or return the type of corner created, when two lines meet, by using the lineJoin property. The type of join can have one of three styles: bevel, round, or miter. However, the join style has generally miter style. Syntax: context.lineJoin = "bevel|round|miter"; Property Values: miter: It is the defaul
2 min read
HTML canvas shadowColor Property
The Canvas shadowColor property is used to set or returns the color that is used for shadows. The fillStyle property is used to create shadows. This property can be set to a string representing a CSS color value, which we want as shadow color. By default, shadow color is set to black (CSS color value #000000). Syntax:: context.shadowColor = color;
2 min read
HTML canvas fillStyle Property
The canvas fillStyle property is used to set or return the color, gradient, or pattern used to fill the drawing. Style: context.fillStyle=color|gradient|pattern; Property Value: color: It is used to set the filled color of the drawing. The default value of the canvas fillStyle property is black.gradient: It is used to set the gradient object to fil
2 min read
HTML canvas strokeStyle Property
The canvas strokeStyle property is used to set or return the stroke of color, gradient, or pattern used in the drawing. Syntax: context.strokeStyle=color|gradient|pattern; Property Value: color: It is used to set the filled color of drawing. The default value of canvas fillStyle property is black.gradient: It is used to set the gradient object to f
2 min read
HTML canvas shadowBlur Property
The canvas shadowBlur property is used to set or return the blur level for shadows. Syntax: context.shadowBlur=number Property: number: It is used to set the blur level for the shadow. Example 1: C/C++ Code &amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html&amp;gt; &amp;lt;head&amp;gt; &amp;lt;title&amp;gt; HTML canvas shadowBlur Property &amp;lt;/title
1 min read
HTML canvas lineCap Property
The canvas lineCap property is used to set or return the style of end caps of line. The line can have one of three cap styles: butt, round, or square. The default value of canvas lineCap property are butt. The lineCap property must be set before calling the stroke() function. Syntax: context.lineCap = "butt|round|square"; Property Values: butt: It
2 min read
HTML canvas textBaseline Property
The HTML canvas textBaseline property is used to set or return the baseline of canvas text. This property is used to set the font baseline alignment in HTML. Basically, this property is used to control the vertical alignment of text to draw onto the canvas. Syntax: context.textBaseline="alphabetic|top|hanging|middle|ideographic|bottom"; Property Va
2 min read