Dlaczego te zmienne są „niezdefiniowane”?

Mam następujący kod:

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 ); 

Problem polega na tym, że widzę wartość obu zmiennych,canvasData jestundefined icanvas2imgval1 nie ma wartości. Nie wiem, co jest nie tak z moim kodem. Normalnie te dwie zmienne są oznaczone jako publiczne za pomocą słowa kluczowego JavaScriptvar.

questionAnswers(1)

yourAnswerToTheQuestion