1 files changed, 16 insertions, 4 deletions

diff --git a/public/js/draw2.js b/public/js/draw2.js
index 7d7ff34..6eef8f4 100644
--- a/public/js/draw2.js
+++ b/public/js/draw2.js
@@ -4,6 +4,7 @@ $(function(){
 	var color = colors.black;
   var brush = new Brush({ style: 'pencil', color: color, width: 10 });
 	var workspace = cw("#workspace");
+	var surface = cw("#surface");
 	var lastpoint;
 	
 	clearWorkspace();
@@ -12,6 +13,8 @@ $(function(){
 
 	$(workspace).mousedown(function(e){
 		drawing = true;
+		lastpoint = new Point(e, offset);
+		draw(lastpoint, lastpoint);
 	});
 	$(window).mousemove(function(e){
 		if (drawing) {
@@ -27,14 +30,14 @@ $(function(){
 			drawing = false;
 			lastpoint = null;
 		}
+		finishDrawing();
 		$("#chat-message").focus();
 	});
 	$(window).on("drawing:start", function(){
 		offset = $(workspace).offset();
 	});
 	function clearWorkspace(){
-		workspaceCtx.fillStyle = "#fff";
-		workspaceCtx.fillRect(0,0,workspace.width,workspace.height);
+		workspace.clear("#ffffff");
 	}
 	$("#save-drawing").click(function(){
 		var uri = workspace.toDataURL("image/png").replace("data:image/png;base64,","");
@@ -52,6 +55,11 @@ $(function(){
 		$("#drawing").hide();
 	});
 	
+	// 0) When the pattern is set, paint it to a virtual canvas
+	//    and key out white, producing a mask.
+	// 1) Paint a (colored) line on the virtual workspace with this draw func vvvv
+	// 2) Multiply the pattern mask against the workspace
+	// 3) Display the result
 	function draw(start, end){
 		var halfBrushW = brush.width/2;
 		var halfBrushH = brush.height/2;
@@ -60,10 +68,14 @@ $(function(){
 		for ( var z=0; (z<=distance || z==0); z += 2 ) {
 			var x = start.x + (Math.sin(angle) * z) - halfBrushW;
 			var y = start.y + (Math.cos(angle) * z) - halfBrushH;
-			workspaceCtx.drawImage(brush.canvas, Math.floor(x), Math.floor(y));
+			workspace.drawImage(brush.canvas, Math.floor(x), Math.floor(y));
 		}
 	}
-	
+	// 4) When you finish drawing a stroke, merge the workspace with the
+	//    painting surface and clear the workspace so we're ready for another
+	//    stroke
+	function finishDrawing(){
+	}
 });
 
 function Brush (b) {