Canvas drawing slowly in Firefox

Question

I am working on a plugin that you can see in my violin, the problem is when we draw firefox, it slows down, but works fine in Google Chrome. any help?

BTW, using two canvases, one for the drawing area, to save it as an image later. check the violin

context.beginPath(); newcontext.beginPath(); // If dragging then draw a line between the two points if (clickDrag[i] && i) { context.moveTo(clickX[i - 1], clickY[i - 1]); newcontext.moveTo(clickX[i - 1], clickY[i - 1]); } else { // The x position is moved over one pixel so a circle even if not dragging context.moveTo(clickX[i] - 1, clickY[i]); newcontext.moveTo(clickX[i] - 1, clickY[i]); } context.lineTo(clickX[i], clickY[i]); newcontext.lineTo(clickX[i], clickY[i]); // Set the drawing color if (clickTool[i] === "eraser") { //context.globalCompositeOperation = "destination-out"; // To erase instead of draw over with white context.strokeStyle = 'white'; newcontext.strokeStyle = 'white'; } else { //context.globalCompositeOperation = "source-over"; // To erase instead of draw over with white context.strokeStyle = clickColor[i]; newcontext.strokeStyle = clickColor[i]; } context.lineCap = "round"; context.lineJoin = "round"; context.lineWidth = radius; context.stroke(); 

http://jsfiddle.net/aV6bg/

Answer 1

I finally got rid of my second canvas, which was to save the image used below the code, to get the rectangle of the drawing area, so as not to add a second canvas anymore.

The speed is now better than before in Firefox 22 (ubuntu).

 function savePhoto() { var canvas = document.getElementById("canvas"); var tempcanvas = document.createElement("canvas"); var tempctx = tempcanvas.getContext("2d"); tempcanvas.width = 820; tempcanvas.height = 675; tempctx.drawImage(canvas, 90, 131,790, 680,0, 0, 820, 680); var dataUrl = tempcanvas.toDataURL(); alert(dataUrl); } //Ajax Request to save image to folder For drawings page var request = $.ajax({ url: "<?php echo get_bloginfo('url').'/canvas?wcpdx=ajax-handler'; ?>", type: "POST", data: { 'rawimage': dataUrl } }); request.done(function(msg) { alert( 'success = '+msg ); }); request.fail(function(jqXHR, textStatus) { alert( "Request failed: " + textStatus ); }); 

works great :)

Answer 2

I think you do a lot of calculations and drawings for something that could have been much easier.

In other words, this is not Firefox, which is slow ... it is just that Chrome quickly flashes: -D

An alternative approach may be, for example, the presence of a partially transparent image displayed by the browser on top of the canvas, and then drawing operations are performed on the canvas directly without special masking.

What this can allow is to see a picture through a mask without performing complex clipping manipulations.

These operations can be performed in reality on one canvas only when the user asks to export the image as png, if that is what you need to provide.

To see an example of this approach in action, check this out.

the source code is in lisp, but it should not be read too hard (full program - only 116 lines)