diff --git a/assets/index.html b/assets/index.html
index 25d2d2f..e2f6433 100644
--- a/assets/index.html
+++ b/assets/index.html
@@ -17,6 +17,7 @@
     var ctx = c.getContext('2d');
     var W, H;
     var TILE = 32;
+    var GAP = 2;
     var HEIGHT_UNIT = 6;
 
     function resize() {
@@ -70,6 +71,48 @@
         }
     }
 
+    function drawTile(wx, wy, h, water, hLeft, hFront) {
+        var top1 = project(wx + GAP/2, wy + TILE - GAP/2, h * HEIGHT_UNIT);
+        var top2 = project(wx + TILE - GAP/2, wy + TILE - GAP/2, h * HEIGHT_UNIT);
+        var top3 = project(wx + TILE - GAP/2, wy + GAP/2, h * HEIGHT_UNIT);
+        var top4 = project(wx + GAP/2, wy + GAP/2, h * HEIGHT_UNIT);
+
+        var topColor = water ? '#2299dd' : '#33aa33';
+        var leftColor = water ? '#1166aa' : '#226622';
+        var rightColor = water ? '#0d4477' : '#114411';
+
+        ctx.fillStyle = topColor;
+        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();
+
+        if (hLeft < h) {
+            ctx.fillStyle = leftColor;
+            ctx.beginPath();
+            ctx.moveTo(top4[0], top4[1]);
+            ctx.lineTo(top1[0], top1[1]);
+            ctx.lineTo(top1[0], top1[1] + (h - hLeft) * HEIGHT_UNIT);
+            ctx.lineTo(top4[0], top4[1] + (h - hLeft) * HEIGHT_UNIT);
+            ctx.closePath();
+            ctx.fill();
+        }
+
+        if (hFront < h) {
+            ctx.fillStyle = rightColor;
+            ctx.beginPath();
+            ctx.moveTo(top3[0], top3[1]);
+            ctx.lineTo(top4[0], top4[1]);
+            ctx.lineTo(top4[0], top4[1] + (h - hFront) * HEIGHT_UNIT);
+            ctx.lineTo(top3[0], top3[1] + (h - hFront) * HEIGHT_UNIT);
+            ctx.closePath();
+            ctx.fill();
+        }
+    }
+
     function drawTiles() {
         tiles.sort(function(a, b) {
             return ((a.x + a.y) - (b.x + b.y));
@@ -88,49 +131,9 @@
             var water = isWater(h);
 
             var hLeft = heightMap[(wx - TILE) + ',' + wy] || 0;
-            var hRight = heightMap[(wx + TILE) + ',' + wy] || 0;
             var hFront = heightMap[wx + ',' + (wy - TILE)] || 0;
-            var hBack = heightMap[wx + ',' + (wy + TILE)] || 0;
 
-            var topColor = water ? '#2299dd' : '#33aa33';
-            var leftColor = water ? '#1166aa' : '#226622';
-            var rightColor = water ? '#0d4477' : '#114411';
-
-            var top1 = project(wx, wy + TILE, h * HEIGHT_UNIT);
-            var top2 = project(wx + TILE, wy + TILE, h * HEIGHT_UNIT);
-            var top3 = project(wx + TILE, wy, h * HEIGHT_UNIT);
-            var top4 = project(wx, wy, h * HEIGHT_UNIT);
-
-            ctx.fillStyle = topColor;
-            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();
-
-            if (hLeft < h) {
-                ctx.fillStyle = leftColor;
-                ctx.beginPath();
-                ctx.moveTo(top4[0], top4[1]);
-                ctx.lineTo(top1[0], top1[1]);
-                ctx.lineTo(top1[0], top1[1] + (h - hLeft) * HEIGHT_UNIT);
-                ctx.lineTo(top4[0], top4[1] + (h - hLeft) * HEIGHT_UNIT);
-                ctx.closePath();
-                ctx.fill();
-            }
-
-            if (hBack < h) {
-                ctx.fillStyle = rightColor;
-                ctx.beginPath();
-                ctx.moveTo(top3[0], top3[1]);
-                ctx.lineTo(top4[0], top4[1]);
-                ctx.lineTo(top4[0], top4[1] + (h - hBack) * HEIGHT_UNIT);
-                ctx.lineTo(top3[0], top3[1] + (h - hBack) * HEIGHT_UNIT);
-                ctx.closePath();
-                ctx.fill();
-            }
+            drawTile(wx, wy, h, water, hLeft, hFront);
         }
     }