Pixel-accurate shadow casting from upper-right

assets/index.html

@@ -184,15 +184,34 @@
                     hBack = level;
                 }
 
-                var inShadow = false;
-                var sunDirX = wx + TILE;
-                var sunDirY = wy - TILE;
-                var sunH = heightMap[sunDirX + ',' + sunDirY] || 0;
-                if (sunH >= level) {
-                    inShadow = true;
-                }
+                drawTile(wx, wy, level, true, hRight, hBack, false);
+            }
+        }
 
-                drawTile(wx, wy, level, true, hRight, hBack, inShadow);
+        for (var i = 0; i < tiles.length; i++) {
+            var t = tiles[i];
+            var wx = t.x, wy = t.y, h = t.h;
+
+            for (var level = 1; level <= h; level++) {
+                var sunX = wx + TILE;
+                var sunY = wy - TILE;
+                var sunH = heightMap[sunX + ',' + sunY] || 0;
+
+                if (sunH > level) {
+                    var top1 = project(wx + GAP/2, wy + TILE - GAP/2, level * HEIGHT_UNIT);
+                    var top2 = project(wx + TILE - GAP/2, wy + TILE - GAP/2, level * HEIGHT_UNIT);
+                    var top3 = project(wx + TILE - GAP/2, wy + GAP/2, level * HEIGHT_UNIT);
+                    var top4 = project(wx + GAP/2, wy + GAP/2, level * HEIGHT_UNIT);
+
+                    ctx.fillStyle = 'rgba(0, 0, 0, 0.5)';
+                    ctx.beginPath();
+                    ctx.moveTo(top1[0], top1[1]);
+                    ctx.lineTo(top2[0], top2[1]);
+                    ctx.lineTo(top3[0], top3[1]);
+                    ctx.lineTo(top4[0], top4[1]);
+                    ctx.closePath();
+                    ctx.fill();
+                }
             }
         }
     }