холст-рисунок медленно в firefox

Question

Я работаю над плагином, который вы можете видеть в моей скрипке, проблема в том, когда мы рисуем firefox, это замедляется, но отлично работает в Google Chrome. любая помощь??

BTW с использованием двух холстов, один для области рисования, чтобы сохранить его как изображение позже. проверить скрипку

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

Наконец избавились от мое второе полотно, которое предназначалось для сохранения изображения, использовалось под кодом, чтобы получить прямоугольник области рисования, чтобы больше не загружать второй холст.

Теперь скорость лучше, чем раньше, в 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); 
}); 

отлично работает :)

Answer 2

Я думаю, что вы делаете много вычислений и рисования что-то, что можно было бы получить намного более простым способом.

Другими словами, это не Firefox, что медленно ... это просто, что Chrome прокладывает быстро :-D

Альтернативный подход был бы, например, имеющего частично прозрачное изображение отображается в браузере на вершине холст, а затем ваши операции рисования выполняются на холсте непосредственно без специальной маскировки.

Это может позволить видеть картину через маску без необходимости выполнять сложные манипуляции с отсечениями.

Эти операции могут выполняться в реальном масштабе времени на одном холсте только тогда, когда пользователь запрашивает экспорт изображения в виде png, если это то, что вам нужно предоставить.

Чтобы увидеть пример такого подхода в действии check this out

source code в лепет, но это не должно быть слишком трудно читать (полная программа всего 116 строк)