HTML canvas shadowBlur Property

HTML Web Development Front End Technology

The shadowBlur property of the HTML canvas is used to set the blur level for shadows. The default value is 0. The <canvas> element allows you to draw graphics on a web page using JavaScript. Every canvas has two elements that describes the height and width of the canvas i.e. height and width respectively.

Following is the syntax −

ctx.shadowBlur=num;

Above, the num represents the blur level for the shadow.

Let us now see an example to implement the shadowBlur property of canvas −

Example

Live Demo

<!DOCTYPE html>
<html>
<body>
<canvas id="newCanvas" width="600" height="350" style="border:2px solid orange;">
</canvas>
<script>
   var c = document.getElementById("newCanvas");
   var ctx = c.getContext("2d");
   ctx.shadowBlur = 20;
   ctx.shadowColor = "black";
   ctx.fillStyle = "green";
   ctx.fillRect(40, 40, 100, 250);
   ctx.shadowBlur = 30;
   ctx.shadowColor = "blue";
   ctx.fillStyle = "orange";
   ctx.fillRect(200, 40, 200, 150);
</script>
</body>
</html>

Output

Arjun Thakur

Updated on: 12-Jun-2020

128 Views

Kickstart Your Career

Get certified by completing the course

Get Started