HTML Canvas - shadowOffsetX Property

The HTML Canvas shadowOffsetX property of Canvas 2D API uses the interface CanvasRenderingContext2D context object to specify the horizontal distance of the shadow to be drawn for the rendered graphic.

Possible input values

It takes a float integer value representing the shadow length horizontally to be needed from the graphic on the Canvas element.

Example

The following example draws a rectangle onto the Canvas element and adds a positive offset shadow to it by using the HTML Canvas shadowOffsetX property.

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Reference API</title>
   <style>
      body {
         margin: 10px;
         padding: 10px;
      }
   </style>
</head>
<body>
   <canvas id="canvas" width="400" height="200" style="border: 1px solid black;"></canvas>
   <script>
      var canvas = document.getElementById('canvas');
      var context = canvas.getContext('2d');
      context.shadowColor = 'brown';
      context.shadowBlur = 100;
      context.shadowOffsetX = 50;
      context.fillStyle = 'red';
      context.fillRect(20, 20, 200, 150)
   </script>
</body>
</html>

Output

The output returned by the following code on the webpage as −

Example

The following example adds a shadow to the rectangle using negative offset x value by the shadowOffsetX property.

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Reference API</title>
   <style>
      body {
         margin: 10px;
         padding: 10px;
      }
   </style>
</head>
<body>
   <canvas id="canvas" width="400" height="200" style="border: 1px solid black;"></canvas>
   <script>
      var canvas = document.getElementById('canvas');
      var context = canvas.getContext('2d');
      context.shadowColor = 'brown';
      context.shadowBlur = 100;
      context.shadowOffsetX = -50;
      context.fillStyle = 'red';
      context.fillRect(180, 20, 200, 150)
   </script>
</body>
</html>

Output

The output returned by the following code on the webpage as −

html_canvas_shadows_and_transformations.htm