JavaScript drawImage（）不起作用

我正在尝试创建javascript幻灯片，以下是我当前的代码：

window.onload=function（）{
var c=document.getElementById（“框架”）；
var ctx=c.getContext（“2d”）；
var img=document.getElementById（“s1”）；
ctx.drawImage（img，0，0，300，190）；
}
函数场景2（）{
var img1=document.getElementById（“s2”）；
ctx.drawImage（img1,0,0,300,190）；
};
.i{
显示：无；
}
帆布{
边框：5px实心#000000；
宽度：910；
身高：500；
}

一个
函数场景2为变量创建了新的作用域，而ctx变量在那里不可见。请看以下代码：

A.
window.onload=函数（）{
var c=document.getElementById（“框架”）；
var ctx=c.getContext（“2d”）；
var img=document.getElementById（“s1”）；
ctx.drawImage（img，0,0300190）；
}
函数场景2（）{
var c=document.getElementById（“框架”）；
var ctx=c.getContext（“2d”）；
var img1=document.getElementById（“s2”）；
ctx.drawImage（img1,0,0300190）；
};
.我{
显示：无；
}
帆布{
边框：5px实心#000000；
宽度：910；
身高：500；
}
ctx
仅适用于第一个功能。其他地方都没有定义。只需打开浏览器控制台并查看错误消息。@Xufox发布此消息作为回答，我可以问一下为什么使用画布而不是DOM吗？