The shadowOffsetX property
This sets the x-axis
offset of the shadow. Values can be positive (the shadows are
cast to the right) or negative (the shadows
are cast to the left). Inner shadows are not supported but are achievable by:
- 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 = 30;
context.shadowOffsetY = 0;
context.shadowBlur = 15;
context.fillStyle = 'red';
context.fillRect(x, y, width, height);
}
</script>