How to globally access properties of an image loaded in with JavaScript

Question

So I have loaded in an image and can access the properties within this function locally such as ball.height and width, but I need to use these properties in other functions to do calculations with. How would I access these properties since they are only locally defined currently. I can't set it as global (or at least don't know how) since in order to get the image in the first place I have to load it in with the function.

function drawBall() {
  var ball = new Image();
  $(ball).on('load', function() {
    ctx.drawImage(ball, xBall, yBall);
    console.log(ball.height);
  });
  ball.src = 'ball.png';
}

function ballHit() {
  // For example calculate if ball.height = canvas.height
}

Answer 1

Since the image load is a asynchronous task, you can use a callback：

function drawBall(callback) {
    var ball = new Image();
    $(ball).on('load', function() {
        ctx.drawImage(ball, xBall, yBall);
        console.log(ball.height);
        callback(ball.height,ball.width);
    });
    ball.src = 'ball.png';
}

drawBall(ballHit);

Answer 2

Create a global variable globalBall and once the image is loaded you can assign the image from the function to the global object.

var globalBall = new Image();
function drawBall() {
    var ball = new Image();
    $(ball).on('load', function() {
        ctx.drawImage(ball, xBall, yBall);
        console.log(ball.height);
    });
    ball.src = 'ball.png';

    globalBall = ball;
}

function ballHit() {
     if(globalball.height == canvas.height)
     {
          // Do your stuff
     }
}