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>