Canvas Pen with Undo
HTML
<canvas id="canvas" width="300" height="300"></canvas>
<br>
<input id="undo" type="button" value="undo" />
<input id="redo" type="button" value="redo" />
CSS
#canvas {
cursor: crosshair;
border: 1px solid black;
}
JavaScript
var History = function(_canvas, _context, _maxStates) {
var canvas = _canvas;
var context = _context;
var maxStates = _maxStates;
var currentState = 0;
var stateStack = [];
return {
"initialize": function() {
currentState = 0;
stateStack = [];
stateStack.push(canvas.toDataURL("image/png"));
},
"save": function() {
if (currentState != stateStack.length - 1) {
stateStack.splice(currentState + 1, stateStack.length - currentState - 1);
}
stateStack.push(canvas.toDataURL("image/png"));
currentState++;
if (stateStack.length > maxStates) {
stateStack.shift();
currentState--;
}
},
"undo": function() {
if (currentState > 0) {
currentState--;
var tempImg = new Image();
tempImg.src = stateStack[currentState];
tempImg.onload = function() {
context.clearRect(0, 0, canvas.width, canvas.height);
context.drawImage(this, 0, 0);
}
}
},
"redo": function() {
if (currentState < stateStack.length - 1) {
currentState++;
var tempImg = new Image();
tempImg.src = stateStack[currentState];
tempImg.onload = function() {
context.clearRect(0, 0, canvas.width, canvas.height);
context.drawImage(this, 0, 0);
}
}
}
}
}
function main() {
var penDown = false;
var started = false;
var canvas = document.getElementById("canvas");
var undoButton = document.getElementById("undo");
var redoButton = document.getElementById("redo");
var context = canvas.getContext("2d");
var history = new History(canvas, context, 5);
history.initialize();
undoButton.addEventListener("click", function(e) {
history.undo();
});
redoButton.addEventListener("click", function(e) {
history.redo();
});
canvas.addEventListener("mousedown", function(e) {
penDown = true;
e.preventDefault();
return false;
}, true);
...