To upload images to the canvas, I use this method =>
const load = (url: string) =>
new Promise((resolve, reject) => {
const image = new Image();
if (!image) reject();
image.crossOrigin = 'Anonymous';
image.src = url;
image.addEventListener('load', () => resolve(image));
image.addEventListener('error', err => reject(err));
});
After much research, it turned out that I am blocking this error: https://bugs.chromium.org/p/chromium/issues/detail?id=409090
Indeed, random pictures are not displayed on the layout panel.
I haven't written the code, so I'm not sure if this line is needed, what's the difference with or without it?
image.crossOrigin = 'Anonymous';
UPDATE 1
When I delete image.crossOrigin = 'Anonymous';, loading the image no longer has a problem with CORS, but then I get this error when trying to use canvas.toDataURL('image/png')on canvas
DOMException failed: 'toDataURL' failed in 'HTMLCanvasElement': shadow canvases may not be exported.