Within a loop ranging from 1 to 2, I have created two canvases on the screen and stored them in an object. However, when I load the same two images onto each canvas, only the last canvas displays the images. Why is it not loading on both canvases? Interestingly, there is also a text object that works on both canvases within the same loop.
Take a look at the example code snippet below where images are added only to the second canvas while the text object is successfully added to both canvases:
var canvases = {};
var imageUrls = ['url here', 'url 2 here'];
for(var p = 1; p <= 2; p++){
canvases[p] = new fabric.Canvas('canvas-element-' + p);
var t = new fabric.Text('Testing', {top:600, left:0});
canvases[p].add(t);
canvases[p].renderAll();
for(var i in imageUrls){
fabric.Image.fromUrl(imageUrls[i], function(img){
img.set({
width:500,
height:500,
top:0,
left:0
});
canvases[p].add(img);
canvases[p].renderAll();
}
});
}