HTML5 История рисования на холсте

Question

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

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

Любые предложения о том, как это может быть реализовано на практике и эффективно?

Answer 1

У меня может быть решение.....

var ctx = document.getElementById("canvasId").getContext("2d");
var DrawnSaves = new Array();
var Undo = new Array();
var FigureNumber = 0;
var deletingTimer;
function drawLine(startX, startY, destX, destY) {
    ctx.beginPath();
    ctx.moveTo(startX, startY);
    ctx.lineTo(destX, destY);
    ctx.stroke();
    var Para = new Array();
    Para["type"] = "line";
    Para["fromX"] = startX;
    Para["fromY"] = startY;
    Para["toX"] = destX;
    Para["toY"] = destY;
    DrawnSaves.push(Para);
    FigureNumber++;
}
function undo() {
    ctx.beginPath();
    ctx.clearRect(0, 0, 500, 500);
    Undo[FigureNumber] = DrawnSaves[FigureNumber];
    DrawnSaves[FigureNumber] = "deleted";
    FigureNumber--;
    drawEverything();
    startTimeoutOfDeleting();
}
function undoTheUndo() {
    FigureNumber++;
    DrawnSaves[FigureNumber] = Undo[FigureNumber];
    drawEverything();
    clearTimeout(deletingTimer);
}
function drawEverything() {
    for (i = 0; i < DrawnSaves.length; i++) {
       if (DrawnSaves[i].type == "line") {
          ctx.beginPath();
          ctx.moveTo(DrawnSaves[i].fromX, DrawnSaves[i].fromY);
          ctx.lineTo(DrawnSaves[i].toX, DrawnSaves[i].toY);
          ctx.stroke();
       }
    }
}
function startTimeoutOfDeleting() {
   setTimeout(function() {Undo[FigureNumber] = "deleted";}, 5000);
}

Это действительно просто, сначала я рисую линию при вызове функции и сохраняю все его параметры в массиве. Затем в функции отмены я просто запускаю таймер и удаляю нарисованную фигуру за 2000 миллисекунд, очищает весь холст и делает невозможным его перерисовку. в функции undoTheUndo он останавливает таймер для удаления фигуры и делает возможным ее перерисовку. В функции drawEverything рисует все в массиве в зависимости от его типа ("линия здесь"). Вот и все...:-) Вот пример работы: Это, после 2 секунд ОТМЕНА, затем через 1 сек UNDOTHEUNDO