<!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>