drawing stuff

1 files changed, 76 insertions, 42 deletions

diff --git a/public/js/draw.js b/public/js/draw.js
index 5cc4163..1e11cbc 100644
--- a/public/js/draw.js
+++ b/public/js/draw.js
@@ -1,44 +1,78 @@
-var drawing = false;
-var workspace = document.getElementById("workspace");
-workspace.width = window.innerWidth * 0.9;
-workspace.height = window.innerHeight;
-workspace.id = "workspace";
-var workspaceCtx = workspace.getContext('2d');
-var lastpoint;
+$(function(){
+	var drawing = false;
+	var color = colors.black;
+  var brush = new Brush({ style: 'pencil', color: color, width: 10 });
+	var workspace = document.getElementById("workspace");
+	var workspaceCtx = workspace.getContext('2d');
+	var lastpoint;
+	
+	workspaceCtx.fillStyle = "#fff";
+	workspaceCtx.fillRect(0,0,workspace.width,workspace.height);
+	
+	var offset = $(workspace).offset();
+	
+	workspace.onmousedown = function(e){
+		drawing = true;
+	}
+	document.onmousemove = function(e){
+		if (drawing) {
+			newpoint = new Point(e, offset);
+			if (lastpoint) {
+				draw(lastpoint, newpoint);
+			}
+			lastpoint = newpoint;
+		}
+	}
+	window.onmouseup = function(){
+		if (drawing) {
+			drawing = false;
+			lastpoint = null;
+		}
+	}
+	function draw(start, end){
+		var halfBrushW = brush.width/2;
+		var halfBrushH = brush.height/2;
+	 console.log(start.x, end.x);
+		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, x, y);
+		}
+	}
+	
+	function Point(e, offset) {
+		this.x = e.pageX - offset.left;
+		this.y = e.pageY - offset.top;
+	}
+	
+});
 
-workspace.onmousedown = function(e){
-  drawing = true;
-}
-document.onmousemove = function(e){
-  if (drawing) {
-    newpoint = new Point(e);
-    if (lastpoint) {
-      draw(lastpoint, newpoint);
-    }
-    lastpoint = newpoint;
-  }
-}
-window.onmouseup = function(){
-  if (drawing) {
-    drawing = false;
-    lastpoint = null;
-  }
-}
-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, x, y);
-  }
-}
-
-function Point(e) {
-  this.x = e.pageX - workspace.offsetLeft;
-  this.y = e.pageY - workspace.offsetTop;
+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);
 }