javascript - グローバル変数へのアクセスと非同期の問題

Question

以下は、私が作業を開始したばかりのコードです (アバター ジェネレーターの実験)。ボタンをクリックしてキャンバス要素の位置を変更できるようにしたいのですが、いくつか問題があります。

ボタンのクリックイベント関数では、console.log out canvasTop ...

console.log(this.canvasTop);

...しかし、それは未定義になります。このクリック イベント関数内を除いて、コード内のどこからでも変数にアクセスできます。なぜこのようになっているのですか？

もう一つは、次の2行です...

this.canvasTop += 10;
AvatarGenerator.canvas();

...これらの行の最初の行で、canvasTop の値を反復処理し、2 行目でキャンバスを描画する関数を呼び出します。ただし、2 行目が最初の行の前に実行されているようです (はい、JS は非同期であることはわかっています)。これは、次にボタンをクリックするまでキャンバス要素が移動しないことを意味します。どうすればこれを解決できますか?

前もって感謝します！

コード：

AvatarGenerator = {

    canvasTop: 50,
    canvasLeft: 50, 
    canvas: $('#canvas')[0],
    context: canvas.getContext('2d'),

    init: function() {
        AvatarGenerator.canvas();
        AvatarGenerator.toolBox();
    },

    canvas: function() {
        console.log(this.canvasTop); // <-- 50
        this.context.beginPath();
        this.context.moveTo(this.canvasLeft, this.canvasTop);
        this.context.lineTo(300, 300);
        this.context.stroke();
    },

    toolBox: function() {
        var moveLeftBtn = $('#moveLeftBtn');

        moveLeftBtn.on('click', function(){
            console.log(this.canvasTop); // <-- undefined, why?

            this.canvasTop += 10;
            AvatarGenerator.canvas();
        });
    }
};