Add ctx.copy() helper

src/Selection.js

@@ -102,6 +102,7 @@ Selection.prototype.cut_out_background = function(){
 	var sel = this;
 	var cutout = sel.canvas;
 	if(transparency){
+		// @FIXME: this doesn't work so well with transparency between 0 and 1
 		ctx.save();
 		ctx.globalCompositeOperation = "destination-out";
 		ctx.drawImage(cutout, sel._x, sel._y);
@@ -129,12 +130,11 @@ Selection.prototype.position = function(){
 
 Selection.prototype.resize = function(){
 	var sel = this;
-	var width = sel._w;
-	var height = sel._h;
+	var new_width = sel._w;
+	var new_height = sel._h;
 	
-	var new_canvas = new Canvas(width, height);
-	
-	new_canvas.ctx.drawImage(sel.canvas, 0, 0, width, height);
+	var new_canvas = new Canvas(new_width, new_height);
+	new_canvas.ctx.drawImage(sel.canvas, 0, 0, new_width, new_height);
 	
 	sel.replace_canvas(new_canvas);
 };
@@ -156,7 +156,7 @@ Selection.prototype.replace_canvas = function(new_canvas){
 	
 	$(sel.canvas).replaceWith(new_canvas);
 	sel.canvas = new_canvas;
-
+	
 	$(sel.canvas).on("mousedown", sel.canvas_mousedown);
 	sel.$ghost.triggerHandler("new-element", [sel.canvas]);
 	sel.$ghost.triggerHandler("resize");//?
@@ -188,9 +188,7 @@ Selection.prototype.crop = function(){
 	sel.instantiate(null, "passive");
 	if(sel.canvas){
 		undoable(0, function(){
-			canvas.width = sel.canvas.width;
-			canvas.height = sel.canvas.height;
-			ctx.drawImage(sel.canvas, 0, 0);
+			ctx.copy(sel.canvas);
 			$canvas.trigger("update"); //update handles
 		});
 	}

src/functions.js

@@ -57,15 +57,9 @@ function open_from_Image(img, callback){
 		reset_canvas(); // (with newly reset colors)
 		reset_magnification();
 		
-		// @TODO: use copy helper
-		canvas.width = img.naturalWidth;
-		canvas.height = img.naturalHeight;
-		ctx.clearRect(0, 0, canvas.width, canvas.height);
-		ctx.drawImage(img, 0, 0);
-		
-		$canvas_area.trigger("resize");
-		
+		ctx.copy(img);
 		detect_transparency();
+		$canvas_area.trigger("resize");
 		
 		callback && callback();
 	});
@@ -406,10 +400,7 @@ function undo(){
 	
 	redos.push(new Canvas(canvas));
 	
-	var c = undos.pop();
-	canvas.width = c.width;
-	canvas.height = c.height;
-	ctx.drawImage(c, 0, 0);
+	ctx.copy(undos.pop());
 	
 	$canvas_area.trigger("resize");
 	
@@ -421,10 +412,7 @@ function redo(){
 	
 	undos.push(new Canvas(canvas));
 	
-	var c = redos.pop();
-	canvas.width = c.width;
-	canvas.height = c.height;
-	ctx.drawImage(c, 0, 0);
+	ctx.copy(redos.pop());
 	
 	$canvas_area.trigger("resize");
 	

src/helpers.js

@@ -26,7 +26,7 @@ var $G = $(window);
 function Cursor(cursor_def){
 	return "url(images/cursors/" + cursor_def[0] + ".png) " +
 		cursor_def[1].join(" ") +
-		", " + cursor_def[2]
+		", " + cursor_def[2];
 }
 
 function E(t){
@@ -52,24 +52,31 @@ function get_rgba_from_color(color){
 }
 
 function Canvas(width, height){
+	var image = width;
+	
 	var new_canvas = E("canvas");
 	var new_ctx = new_canvas.getContext("2d");
+	
 	new_ctx.imageSmoothingEnabled = false;
 	new_ctx.mozImageSmoothingEnabled = false;
 	new_ctx.webkitImageSmoothingEnabled = false;
+	
+	new_canvas.ctx = new_ctx;
+	
+	new_ctx.copy = function(image){
+		new_canvas.width = image.naturalWidth || image.width;
+		new_canvas.height = image.naturalHeight || image.height;
+		new_ctx.drawImage(image, 0, 0);
+	};
+	
 	if(width && height){
 		// new Canvas(width, height)
 		new_canvas.width = width;
 		new_canvas.height = height;
-	}else{
+	}else if(image){
 		// new Canvas(image)
-		var copy_of = width;
-		if(copy_of){
-			new_canvas.width = copy_of.width;
-			new_canvas.height = copy_of.height;
-			new_ctx.drawImage(copy_of, 0, 0);
-		}
+		new_ctx.copy(image);
 	}
-	new_canvas.ctx = new_ctx;
+	
 	return new_canvas;
 }

src/image-manipulation.js

@@ -273,10 +273,7 @@ function apply_image_transformation(fn){
 		undoable(0, function(){
 			this_ones_a_frame_changer();
 			
-			canvas.width = new_canvas.width;
-			canvas.height = new_canvas.height;
-			
-			ctx.drawImage(new_canvas, 0, 0);
+			ctx.copy(new_canvas);
 			
 			$canvas.trigger("update"); // update handles
 		});

src/multiplayer.js

@@ -204,17 +204,13 @@
 				// Write the image data to the canvas
 				var img = new Image();
 				img.onload = function(){
-					canvas.width = img.naturalWidth;
-					canvas.height = img.naturalHeight;
-					
-					ctx.clearRect(0, 0, canvas.width, canvas.height);
-					ctx.drawImage(img, 0, 0);
-					
+					ctx.copy(img);
+					// detect_transparency() here would probably just be annoying (and slow things a bit)
 					$canvas_area.trigger("resize");
+					
+					// @TODO: playback recorded in-progress mouse operations here
 				};
 				img.src = uri;
-				
-				// @TODO: playback recorded in-progress mouse operations here
 			}
 		});
 		

src/tools.js

@@ -89,8 +89,7 @@ tools = [{
 	},
 	mouseup: function(){
 		// Revert the inverty brush paint
-		ctx.clearRect(0, 0, canvas.width, canvas.height);
-		ctx.drawImage(undos[undos.length-1], 0, 0);
+		ctx.copy(undos[undos.length-1]);
 		
 		// Cut out the polygon
 		var cutout = cut_polygon(
@@ -170,7 +169,8 @@ tools = [{
 }, {
 	name: "Eraser/Color Eraser",
 	description: "Erases a portion of the picture, using the selected eraser shape.",
-	cursor: ["precise", [16, 16], "crosshair"], //@todo: draw square on canvas
+	cursor: ["precise", [16, 16], "crosshair"],
+	// @TODO: draw square on canvas as cursor
 	continuous: "space",
 	paint: function(ctx, x, y){
 		
@@ -569,11 +569,10 @@ tools = [{
 	paint: function(ctx, x, y){
 		if(this.points.length < 1){ return; }
 		
-		// Clear the canvas to the previous image
-		// Get rid of strokes drawn while constructing the shape
+		// Clear the canvas to the previous image to get
+		// rid of lines drawn while constructing the shape
 		// @TODO: stop needing this
-		ctx.clearRect(0, 0, canvas.width, canvas.height);
-		ctx.drawImage(this.canvas_base, 0, 0);
+		ctx.copy(this.canvas_base);
 		
 		var i = this.points.length - 1;
 		this.points[i].x = x;
@@ -590,11 +589,10 @@ tools = [{
 	complete: function(ctx, x, y){
 		if(this.points.length < 1){ return; }
 		
-		// Clear the canvas to the previous image
-		// Get rid of strokes drawn while constructing the shape
+		// Clear the canvas to the previous image to get
+		// rid of lines drawn while constructing the shape
 		// @TODO: stop needing this
-		ctx.clearRect(0, 0, canvas.width, canvas.height);
-		ctx.drawImage(this.canvas_base, 0, 0);
+		ctx.copy(this.canvas_base);
 		
 		// Draw an antialiased polygon
 		ctx.beginPath();