Objects aren't selectable after disposing and creating fabric canvas over the same html canvas element

Question

Here is a codepen exaple.

Basically:

let fabricCanvas = new fabric.Canvas('c');
fabricCanvas.add(
  new fabric.Rect({ left: 10, top: 10, fill: 'red', width: 20, height: 20 })
); // 1. Initialize fabric wrapper for the 1st time
fabricCanvas.dispose(); // 2. Dispose it
fabricCanvas = new fabric.Canvas('c');    
fabricCanvas.add(
  new fabric.Rect({ left: 100, top: 100, fill: 'red', width: 20, height: 20 })
); // 3. Initialize fabric wrapper for the 2nd time

After disposing and creating a fabric.Canvas over an html canvas for the second time, objects on the canvas are not selectable. How to make it work without creating a new html canvas element?

Answer 1

I don't know whats happen when we use dispose() because I played around with this I find out what is the reason behind this.

when we dispose() and create a new canvas with fabricjs fabric additionally add another upper canvas this is problem. so we remove upper canvas programmatically when we use dispose() . problem solved.

here

var canvas  = new fabric.Canvas('c');
var rect = new fabric.Rect({
        left: 100,
        top: 100,
        fill:  "#FF0000",
        stroke: "#000",
        width: 100,
        height: 100,
        strokeWidth: 10, 
        opacity: .8      
    });

canvas.add(rect);

canvas.dispose()

$(".upper-canvas").remove();     //<------- here we remove

canvas  = new fabric.Canvas('c');

 var rect2 = new fabric.Rect({
        left: 100,
        top: 100,
        fill:  "green",
        stroke: "#000",
        width: 100,
        height: 100,
        strokeWidth: 10, 
        opacity: .8      
    });
canvas.add(rect2);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.5.0/fabric.min.js"></script>


<canvas id="c" width="500" height="300"></canvas>