Блог

В следующем блоке кода я просто пытаюсь заставить clearRect работать. Я новичок в Javascript и все еще пытаюсь разобраться в потоке информации. Проблема здесь в том, что, когда я помещаю строку clearRect в функцию onload, она работает. Если я помещу его в основной текст кода, это не так. Кто-нибудь знает, почему?

 document.addEventListener('DOMContentLoaded' , () => {
    var stage = document.getElementById("stage");
    var stagectx = stage.getContext('2d');
    var groundimage = new Image();
    groundimage.onload = function(){
        stagectx.drawImage(groundimage, 50, 130, 320, 95);
        stagectx.clearRect(50, 130, 320, 95); /*<-----WORKS*/
    }

    groundimage.src = "/static/Groundscroll.png";
    
})
 

И затем:

 document.addEventListener('DOMContentLoaded' , () => {
    var stage = document.getElementById("stage");
    var stagectx = stage.getContext('2d');
    var groundimage = new Image();
    groundimage.onload = function(){
        stagectx.drawImage(groundimage, 50, 130, 320, 95);
         
    }
    stagectx.clearRect(50, 130, 320, 95); /*<-----DOES NOT WORK*/
    groundimage.src = "/static/Groundscroll.png";
    
})