HTML Canvas - shadowColor Property

The HTML Canvas shadowColor property is used to specify the shadow color for a graphic drawn inside the Canvas element.

Possible input values

It takes a string value containing color code which may be any of the following type −

  • Color-namea

  • Hex code

  • Rgb value

  • Rgba value

Example

The following example adds color to the drawn shadow using color name by the HTML Canvas shadowColor property.

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

Output

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

HTML Canvas ShadowColor Property

Example

The following example takes hex color code and applies for the shadow applied to the shape inside the Canvas element.

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

Output

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

HTML Canvas ShadowColor Property

Example

The following example draws a shape onto the Canvas element and applies shadow color to it using rgba coloring by the property shadowColor.

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

Output

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

HTML Canvas ShadowColor Property
html_canvas_shadows_and_transformations.htm
Advertisements