¿Por qué estas variables son "indefinidas"?

Tengo el siguiente código:

var canvasData;
var canvas2imgval;

imageObj1.onload = function() {
    ctx.drawImage(imageObj1, 0, 0, wdOb1, hgOb1);
    imageObj2.onload = function() {
        ctx.drawImage(imageObj2, imgposLeft, imgposTop, wdOb2, hgOb2);
        //img = c.toDataURL("image/png");
        //document.write('<img src="' + img + '" width="256" height="256"/>');
        //canvas2img
        canvasData = c.toDataURL("image/png");
    }

}
console.log("canvasData : "+canvasData ); 
$("#canvas2img").val(canvasData) ;
canvas2imgval = $("#canvas2img").val() ;
console.log("canvas2imgval1 : "+canvas2imgval ); 

El problema es cuando veo el valor de ambas variables,canvasData esundefined ycanvas2imgval1 no tiene valor No sé qué está mal con mi código. Normalmente esas dos variables están marcadas como públicas con la palabra clave JavaScriptvar.

Respuestas a la pregunta(1)

Su respuesta a la pregunta