Image loads only when page reloads (HTML5 Canvas)

Asked Nov 13 '19 at 15:05

Active Nov 13 '19 at 15:16

Viewed 34 times

When I load the page for the first time, nothing shows up but when I reload the page the image shows up. How to load the image on first page load? I referred to a few answers on SO, and found that I could use onload but the thing is that I am calling head.draw() from another function at a certain time.

let head_ = new Image();
head_.src = "img/head.png";

const head = {
    x : 12,
    y : 12,
    w : 36,
    h : 36,
    draw : function(){
        ctx.drawImage(head_, 0, 0, head_.width, head_.height, this.x, this.y, this.w, this.h);
    }
}

function draw(){
    // SOME CODE
    head.draw();
    // SOME CODE
}

function loop(){
    draw();
    requestAnimationFrame(loop);
}

And also all the other images are loading fine even on the first load. This concerns me more!!!

Is there any way to forcefully load the images?

edited Nov 13 '19 at 15:16

asked Nov 13 '19 at 15:05

FunnelScr

take a look at this, window.onload seems like something you need https://stackoverflow.com/questions/588040/window-onload-vs-document-onload – Omi in a hellcat Nov 13 '19 at 15:06
@Omiinahellcat I tried this but no luck :( – FunnelScr Nov 13 '19 at 15:11
Where is `abcd` function called? – Armen Michaeli Nov 13 '19 at 15:13
You can try: if (head_.complete) { ctx.drawImage(...); } else { img.onload = function () { ctx.drawImage(...); } } – smartilabs Nov 13 '19 at 15:17
Well, it's the `draw()` function. I have edited my question. – FunnelScr Nov 13 '19 at 15:17
@smartilabs Same behavior :( – FunnelScr Nov 13 '19 at 15:20
@KobayakiTunnel can you create a snippet online where you can duplicate this behaviour? Easier to help... – smartilabs Nov 13 '19 at 15:22

Image loads only when page reloads (HTML5 Canvas)

0 Answers0