Похоже, ты просто не добиваешься нормального первого рендера. В Fabric такое бывает: объект загрузился, но холст не перерисовали, и линия проявляется только когда ты что-то трогаешь.
Что сработало у меня в похожей ситуации:
1. Дай линии явные left/top (а x1/y1/x2/y2 оставь относительными):
{
"type": "line",
"left": 100,
"top": 100,
"x1": 0, "y1": 0,
"x2": 200, "y2": 0,
"stroke": "black",
"strokeWidth": 2
}
2. Рендер после loadFromJSON — именно requestRenderAll() и обнови координаты:
const canvas = new fabric.Canvas('canvas', { renderOnAddRemove: false });
canvas.loadFromJSON(dieline, () => {
canvas.forEachObject(o => o.setCoords());
canvas.requestRenderAll();
});
3. Если суёшь JSON в data-*, убедись, что он не покоцан HTML-энтитями:
data-dieline='<?= json_encode($dieline, JSON_HEX_APOS|JSON_HEX_QUOT) ?>'
Лишние пустые группы в JSON убери (у тебя там {"type":"group","objects":[]}) — они не мешают, но и пользы ноль.
После этих правок линия должна быть видна сразу, без потыкать холст.