The shadowBlur property
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>