re: Why does the image not display on the canvas? VIEW POST

re: I've seen the problem now, it's still in your drawImg function. The i that you are passing to your draw function is null, even if you reassign it f...

How does this change the program in any way, once i is assigned for the first time vs when it's reassigned? Is it just JavaScript that does this, or do other languages do this too? And why do languages do this? It'd be really cool to know what the bug was, and what happens in the language (provided you know anything about what happens).
And thanks again for the help!

Actually nevermind, after some more testing, your original code worked as well. I think that the problem is that you are passing width and height to context.drawImage when they are undefined, which probably makes the function scale the image to 0x0 or something.

Huh, it still doesn't draw nothing? But it's not null now, if it was before, I removed the display:none for images, and I added two lines to the onload function for debugging:

(document.body || document.head.parentNode).appendChild(i);

and it logs the image element, and appends the image, the canvas doesn't work.

Here are my results:
<img src="textures/logo.png">
I even drew another image, using the console and it was added to the document fine, logged normally as the element, but again, no result on the canvas, what the hell happens with the canvas, and this is weird, because instead of anti-aliasing being the issue, it's now images not showing up.

            // Exactly as you wrote it
            const drawImg = function(src=null,x=0,y=0,width=undefined,height=undefined) {
                if(src === null) {
                    return false;
                const i = img("textures/"+src+".png",() => {
                    (document.body || document.head.parentNode).appendChild(i);
                return true;

But if this approach doesn't work I might start from scratch again, but I don't know what the most effective method is.

Yeah, my bad. Look at my previous comment, the problem isn't with the reassignment, it's with passing width and height to s.drawImage when they are undefined.

No, because doesn't undefined keep the original parameter

function f(x="Hi") {


result in:

Yeah, but your default value for height and width is undefined. The function drawImage has several configurations of optional arguments, and it probably checks the length of the arguments to choose which strategy to apply. In your case, it is receiving five arguments, so it understands that it has to scale the image, but the scales are undefined.

You can try this to see what I mean:

const f = (...args) => console.log(args.length)
f(1, 2, 3) // 3
f(1, 2, 3, undefined, undefined) // 5

Ok, but how, then, can I resize the image (if I want or need) , but leave the parameters blank if the input value for that doesn't exist? Is there just no way to do that?

You could take the height and the width from the image if they are not provided.

const drawImg = function (src = null, x = 0, y = 0, width, height) {
    if (src === null) {
        return false;
    let i = null;
    const draw = function () {
        const w = width || i.width
        const h = height || i.height
        s.drawImage(i, x, y, w, h);
    i = img("textures/" + src + ".png", function () {
    return true;

Ok, thanks, as I said, the default is it uses the image size, and the image did not appear when I ommited the width or height variables from the function call.......
For reference, this is what the image looks like:

Nevermind, I ommited the width and height parameters from the s.drawImage function, and it still didn't appear.

code of conduct - report abuse