javascript - 関数内で変数が機能しない

Question

なぜこれが機能しないのですか？

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');


var img = new Image();
img.onload = function(){
    ctx.drawImage(img,0,0);
};
img.src = 'hero.png';

しかし、これはありますか？

var img = new Image();
img.onload = function(){
    var canvas = document.getElementById('canvas');
    var ctx = canvas.getContext('2d');
    ctx.drawImage(img,0,0);
};
img.src = 'hero.png';

そのctx変数をグローバルにして、すべての関数で使用できるようにする方法は? ところで、すべてのチュートリアルで、誰もが最初の方法を使用しています...

うまくいきました！