Improved drawing to use quadratic curves and disabled canvas 'select'…

… feature, so that the cursor doesn't become the text pipe cursor.

public/javascripts/writeboard-page.coffee

@@ -18,37 +18,36 @@ writeboardPage = ->
     dom.eye.animate(opacity: 1).animate opacity: .3
 
   (loading 'Loading. Please wait...').show()
-  [dom.canvas[0].width, dom.canvas[0].height] = [window.innerWidth, window.innerHeight]
+  writeboard = createWriteboard dom.canvas[0], window.innerWidth, window.innerHeight
 
   dom.helpButton.click ->
     $.get '/about', { noLayout: true }, (aboutPage) ->
       about = $ "#{aboutPage}"
       about.hide()
       dom.body.append about
       about.fadeIn()
+  dom.canvas.bind 'selectstart', -> false
 
   enableCanvas = (drawings) ->
-    writeboard = createWriteboard dom.canvas[0].getContext '2d'
     replay writeboard, drawings
 
     now.startDrawing = (x, y) -> writeboard.startDrawing x, y
     now.draw = (x, y) -> writeboard.draw x, y
     now.stopDrawing = -> writeboard.stopDrawing()
 
+    context = dom.canvas[0].getContext '2d'
     drawing = false
-    dom.canvas.mouseup ->
-      drawing = false
-      now.sendStopDrawing()
+    lastY = 0
     dom.canvas.mousedown (event) ->
+      return if drawing
       drawing = true
-      x = event.clientX - @offsetLeft
-      y = event.clientY - @offsetTop
-      now.sendStartDrawing x, y
+      now.sendStartDrawing event.pageX, event.pageY
     dom.canvas.mousemove (event) ->
       return if not drawing
-      x = event.clientX - @offsetLeft
-      y = event.clientY - @offsetTop
-      now.sendDraw x, y
+      now.sendDraw event.pageX, event.pageY
+    dom.canvas.mouseup ->
+      drawing = false
+      now.sendStopDrawing()
 
     loading().hide()
 

public/javascripts/writeboard.coffee

@@ -1,19 +1,37 @@
-@createWriteboard = (context) ->
-  context.strokeStyle = 'rgb(20, 20, 20)'
+@createWriteboard = (canvas, width, height) ->
+  [canvas.width, canvas.height] = [width, height]
+  context = canvas.getContext '2d'
   context.lineJoin = 'round'
+  context.lineCap = 'round'
   context.lineWidth = 2
 
-  draw = (x, y) ->
-    context.lineTo x, y
-    context.stroke()
+  lastX = lastY = 0
+  lastCanvasData = undefined
+
+  setColor = (color) -> context.strokeStyle = color
+
   startDrawing = (x, y) ->
+    [lastX, lastY] = [x, y]
     context.beginPath()
-    context.moveTo x, y
-  stopDrawing = ->
-    context.closePath()
+    lastCanvasData = context.getImageData 0, 0, width, height
+    draw x+.1, y+.1
+
+  draw = (x, y) ->
+    context.clearRect 0, 0, width, height
+    context.putImageData lastCanvasData, 0, 0
+    context.quadraticCurveTo lastX, lastY,
+      lastX + (x - lastX) / 2,
+      lastY + (y - lastY) / 2
+    context.stroke()
+    [lastX, lastY] = [x, y]
+
+  stopDrawing = -> # ?
+
+  setColor 'rgba(20, 20, 20, 0.8)'
 
   # Writeboard API
-  draw        : draw,
-  startDrawing: startDrawing,
+  draw        : draw
+  startDrawing: startDrawing
   stopDrawing : stopDrawing
+  setColor    : setColor