HTML canvas shadowBlur Property

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 −


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

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


 Live Demo

<!DOCTYPE html>
<canvas id="newCanvas" width="600" height="350" style="border:2px solid orange;">
   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);


Updated on: 12-Jun-2020


Kickstart Your Career

Get certified by completing the course

Get Started