Drag & Drop functionality lost when fabric.Canvas is initialized - fabricjs

Question

I have this canvas in the HTML and the D&D works fine:
<canvas id="canvas" width="800" height="450" ondragover="onDragOver($event)" ondrop="onDrop($event)"></canvas>
but when I want to create an instance of fabric.js to make use of the API, the D&D functionality is lost.
this.canvasObj = new fabric.Canvas('canvas', {});
How can I preserve the functionality?

Answer 1

The Drag & Drop functionality is lost because, when you create a new instance of fabric.js canvas, it automatically creates a new canvas element (with a class upper-canvas) on top of your original canvas, which obviously doesn't have the drag and drop functionality.
SO, you'll need to add those functionality to the newly created canvas as well.
/* for demonstration */
var ctx = document.getElementById('canvas').getContext('2d');
var text = document.getElementById('text');
function onDragOver(event) {
event.preventDefault();
}
function onDrop(event) {
document.body.removeChild(text);
draw();
}
function draw() {
ctx.clearRect(0, 0, 200, 200)
ctx.font = '14px Verdana'
ctx.fillText(text.innerText, 10, 100);
requestAnimationFrame(draw);
}
/* main part */
var canvasObj = new fabric.Canvas('canvas');
var upper_canvas = document.querySelector('.upper-canvas');
upper_canvas.ondrop = onDrop;
upper_canvas.ondragover = onDragOver;
canvas {
border: 1px solid black;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.9/fabric.min.js"></script>
<p draggable="true" id="text">Drag me into the canvas!</p>
<canvas id="canvas" width="200" height="200" ondrop="onDrop(event)" ondragover="onDragOver(event)"></canvas>