How to load picture in canvas only when nothing is loaded (js)

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