HTML Canvas updates stroke color for everything that's already been drawn

Question

I have an interface with a color picker that allows the user to change the stroke color, but What's happening is, I start to draw - it draws black. I change the stroke to red, I draw - and everything that was black is now red. I have not the slightest clue as to why.

Here's the code I think is relevant. It's all within a coffeescript class

canvasMouseDown: (event) ->
  @offset = $(@canvas).offset()
  _x = @offset.left
  _y = @offset.top
  @ctx.moveTo event.pageX - _x, event.pageY - _y

  # does nothing more than save the current canvas via getImageData() to allow an undo
  @saveUndoState()

  @ctx.strokeStyle = @attr.stroke

  @canvas.bind "mousemove.canvasDraw", (e) =>
    x = e.pageX - _x
    y = e.pageY - _y

    @ctx.lineTo x, y
    @ctx.stroke()

initCanvas: ->
  @ctx = @canvas[0].getContext '2d'

  $(@canvas).bind "mousedown.canvasDraw", (e) =>
    @canvasMouseDown e
  $(@canvas).bind "mouseup.canvasDraw", (e) =>
    @canvasMouseUp e

Answer 1

Blah. Forgot to include ctx.beginPath on the mousedown, and ctx.closePath at the mouseup