JSFiddle - React, Tailwind, and code Playground

HTML

<p>FabricJS 6: Native FabricJS properties like <code>lockMovementX</code>, <code>selectable</code> set via <code>object.set()</code> do not serialize.</p>

<canvas id="c" width="400" height="200"></canvas>

<div>
    <button onclick="lockRect()">Lock Rectangle</button>
    <button onclick="checkSerialization()">Check Serialization</button>
</div>

<h3>Results:</h3>
<pre id="output"></pre>

<script src="https://cdn.jsdelivr.net/npm/fabric@6/dist/index.min.js"></script>

CSS

body { font-family: sans-serif; padding: 20px; }
canvas { border: 1px solid #ccc; }
pre { background: #f5f5f5; padding: 15px; overflow: auto; max-height: 300px; }
.pass { color: green; }
.fail { color: red; }
button { margin: 10px 5px 10px 0; padding: 8px 16px; }

JavaScript

const canvas = new fabric.Canvas('c');

const rect = new fabric.Rect({
    left: 100,
    top: 50,
    width: 100,
    height: 100,
    fill: 'blue',
});

canvas.add(rect);

function lockRect() {
    // Using native FabricJS properties via their own API
    rect.set({
        lockMovementX: true,
        lockMovementY: true,
        selectable: false,
    });
    canvas.renderAll();
    log('Locked rectangle using rect.set({ lockMovementX: true, ... })');
    log('rect.lockMovementX = ' + rect.lockMovementX); // true
    log('rect.selectable = ' + rect.selectable); // false
}

function checkSerialization() {
    const json = canvas.toJSON();
    const serializedRect = json.objects[0];

    log('\n--- Serialization Check ---');
    log('rect.lockMovementX (on object): ' + rect.lockMovementX);
    log('serialized.lockMovementX (in JSON): ' + serializedRect.lockMovementX);

    const passed = serializedRect.lockMovementX === true;
    log('\nTest: ' + (passed ? 'PASS' : 'FAIL - lockMovementX not in JSON!'), passed);

    log('\nFull serialized object:');
    log(JSON.stringify(serializedRect, null, 2));
}

function log(msg, passed = null) {
    const output = document.getElementById('output');
    if (passed === true) {
        output.innerHTML += '<span class="pass">' + msg + '</span>\n';
    } else if (passed === false) {
        output.innerHTML += '<span class="fail">' + msg + '</span>\n';
    } else {
        output.innerHTML += msg + '\n';
    }
}