Rendering Shadows on Canvas
In this exercise you can learn the JavaScript properties behind creating shadow effects on the canvas element.
<!DOCTYPE html>
<html>
<head>
<style>
body{ margin:10px; background:#666; }
#my_canvas{ background:#FFF; border:#000 1px solid; }
</style>
<script>
function draw(){
var ctx = document.getElementById('my_canvas').getContext('2d');
// shadowColor = color || hex || rgba()
// shadowOffsetX = positive or negative number
// shadowOffsetY = positive or negative number
// shadowBlur = positive number
ctx.fillStyle = '#FC0';
ctx.fillRect(50, 50, 100, 100);
ctx.shadowColor = 'rgba(0,0,0,1)';
ctx.shadowOffsetX = 2;
ctx.shadowOffsetY = 2;
ctx.shadowBlur = 3;
ctx.fillRect(200, 50, 100, 100);
}
window.onload = draw;
</script>
</head>
<body>
<canvas id="my_canvas" width="500" height="350"></canvas>
</body>
</html>