Click here to Skip to main content
15,063,944 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
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:
JavaScript
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
Posted
Updated 8-Apr-20 7:52am
v3
Comments
[no name] 8-Apr-20 12:47pm
   
a.) What error "F12" shows?
b.) When and what is assigned to gCanvas?
Member 14719507 8-Apr-20 13:51pm
   
added to question, no error in colsole
[no name] 8-Apr-20 14:02pm
   
Here a minimal example, I hope it helps: Tryit Editor v3.6[^]
Member 14719507 8-Apr-20 14:09pm
   
same thing i did mate
gggustafson 9-Apr-20 13:48pm
   
From your code, I don't think you did the same thing! Copy the w3schools code and then modify it to fit your needs.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)




CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900