HTML Reference Manual

HTML tag大全

HTML canvas shadowBlur attribute

The shadowBlur attribute is used to set the blur level of the shadow. The default value is 0. The <canvas> element allows you to draw graphics on the web page using JavaScript.

HTML canvas reference manual

Online Example

Draw a yellow rectangle with black and blue shadows, the blur level is 20:

Now let's look at an example to implement the canvas shadowBlur attribute:

Example

<!DOCTYPE html>
<html>
<head>
<title>HTML canvas shadowBlur attribute usage (Basic Tutorial Website w3(codebox.com)</<title>
</<head>
<body>
<canvas id="newCanvas" width="450" height="250" style="border:1px solid #d3d3d3>
Your browser does not support HTML5　canvas tag
</canvas>
<script>
　　　var c = document.getElementById("newCanvas");
　　　var ctx = c.getContext("2d");
　　　ctx.shadowBlur =　20;
　　　ctx.shadowColor = "black";
　　　ctx.fillStyle = "green";
　　　ctx.fillRect(4,　4,　100,　150);
　　　ctx.shadowBlur =　30;
　　　ctx.shadowColor = "blue";
　　　ctx.fillStyle = "orange";
　　　ctx.fillRect(200,　40,　200,　150);
</script
</body>
</html>

Test to see ‹/›

Browser compatibility

IEFirefoxOperaChromeSafari

Internet Explorer 9Firefox, Opera, Chrome, and Safari support the shadowBlur property.

Note:Internet Explorer 8 Versions prior to and including do not support the <canvas> element.

Definition and usage

The shadowBlur property sets or returns the blur level of the shadow.

Default value:	0
JavaScript syntax:	context.shadowBlur=number;

The number above represents the blur level of the shadow.

Attribute value

Value	Description
number	Blur level of the shadow

HTML canvas reference manual

HTML: <template> tag