starting rewrite with two-canvas editor

1 files changed, 96 insertions, 0 deletions

diff --git a/public/js/draw2.js b/public/js/draw2.js
new file mode 100644
index 0000000..7d7ff34
--- /dev/null
+++ b/public/js/draw2.js
@@ -0,0 +1,96 @@
+$(function(){
+	if ($("#workspace").length == 0) return;
+	var drawing = false;
+	var color = colors.black;
+  var brush = new Brush({ style: 'pencil', color: color, width: 10 });
+	var workspace = cw("#workspace");
+	var lastpoint;
+	
+	clearWorkspace();
+	
+	var offset;
+
+	$(workspace).mousedown(function(e){
+		drawing = true;
+	});
+	$(window).mousemove(function(e){
+		if (drawing) {
+			newpoint = new Point(e, offset);
+			if (lastpoint) {
+				draw(lastpoint, newpoint);
+			}
+			lastpoint = newpoint;
+		}
+	});
+	$(window).mouseup(function(){
+		if (drawing) {
+			drawing = false;
+			lastpoint = null;
+		}
+		$("#chat-message").focus();
+	});
+	$(window).on("drawing:start", function(){
+		offset = $(workspace).offset();
+	});
+	function clearWorkspace(){
+		workspaceCtx.fillStyle = "#fff";
+		workspaceCtx.fillRect(0,0,workspace.width,workspace.height);
+	}
+	$("#save-drawing").click(function(){
+		var uri = workspace.toDataURL("image/png").replace("data:image/png;base64,","");
+		console.log(uri.length);
+		console.log(atob(uri).length);
+
+		var params = {
+			image: uri,
+			nick: Game.nick
+		};
+		$.post("/upload", params, function(){
+			console.log("saved");
+		});
+		clearWorkspace();
+		$("#drawing").hide();
+	});
+	
+	function draw(start, end){
+		var halfBrushW = brush.width/2;
+		var halfBrushH = brush.height/2;
+		var distance = parseInt( Trig.distanceBetween2Points( start, end ) );
+		var angle = Trig.angleBetween2Points( start, end );
+		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));
+		}
+	}
+	
+});
+
+function Brush (b) {
+  this.opt = b;
+  b.height = b.height || b.width;
+  var canvas = this.canvas = document.createElement("canvas");
+  var ctx = this.ctx = canvas.getContext('2d');
+  this.width = canvas.width = b.width;
+  this.height = canvas.height = b.height;
+  this.color = b.color;
+  canvas.className = "brush";
+	
+	var hw = canvas.width / 2, hh = canvas.height / 2;
+	var id = ctx.getImageData( 0, 0, canvas.width, canvas.height );
+	var data = id.data;
+	for (var i = 0; i < canvas.width; i++) {
+		for (var j = 0; j < canvas.height; j++) {
+			var mag = Trig.magnitude({ x: i - hw, y: j - hh });
+			var offset = (j * canvas.width + i) * 4;
+			if (offset > data.length) continue;
+			data[ offset ]     = b.color.r;
+			data[ offset + 1 ] = b.color.g;
+			data[ offset + 2 ] = b.color.b;
+			data[ offset + 3 ] = mag < hw ? 255 : 0;
+		}
+	}
+	ctx.putImageData(id, 0, 0);
+	$("#drawing").append(canvas);
+}
+