I have js function which runs every 40msecs (0.04sec) for animation purposes. In the function as you will see in the code below I load a picture in the html canvas elem. Obviously sometimes the picture is delayed to load the result is a flickering picture.The question is how to avoid that, probably to check if the picture has completed loading and then move it around by dx
Html <canvas id="graph" style="border: 1px solid #0a2b02; position: absolute; z-index: 1;"></canvas>
js
if (t == null){t = setInterval(DrawBase, dt*1000;dx)}
else {terminatet(); };
function DrawBase(dx){
img.onload = () => {context2.drawImage(img,0.1*canWidth+dx,0.1*canWidth,0.8*canWidth ,0.9*canWidth); };
img.src = "./img/oilRig.png";
}}
I tried to use if(img.complete){} and other like !img.loading but doesn’t seem to work