图像加载功能后 clearRect 功能不起作用

如何解决图像加载功能后 clearRect 功能不起作用

在下面的代码块中，我只是想让 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,95); /*<-----WORKS*/
    }

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

然后：

document.addEventListener('DOMContentLoaded',95);
         
    }
    stagectx.clearRect(50,95); /*<-----DOES NOT WORK*/
    groundimage.src = "/static/Groundscroll.png";
    
})