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}"]`);
img.onload = () => {
gCtx.drawImage(img, 0, 0, gCanvas.width, gCanvas.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