Mi lógica es simple, cree una matriz de estado y un índice de estado, cuando el usuario interactúe con el dibujo, guarde el estado actual como una entrada en la matriz e incremente el índice de estado.

Cuando el usuario presiona "deshacer" (para este boceto, presione cualquier tecla), disminuya el índice de estado y dibuje en la página cualquier valor que esté en estado para ese índice.

Lo implementé en este boceto https://editor.p5js.org/mr_anonymous/sketches/s0C1M7x1w pero, como puede ver, en lugar de almacenar el último estado del dibujo, parece que solo almacena el estado en blanco.

¿Alguien sabe qué está pasando mal?

Editar: código fuente agregado

 let previousState; let stateIndex = 0; let state = []; function setup() { createCanvas(400, 400); background(255); // save state at beginning for blank canvas saveState(); } function draw() { if (mouseIsPressed) { fill(0, 0, 0); circle(mouseX, mouseY, 20); } } function keyPressed(e) { undoToPreviousState(); } function undoToPreviousState() { if (!state || !state.length || stateIndex === 0) { return; } stateIndex --; background(255); set(state[stateIndex], 0, 0); } function mousePressed() { saveState(); } function saveState() { stateIndex ++; loadPixels(); state.push({...get()}) }