0

this function take the canvas and draw on it 2 images side by side on it sometimes it up to 4 images but when i call context.clearRect(0, 0, canvas.width, canvas.height); it make the canvas flashes for a little bit even thought the images should appear more continuous is there any other way to do that using canvas

PS: the 2 images on the left/right background is transparent so when i can't just draw image over other

function drawimagesonCanvas(canvas, url1, diac1, url2, diac2) {

        var IsBoth = (url2 != null);

        var context = canvas.getContext('2d');
        context.clearRect(0, 0, canvas.width, canvas.height);

        let loadImage = (url, diac, x, y, w, h, f) => new Promise((resolve, reject) => {
            var img = new Image();

            img.addEventListener('load', () => {
                if (f) {
                    context.save();
                    context.scale(-1, 1);
                    context.drawImage(img, x, y, -w, h);
                    context.restore();
                }
                else {
                    context.drawImage(img, x, y, w, h);
                }
                resolve();
            });

           img.src = url;
        });

        return loadImage(api + Jism, null, 50, 0, 350, 500).then(() => {
            if (IsBoth) {
                return Promise.all([
                    loadImage(api + url1, null, 50, 0, 350, 500),
                    diac1 != null ? (loadImage(api + diac1, null, 80, 120,80, 80)) : 1,
                    loadImage(api + url2, null, -50, 0, 350, 500, true),
                    diac2 != null ? (loadImage(api + diac2, null, -350 + 80, 120, 80, 80, true)) : 1,

                ]);

            } else {
                return Promise.all([
                    loadImage(api + url1, null, 50, 0, 350, 500)
                ]);

            }
        })
    }
Mohammad Al Baghdadi
  • 377
  • 2
  • 21
  • Don't load your image at each drawing. Load it once, save the image object somewhere and then draw it as much as you want, synchronously. – Kaiido Feb 14 '17 at 00:31
  • Yes i i'm preload every and each images in a preloader function but of course i don't use them i just put them in the cache the drawing doesn't take any time to get the photo instead it's only flash a little bit would you like to give you link to my project? – Mohammad Al Baghdadi Feb 15 '17 at 01:39
  • Nope, I don't want the link to your project. Even if the data has been cached, and that there is no new http request, loading an image is asynchronous, it still has to uncompress, premutiply and who knows whatever else to do. This is why you've got this *flash*. To avoid it, store one `` element per image, and draw these `` elements. – Kaiido Feb 15 '17 at 01:42

0 Answers0