My logic is simple, create a state array and a stateIndex, when the user interacts with the drawing, save the current state as an entry in the array and increment the stateIndex.

When the user presses "undo" (for this sketch press any key), decrement the stateIndex and draw to the page whatever value is in state for that index.

I've implemented it in this sketch https://editor.p5js.org/mr_anonymous/sketches/s0C1M7x1w but as you can see instead of storing the last state of the drawing it seems to only store the blank state.

Anyone know what's going wrong?

Edit: Added source code

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()})
}