Javascript 为什么我在画布下看到div的背景

我试图在一个div中滚动画布。问题是，当我试图滚动时，我看到下方div红色背景中的红线部分，而我希望看到所有内容都是黑色的

HTML:

这是一个简单的例子：

---

添加

显示：块到
画布


var c=document.getElementById（“myCanvas1”）；
var ctx=c.getContext（“2d”）；
ctx.fillRect（0,0200500）；
ctx.fillStyle=“#00ff00”//除此之外，你的fiddle链接只给了我一个404-与你的问题相关的代码直接属于你的问题，以文本形式和正确的格式，而不仅仅是在外部网站上发布。请相应地编辑。请添加对代码的另一个引用上面的链接已失效，因为画布a被视为图像，添加
垂直对齐：中间
，下面的空格已消失。默认情况下，画布是内联元素；如果添加
display:block
到它的CSS，它将精确地定位在后台div中。
   <div id="Div1" style=" float: left; width: 150px; height: 200px; background: red; overflow:scroll; ">
    <canvas id="myCanvas1" width="200px" height="500px" style="border:0px solid #ff0000;">asdf asd as asfqwe asd asdfasdf asd as asfqwe asd asdfasdf asd as asfqwe asd asdf</canvas>
</div>

 var c = document.getElementById("myCanvas1");
    var ctx = c.getContext("2d");
    ctx.fillRect(0, 0, 200, 500);
    ctx.fillStyle = "#00ff00";  //<======= here
    ctx.font = '35px serif';
    ctx.fillText('Hello world', 0, 40);

canvas { border: 0px solid black; }