function clearFromLocalStorage() { localStorage.removeItem(LOCAL_STORAGE_CANVAS_NAME); localStorage.removeItem(LOCAL_STORAGE_DIMENSIONS_NAME); } // }}} // history {{{ function saveState(undoStack, redoStack, maxHistory) { if (undoStack.length >= maxHistory) { undoStack.shift(); } undoStack.push({ imageData: canvas.toDataURL(), width: canvas.width, height: canvas.height }); redoStack = []; } function undo(canvas, ctx, undoStack, redoStack) { if (undoStack.length > 0) { const currentState = { imageData: canvas.toDataURL(), width: canvas.width, height: canvas.height }; redoStack.push(currentState); // Save current state to the redo stack const lastState = undoStack.pop(); // Get the last state from the undo stack canvas.width = lastState.width; canvas.height = lastState.height; canvas.style.width = canvas.width * zoom + 'px'; canvas.style.height = canvas.height * zoom + 'px'; canvasWidth = canvas.width; canvasHeight = canvas.height; const img = new Image(); img.src = lastState.imageData; img.onload = function() { ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.drawImage(img, 0, 0); }; } } function redo() { if (redoStack.length > 0) { const currentState = { imageData: canvas.toDataURL(), width: canvas.width, height: canvas.height }; undoStack.push(currentState); // Save current state to the undo stack const nextState = redoStack.pop(); // Get the last state from the redo stack canvas.width = nextState.width; canvas.height = nextState.height; canvas.style.width = canvas.width * zoom + 'px'; canvas.style.height = canvas.height * zoom + 'px'; canvasWidth = canvas.width; canvasHeight = canvas.height; const img = new Image(); img.src = nextState.imageData; img.onload = function() { ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.drawImage(img, 0, 0); }; } } // }}}