Fabric.js : Objects dissapear from canvas on canvas.renderAll() in 6.0.2

[predragslavkovic]

Hey everyone,

I'm using fabric.js version 6.0.2.

I am trying to implement undo / redo logic in my project. I am using Vanilla JS.
Here is how it looks like:

document.addEventListener('DOMContentLoaded', function () {

var canvas = new fabric.Canvas('lava-design-canvas', {
        backgroundColor: 'white'
    });
    window.lavaDesignCanvas = canvas;
    
    // State management
    let states = [];
    let statePointer = -1;
    const maxStates = 5;
    const undoButton = document.getElementById('undo-button');
    const redoButton = document.getElementById('redo-button');
    
    // Save the canvas state
    function saveCanvasState() {
        const jsonState = JSON.stringify(canvas);

        if (statePointer < states.length - 1) {
            states = states.slice(0, statePointer + 1);
        }

        states.push(jsonState);
        if (states.length > maxStates) {
            states.shift();
        }

        statePointer = states.length - 1;
        updateUndoRedoButtons();
        console.log(states);
    }

// Undo canvas state
    function undoCanvasState() {
        if (statePointer > 0) {
            statePointer--;
            canvas.loadFromJSON(states[statePointer], function() {
                canvas.renderAll();
                updateUndoRedoButtons();
            });
        }
    }

    // Redo canvas state
    function redoCanvasState() {
        if (statePointer < states.length - 1) {
            statePointer++;
            canvas.loadFromJSON(states[statePointer], function() {
                canvas.renderAll();
                updateUndoRedoButtons();
            });
        }
    }

    // Update the button states
    function updateUndoRedoButtons() {
        undoButton.disabled = (statePointer <= 0);
        redoButton.disabled = (statePointer >= states.length - 1);
    }

// Event listeners for undo and redo
    undoButton.addEventListener('click', undoCanvasState);
    redoButton.addEventListener('click', redoCanvasState);
    
    canvas.on('object:modified', function(event) {
        saveCanvasState();
        console.log('Canvas is modified', event);
        console.log(states);
    });
}

The issue is when I click "Undo" all the content from canvas disappears until I click back on canvas. I'll provide video below:

Screencast.from.26.09.2024.16.43.11.webm

Sorry, I tried to display the cursor on screen recording, but it did'nt work.

First I moved the object -> then I clicked undo and that resulted in disappearance of all object -> then I clicked on canvas and everything appears again.

All advice and critiques are welcome since I'm not very proficient with Vanilla JS 🙏