Render shadows in sorted order after all tiles

assets/index.html

@@ -164,6 +164,8 @@
             heightMap[t.x + ',' + t.y] = t.h;
         }
 
+        var shadows = [];
+
         for (var i = 0; i < tiles.length; i++) {
             var t = tiles[i];
             var wx = t.x, wy = t.y, h = t.h;
@@ -202,14 +204,16 @@
                     var topA = project(wx + GAP/2 + (TILE - GAP) * tt, wy + TILE - GAP/2, h * HEIGHT_UNIT);
                     var topB = project(wx + TILE - GAP/2 - (TILE - GAP) * tt, wy + TILE - GAP/2, h * HEIGHT_UNIT);
 
-                    ctx.fillStyle = 'rgba(0, 0, 0, 0.4)';
+                    shadows.push({
-                    ctx.beginPath();
+                        x: wx, y: wy,
-                    ctx.moveTo(top1[0], top1[1]);
+                        points: [
-                    ctx.lineTo(topA[0], topA[1]);
+                            { x: top1[0], y: top1[1] },
-                    ctx.lineTo(topB[0], topB[1]);
+                            { x: topA[0], y: topA[1] },
-                    ctx.lineTo(top2[0], top2[1]);
+                            { x: topB[0], y: topB[1] },
-                    ctx.closePath();
+                            { x: top2[0], y: top2[1] }
-                    ctx.fill();
+                        ],
+                        depth: (wx + wy) - 1
+                    });
                 }
 
                 if (shadowLeft > 0) {
@@ -220,18 +224,34 @@
                     var topA = project(wx + GAP/2, wy + GAP/2 + (TILE - GAP) * tt, h * HEIGHT_UNIT);
                     var topB = project(wx + GAP/2, wy + TILE - GAP/2 - (TILE - GAP) * tt, h * HEIGHT_UNIT);
 
+                    shadows.push({
+                        x: wx, y: wy,
+                        points: [
+                            { x: top4[0], y: top4[1] },
+                            { x: topA[0], y: topA[1] },
+                            { x: topB[0], y: topB[1] },
+                            { x: top1[0], y: top1[1] }
+                        ],
+                        depth: (wx + wy) - 1
+                    });
+                }
+            }
+        }
+
+        shadows.sort(function(a, b) { return a.depth - b.depth; });
+
+        for (var i = 0; i < shadows.length; i++) {
+            var s = shadows[i];
             ctx.fillStyle = 'rgba(0, 0, 0, 0.4)';
             ctx.beginPath();
-                    ctx.moveTo(top4[0], top4[1]);
+            ctx.moveTo(s.points[0].x, s.points[0].y);
-                    ctx.lineTo(topA[0], topA[1]);
+            ctx.lineTo(s.points[1].x, s.points[1].y);
-                    ctx.lineTo(topB[0], topB[1]);
+            ctx.lineTo(s.points[2].x, s.points[2].y);
-                    ctx.lineTo(top1[0], top1[1]);
+            ctx.lineTo(s.points[3].x, s.points[3].y);
             ctx.closePath();
             ctx.fill();
         }
     }
-        }
-    }
 
     function applyLighting(color, factor) {
         var r = parseInt(color.substr(1, 2), 16);