Hope you are having a wonderful day :}

so lately I've been trying to create a pdf flipbook page with annotation using PDFJS+TurnJS+FabricJS. But unfortunately i'm stuck with adding canvases for each PDF page.

well the the canvases was a success, but I'm not being able to handle the (new fabric) function for each page.

so if someone can me I would be very thankful..

anyways here's my code:

$(".canvas-page-area").on("click", function () {
    let target = $(this).attr("id");
    $(".canvas-page-area").removeClass("focus")
    $(this).addClass("focus");
    let t2 = $(".canvas-page-area.focus").attr('id')
    var canvas = new fabric.StaticCanvas(t2);
    canvas.setHeight($(".addCanvas").height());
    canvas.setWidth($(".addCanvas").width());
    $("#add").on('click', function () {
        canvas.add(
            new fabric.Rect({
                top: 200,
                left: 200,
                width: 50,
                height: 50,
                fill: '#f55'
            }),
        );
    }) 
})