Problema con elemento creato al volo

[fermat]

ciao!

al pressione del tasto eseguo codice:

function salva(dir) {
    var canvasImg = canvas.style.backgroundImage;
    var c = document.getElementById("final_canvas");
    var context = c.getContext("2d");
    var imageObj1 = new Image();
    var imageObj2 = new Image();
    imageObj1.src = canvasImg.replace('url(', '').replace(')', '').replace('"', '').replace('"', '');
    imageObj2.src = canvas.toDataURL();
    imageObj1.onload = function () {
        context.drawImage(imageObj1, 0, 0, 533, 800);
        imageObj2.onload = function () {
            context.drawImage(imageObj2, 0, 0, imageObj2.width, imageObj2.height);
            var img = c.toDataURL("image/png");
            document.getElementById('final').innerHTML = '<img id="final_image" src="' + img + '" width="533" height="800">';
        }
    };
    setTimeout('', 2000);
    $.ajax({
        type: "POST",
        dataType: "html",
        url: "sdiff_create_file.php",
        data: "dir=" + dir + "&f=" + $('#final_image').attr('src'),
        success: function (res) {
            console.log(res);
        }
    });
}

in sostanza devo passare l'immagine sorgente al file php.
però l'elemento img è creato al volo, e quindi il parametro arriva a php solo se premo di nuovo il tasto.
come se la prima non lo vedesse.
come posso fare secondo voi per evitare questo comportamento??