jQuery/JavaScript trigger on canvas image load

[intellix]

Edit: after re-thinking and reading my post: Short question is: how do you add an Event listener on the img loading inside a canvas? $("canvas img") doesn't work for example...

 

 

Hey guys, using jQuery and JavaScript... I have a function that adds a line, when this line is added, another function is run that adds a Canvas and loads an image within it like so:

 

Within addCanvas an image is loaded and I can trigger a function upon the image loading.. Cool. But how do I get the previous function to know when this image is loaded? I tried adding return true; within addCanvas and then in the previous function doing an if(addCanvas()){ } but it seems to get to that line and if the image hasn't loaded, it doesn't wait

 

function addText(){
    // Add text code
    addCanvas();
}

function addCanvas(){
    // add canvas, load image
    var $img = new Image();
    $img.src = 'image.png';
    $img.onload = function(){
           // do stuff
    }
}

 

I wanted the previous function to know when it has loaded so I can continue with all the variables I currently have... If I can't check for it in the previous function then I'll have to pass them all when they're only needed in certain conditions and its a little messy.

It's a canvas but can't really do

$("canvas").load(function(){
  // loaded
});

 

because the canvas is already loaded... its the image inside it I want to check that has loaded

[intellix]

Cracked it.

 

return $img within addCanvas and then

 

$img = addCanvas
$($img).load(function(){
  // do stuff
});

 

Can't use  = onload again though as its already been added as a trigger function so overwrites the first one