       posY = y * SPACING + scrollY
       topX = posX + (MID[0] - posX) * Z_OFFSET
       topY = posY + (MID[1] - posY) * Z_OFFSET
+      
+      # grid
+      context.strokeStyle = GRID
+      for gx in [0...8]
+        for gy in [0...8]
+          gxc = posX + (gx * SIZE_HALF)
+          gyc = posY + (gy * SIZE_HALF)
+          context.beginPath()
+          context.moveTo(gxc + SIZE_HALF, gyc)
+          context.lineTo(gxc, gyc)
+          context.lineTo(gxc, gyc + SIZE_HALF)
+          context.stroke()
 
       # bottom
+      context.strokeStyle = FG
       context.strokeRect(posX - SIZE_HALF, posY - SIZE_HALF, SIZE, SIZE)
 
       # sides

canvas.width = WIDTH
canvas.height = HEIGHT


draw = () ->
  context.fillStyle = 'white'
  context.fillRect(0, 0, WIDTH, HEIGHT)
  context.fillStyle = 'rgba(255, 255, 255, 0.5)'
  
  for x in [-1...COUNT+2]
    for y in [-1...COUNT+2]

# http://jsbin.com/nuhozo/8/edit?js,output

WIDTH = 720
HEIGHT = 720
MID = [WIDTH/2, HEIGHT/2]
COUNT = 7
SPACING = WIDTH / (COUNT + 1)
SIZE = SPACING / 4
SIZE_HALF = SIZE / 2
Z_OFFSET = -1/8

BG = 'hsl(60, 10%, 95%)'
GRID = 'hsl(60, 10%, 70%)'
FG = 'hsl(60, 10%, 20%)'

scrollX = 0
scrollY = 0
