     @currentShape = undefined
     @repaint()
 
+  pan: (x, y) ->
+    # Subtract because we are moving the viewport
+    @position.x = @position.x - x
+    @position.y = @position.y - y
+
   repaint: ->
     @ctx.clearRect(0, 0, @canvas.width, @canvas.height)
+    @ctx.save()
+    @ctx.translate @position.x, @position.y
     _.each @shapes, (s) =>
       s.draw(@ctx)
     if @isDrawing then @currentShape.draw(@ctx)
- 
+    @ctx.restore()
+
 
 class LC.LinePathShape
   constructor: (@lcState) ->


  continueDraw: (x, y) ->
    return unless @isDrawing
    @currentShape.addPoint(x, y)
    @repaint()

  endDraw: (x, y) ->
    return unless @isDrawing
    @isDrawing = false
    @currentShape.addPoint(x, y)
    @saveShape()

    $(@canvas).css('background-color', '#eee')
    @shapes = []
    @isDrawing = false
    @position = {x: 0, y: 0}
    @repaint()

  beginDraw: (x, y) ->
    if @isDrawing
      @saveShape()
    
    x = x - @position.x
    y = y - @position.y
    @isDrawing = true
    @currentShape = new LC.LinePathShape(@state)
    @currentShape.addPoint(x, y)
