A unique script is utilized to retrieve JSON data through an AJAX request and display it on the Canvas. What makes this interesting is that there are various buttons on the webpage, each associated with a canvas element. When any of these buttons are clicked, a new AJAX request is triggered, leading to the rendering of the updated JSON data.
An issue arises during every other rendering process (quite peculiar). To illustrate, after the first render, the mouse:down event functions as expected. However, during the second render, it fires twice. Subsequently, on the third render, it works fine again, but on the fourth render, it fires twice once more, and so forth...
Below is the script executed upon clicking any button:
// The 'objects' variable stores the JSON objects retrieved from the AJAX request.
// These objects pertain to fabricJS elements.
var drawing = JSON.parse(objects);
for (var i = 0; i < drawing.objects.length; i++) {
drawing.objects[i]['left'] += 50;
}
canvas.clear();
canvas.loadFromJSON(drawing, canvas.renderAll.bind(canvas));
canvas.setZoom(0.66);
canvas.setZoom(canvas.getZoom() * 1.3);
canvas.on('mouse:down', function (el) {
console.log(el.target);
}
UPDATE: It seems that I inadvertently applied the same event listener repeatedly during each render. Consequently, this explains why the event fires multiple times on subsequent renders.