     context.rotate -1 * contextRotationAngle
     context.translate (canvas.width/-2), (canvas.height/-2)
 
+  resizeCanvas()
+
   $(window).on "deviceorientation", (e) ->
     x = e.originalEvent.beta
     y = e.originalEvent.gamma
     z = e.originalEvent.alpha
 
-    x1 = (y/30) * canvas.width
-    x2 = x1 * -1
+    # Calculate the angle from flat, which we can use later to draw different
+    # compass representations which depend on the device angle.
+    angleFromFlat = Math.round(Math.sqrt Math.pow(y,2) + Math.pow(x,2))
+    drawCircles x, y, z, angleFromFlat
 
-    y1 = (x/70) * canvas.height
-    y2 = y1 * -1
-
-    # Calculate the angle from square
-    angle = Math.round(Math.sqrt Math.pow(y,2) + Math.pow(x,2))
-
-    # If we are within 1 degree, snap to zero
-    if angle==0
-      x1 = x2 = y1 = y2 = 0
-
-    drawCanvas(x1,y1,x2,y2, angle)
 
   $(window).on "resize", resizeCanvas

    context.textAlign = "center"
    context.textBaseline = "middle"

  resizeCanvas()

  drawCanvas = (x1,y1,x2,y2,angle) ->

    # Get local copies of canvas config params
    centerX = window.app.centerX

    # Text
    context.fillStyle = 'white'
    contextRotationAngle = Math.atan(y1 / x1) + (Math.PI / (if x1<0 then 2 else -2))
    context.translate (canvas.width/2), (canvas.height/2)
    context.rotate contextRotationAngle
    context.translate (canvas.width/-2), (canvas.height/-2)
