img onload executes early

i'm working on a system that loads, render, and refreshes images on a canvas for my javascript engine project but when im using the img.onload it executes before i'm able to set the img source

the main function:

function addImgToList(canvas, url, sw, sh) {
    TempVar = {s: CheckSlots(canvas, 0)
              };
    that = this.TempVar;

    CurrentGFXElements[canvas].images[TempVar.s] = {
        img: new Image(),
        sw: sw,
        sh: sh,
        sprites: [],
        active: true,
        lx: 0, // last x
        ly: 0, // last y
        ew: 0,
        eh: 0,
        animations: 0
    };
    /*error calculations begins before img has been loaded
    */

    CurrentGFXElements[canvas].images[TempVar.s].img.onload = function (TempVar) {
        calcSprites(canvas, TempVar.s, sw, sh);
    } (TempVar);

    //CurrentGFXElements[canvas].images[TempVar.s].img.src = url;

    CurrentGFXElements[canvas].indexList[TempVar.s][0] = 1;
    return TempVar.s;}

note: i know that the line that sets the src is commented

the calculation function:

function calcSprites(canvas, slot, sw, sh, height) {
TempVar = {
    h: CurrentGFXElements[canvas].images[slot].img.height,
    w: CurrentGFXElements[canvas].images[slot].img.width,
    x: 0,
    y: 0,
    s: slot
};

TempVar.columns = TempVar.w / sw;
TempVar.rows = TempVar.h / sh;
TempVar.sprites = TempVar.columns * TempVar.rows;

console.log(TempVar);

for (i = 0; i < TempVar.sprites; i++) {
    CurrentGFXElements[canvas].images[slot].sprites[i] = [[TempVar.x, TempVar.y]];
    console.log(CurrentGFXElements[canvas].images[slot].sprites[i]);

    TempVar += CurrentGFXElements[canvas].images[slot].sw;

    if (TempVar.x >= (CurrentGFXElements[canvas].images[slot].sw * TempVar.columns)) {
        TempVar.x = 0;
        TempVar.y += CurrentGFXElements[canvas].images[slot].sh;
    }
}

return TempVar;}

the full file can be viewed here:(this link isn't up 24/7)(skip the commented part of the code at the top)

http://ift.tt/1bTGD64