The shadowBlur property
Summary: The shadowBlur property is used to set the severity of the blurring effect of the shadow
An example of the
shadowBlur
property
This sets the amount of blurring that the shadow has. In conjunction with the
clip()
function and setting the offset X/Y values
to zero you can achieve inner shadows:
- Draw a shape
- Clip the canvas to that shape
- Draw an outline of that shape just outside the clipped area with shadow enabled
- Set the shadow X/Y offsets to 0
- Half the shadow will fall inside the clipped area and will thus be drawn on your canvas
An example
<script>
window.onload = function ()
{
var canvas = document.getElementById("cvs");
var context = canvas.getContext('2d');
var x = 50;
var y = 50;
var width = 100;
var height = 100;
context.shadowColor = '#ccc';
context.shadowOffsetX = 3;
context.shadowOffsetY = 3;
context.shadowBlur = 25;
context.fillStyle = 'red';
context.fillRect(x, y, width, height);
}
</script>