Fabric.js не производит красную квадрат ⇐ Javascript

[Anonymous]

Я разрабатываю веб -приложение с помощью Dancer2. Я хочу использовать Fabric.js, чтобы сделать интерактивный рисунок. Тем не менее, я не могу выполнить даже самый простой рисунок.








var canvas = new fabric.Canvas("canvas");
var rect = new fabric.Rect({
left: 100,
top: 100,
fill: 'red',
width: 20,
height: 20
});
canvas.add(rect);



< /code>
Однако, если я хочу поместить его в приложение Dancer2, используя шаблон < /p>




< /code>
и javascript < /p>
document.addEventListener("DOMContentLoaded", function () {
console.log("Fabric.js initialized:", window.fabric);
console.log("Canvas element:", document.getElementById("canvas"));
if (!window.fabric) {
console.error("Fabric.js not found!");
return;
}
const canvasElement = document.getElementById("canvas");
if (!canvasElement) {
console.error("Canvas element not found!");
return;
}
const canvas = new fabric.Canvas("canvas", {
width: 1000,
height: 1000
});
const redSquare = new fabric.Rect({
left: 475,
top: 475,
fill: "red",
width: 50,
height: 50
});

canvas.add(redSquare);
canvas.renderAll();
});
< /code>
Я не получаю красного квадрата. < /p>
Консоль JavaScript Chrome говорит мне: < /p>
Fabric.js initialized: networkDrawing.js:2
Canvas element:  networkDrawing.js:3
canvas#canvas
< /code>
, что должно означать, что JavaScript выполняется, что Fabric.js загружается и что элемент Canvas доступен.>

Подробнее здесь: https://stackoverflow.com/questions/796 ... red-square