diff --git a/src/Selection.js b/src/Selection.js index d96b85c..eb1f06f 100644 --- a/src/Selection.js +++ b/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 }); } diff --git a/src/functions.js b/src/functions.js index ce1a35a..2af0625 100644 --- a/src/functions.js +++ b/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"); diff --git a/src/helpers.js b/src/helpers.js index 8f5f70b..e0d81cd 100644 --- a/src/helpers.js +++ b/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; } diff --git a/src/image-manipulation.js b/src/image-manipulation.js index f58d405..d8b690b 100644 --- a/src/image-manipulation.js +++ b/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 }); diff --git a/src/multiplayer.js b/src/multiplayer.js index 75e8fc2..6ed78cd 100644 --- a/src/multiplayer.js +++ b/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 } }); diff --git a/src/tools.js b/src/tools.js index 848fb61..11d907d 100644 --- a/src/tools.js +++ b/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();