HTML Canvas - shadowBlur Property

The HTML Canvas shadowBlur property of Canvas 2D API is used to specify the blur amount to be applied to the graphic rendered inside the Canvas element.

Possible input values

The property takes positive float integer values where '0' represents no blur. The increase in number indicates more blur is to be applied.

Example

The following example draws a square onto the Canvas element and adds a shadow to it using the HTML Canvas shadowBlur property.

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

Output

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

HTML Canvas ShadowBlur Property

Example

The following example draws a circle onto the canvas element and adds a shadow to it using the property shadowBlur.

<!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 = 'green';
      context.shadowBlur = 50;
      context.fillStyle = 'grey';
      context.arc(100, 75, 50, 0, 2 * Math.PI);
      context.fill();
   </script>
</body>
</html>

Output

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

HTML Canvas ShadowBlur Property
html_canvas_shadows_and_transformations.htm
Advertisements