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:
function addMeme(id) {

    function drawImg(id) {
      var img = new Image();
      var selectedImage = gImgs.find((img) => + "" == id);
      img.src = selectedImage.url;
      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
Updated 8-Apr-20 7:52am
[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