Fabric.JS in Vaadin 12 project

Flow
1

I want to use Fabric.JS to draw shapes in an existing vaadin 12 project, but the shapes not showing.

test-design-1.html file:

<div id="divCanvas">
    <canvas id="c" height="800px" width="800px"> </canvas>
</div>

TestDesign1.java file:

@Tag(“test-design-1”)
@JavaScript(“src/views/js/jquery.min.js”)
@JavaScript(“src/views/js/fabric.js”)
@JavaScript(“src/views/js/1.js”)
@HtmlImport(“src/views/test-design-1.html”)

1.js file:

window.onload = function() {
    let canvas = new fabric.Canvas('c');
    alert('Objects count: ' + canvas._objects.length); //0

    let rect = new fabric.Rect({
        left: 100,
        top: 100,
        width:190,
        height:240,
        strokeWidth: 1,
        stroke:'red',
        fill:'green'
    });
    canvas.add(rect);
    alert('Objects count: ' + canvas._objects.length);  //1
    canvas.renderAll();
}

After running, “Objects count: 1” pop up, that means the rectangle has been added to the canvas, but the rectangle shape not showing.

How can I solve this?