callback returning true/false

Question

I'm wondering what I am missing here I have a code that checks if the image is transparent based on canvas.

function Trasparent(url, npc, clb) {
    var img = new Image();
    img.src = url;
    img.onload = () => {
        canvas.width = img.width;
        canvas.height = img.height;
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        ctx.drawImage(img, 0, 0);
        var maxlength = Math.sqrt(img.width * img.height) * 5 + 300;
        if (canvas.toDataURL().length < maxlength) {
            clb(false, npc);
        } else {
            clb(true, npc);
        }
    };
}

When I'm doing it this way:

        function Trasparent(url, npc, clb) {
            var img = new Image();
            img.src = url;
            img.onload = () => {
                canvas.width = img.width;
                canvas.height = img.height;
                ctx.clearRect(0, 0, canvas.width, canvas.height);
                ctx.drawImage(img, 0, 0);
                var maxlength = Math.sqrt(img.width * img.height) * 5 + 300;
                if (canvas.toDataURL().length < maxlength) {
                    clb(false, npc);
                } else {
                    clb(true, npc);
                }
            };
        }

        function callback(success, npc) {
            if (success) {
               console.log("Not trasparent");
            } else {
               console.log("Trasparent");
            }
        }
        
        
        Trasparent(npc.icon, npc, callback);

It works just fine, but when I'm trying to make this function above like this:

function Trasparent(url, npc) {
    var img = new Image();
    img.src = url;
    img.onload = () => {
        canvas.width = img.width;
        canvas.height = img.height;
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        ctx.drawImage(img, 0, 0);
        var maxlength = Math.sqrt(img.width * img.height) * 5 + 300;
        if (canvas.toDataURL().length < maxlength) {
            return false;
        } else {
            return true;
        }
    };
}


if(Transparent(npc.icon, npc)){
  console.log("Not transparent");
} else {
  console.log("Trasparent");
}

It doesn't work...

Even tho in this example which i wrote it works fine:

function check(a, b) {
 var result = a + b;
 if (result <= 10) {
  return (false);
 } else {
  return (true);
 }
}


function test() {
 if (check(5, 4)) {
  console.log(">10");
 } else {
  console.log("<10")
 }
}
test();

What i am missing?

spelling mistake in function name Transparent (instead of Trasparent) — laiju, Nov 30 '17 at 06:26
Possible duplicate of [How do I return the response from an asynchronous call?](https://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call) — freedomn-m, Nov 30 '17 at 06:50

score 1 · Answer 1 · answered Nov 30 '17 at 06:42

The return-statements are not belonging to the function Transparent!

You are creating a different function here which returns true or false when it is called, but it is not executed right away and it's return-value is not returned in your function Transparent. What you have is essentially this snippet:

function Trasparent(url, npc) {
    var img = new Image();
    img.src = url;
    img.onload = function() {
      // function body totally unrelated to the Transparent-function 
      // and not executed and not returning anything right now
    };
    return undefined;
}

(these are not actually the same since fat arrow functions capture this, see What does "this" refer to in arrow functions in ES6?)

Your solution with the callback is the way to go.

Amit Wagner · Answer 2 · 2017-11-30T06:40:01.863

0

your code is async. you cant return true or false. you need to return a callback thats why your if doesn't work

function Trasparent(url, npc,cb) {
    var img = new Image();
    img.src = url;
    img.onload = () => {
        canvas.width = img.width;
        canvas.height = img.height;
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        ctx.drawImage(img, 0, 0);
        var maxlength = Math.sqrt(img.width * img.height) * 5 + 300;
        if (canvas.toDataURL().length < maxlength) {
            cb(false);
        } else {
            cb(true);
        }
    };
}


Transparent(npc.icon, npc,function(result){
    if(result)
      console.log("Not transparent");
    } else {
      console.log("Trasparent");
    }
  })
)

edited Nov 30 '17 at 06:40

answered Nov 30 '17 at 06:24

Amit Wagner

3,134
3
19
35

1

spelling mistake in the function called and declared – laiju Nov 30 '17 at 06:27
I missed the spelling cuz i was copying it from my source and just renamed it for exapmle here. So it is just my fail, any way even tho spelling is correct it doesnt't work – Hiurako Nov 30 '17 at 06:58

callback returning true/false

2 Answers2