Javascript js画布添加了不需要的滚动条

我正在使用父级的值创建一个简单的p5.js画布，如下所示：

//画布属性
var$musicscape=$（“#musicscape”）；
//p5.js函数
函数设置（）{
var canvas=createCanvas(
$musicscape.outerWidth（），
$musicscape.outerHeight（））；
canvas.id（“canvas”）
canvas.parent（$musicscape[0]）；
}

My

MusicCape

元素具有以下sass属性，并且在不创建任何滚动条的情况下具有正确的大小

#musicscape
    position: absolute
    right: 0
    top: 0
    width: 50vw
    height: 100vh

这是

但是，当我添加画布时，会添加一个垂直滚动条，该画布的大小与我的

html

、

body

和

#musicscape

元素的大小相同。删除它的唯一方法是将画布宽度设置为

$musicscape.outerHeight（）-3

，这也会在底部创建一条不属于画布的小白线如何在将画布保持为其父级大小的同时去掉垂直滚动条？我检查了，页面上没有任何填充或边距

---

顺便说一句，我正在Chrome上测试。

HTML画布元素默认为内联元素（）。 因此，即使您将其高度设置为与其父级完全相同，它也会因行距而溢出。要防止它，请在SASS文件中将canvas设置为块级元素

#canvas
    display: block;

---

你能发布一个我们可以自己运行的消息吗？@KevinWorkman我在我的帖子中添加了一个jsFiddle