FabricJS canvas stops working after new elements are added in the DOM

Question

Problem: Hi, I have 3 canvas elements in my single page. All of them are basically used for signature purposes so I've used fabric JS so user could have a pen like functionality and draw their signatures. Now, upon selection of some other options present at the top of the page new elements are added dynamically and that makes all of my canvas signature element stuck and I can't draw anything on them.

What I Tried: I've tried re-initialising canvas when the DOM is changed(or new divs are added) but it still gets stuck. It works fine when I first load the page and no new element is added.

Reference Link: This dude was having the same issue what I am facing but, the proposed solutions didn't works in my case.

$(document).ready(function() {
    canvas_init1();
});
function canvas_init1() {
    //alert('canvas initialized...');
    var canvas = new fabric.Canvas('c1');
    canvas.isDrawingMode = true;
    canvas.freeDrawingBrush.width = 3;
    console.log(canvas);

    var pracCanvas = new fabric.Canvas('prac-canvas');
    pracCanvas.isDrawingMode = true;
    pracCanvas.freeDrawingBrush.width = 3;

    var patCanvas = new fabric.Canvas('pat-canvas');
    patCanvas.isDrawingMode = true;
    patCanvas.freeDrawingBrush.width = 3;
}
        

I also tried adding calcOffset() and renderAll() but, it didn't made any difference. Thanks for your help in advance.

Answer 1

I solved it by adding

canvas.on('after:render', function(){ this.calcOffset(); });

on each canvas. The complete code becomes the following:

var canvas = new fabric.Canvas('c1');
canvas.on('after:render', function(){ this.calcOffset(); });
canvas.isDrawingMode = true;
canvas.freeDrawingBrush.width = 1;
console.log(canvas);

var pracCanvas = new fabric.Canvas('prac-canvas');
pracCanvas.on('after:render', function(){ this.calcOffset(); });
pracCanvas.isDrawingMode = true;
pracCanvas.freeDrawingBrush.width = 1;

var patCanvas = new fabric.Canvas('pat-canvas');
patCanvas.on('after:render', function(){ this.calcOffset(); });
patCanvas.isDrawingMode = true;
patCanvas.freeDrawingBrush.width = 1;