Open In App

HTML canvas shadowBlur Property

Last Updated : 09 Jun, 2023
Comments
Improve
Suggest changes
Like Article
Like
Report

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: 

html
<!DOCTYPE html>
<html>

<head>
    <title>
        HTML canvas shadowBlur 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 = 50;
        context.shadowColor = "yellow";
        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 shadowBlur 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 = 100;
        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

Similar Reads