Drawing image on canvas doesnt work, even with onload

See more:

Javascript

HTML5

Hey Guys, im trying to render my image onto a canvas,
however it doesnt draw for some reason , i've tried both with setting the source, and using the element,
images sit in a folder inside the project folder, they render well onto the page with the given url,
however they dont draw

the function:

function addMeme(id) {
      hideTemplateModal();
      hideMain();
      showEditModal();
      renderCanvas();
      drawImg(id);
    }


    function drawImg(id) {
      var img = new Image();
      var selectedImage = gImgs.find((img) => img.id + "" == id);
      img.src = selectedImage.url;
      debugger
      var elImg = document.querySelector(`[data-id="${id}"]`);//not in use
      img.onload = () => {
        gCtx.drawImage(img, 0, 0, gCanvas.width, gCanvas.height); //img,x,y,width,height
      };
    }

should have probably added

function updateCanvas() {
  gCanvas = document.getElementById("my-canvas");
  gCtx = gCanvas.getContext("2d");
}

What I have tried:

tried using the elment instead of the image src