<!DOCTYPE html>
<html>
<body>
<canvas id = 'output' width = '300' height = '300'></canvas>
<script>
var aCanvas = document.getElementById('output');
var ctx = aCanvas.getContext('2d');
ctx.shadowBlur = 5;
ctx.shadowColor = "black";
for (var i = 0; i < 6; i++) {
for (var j = 0; j < 6; j++) {
ctx.save();
ctx.fillStyle = 'rgb(' + (51 * i) + ',' + (255 - 51 * i) + ',255)';
ctx.shadowOffsetY = 2 + i;
ctx.shadowOffsetX = 2 + j;
ctx.translate(10 + j * 50, 10 + i * 50);
ctx.fillRect(0, 0, 25, 25);
ctx.restore();
}
}
</script>
</body>
</html>