p5.j​​s画布添加了不需要的滚动条

Question

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

// Canvas properties
var $musicscape = $("#musicscape");

// p5.js functions
function setup() {
    var canvas = createCanvas(
        $musicscape.outerWidth(),
        $musicscape.outerHeight()) ;
    canvas.id("canvas")
    canvas.parent($musicscape[0]);
}

我的musicscape元素具有以下sass属性，并具有正确的大小，而不创建任何滚动条。

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

这里是a jsfiddle which shows the error。

但是，当我添加大小与我的html，body和#musicscape元素相同的画布时，会添加一个垂直滚动条。删除它的唯一方法是将画布宽度设置为$musicscape.outerHeight() - 3，这还会在底部创建一条小的白线，该白线不属于画布。 如何在使画布保持其父代大小的同时摆脱垂直滚动条？我检查了一下，页面上没有任何填充或边距。

我正在Chrome btw上进行测试。

Answer 1

HTML canvas元素默认为内联元素（list of inline elements）。 因此，即使您将其高度设置为与父代高度完全相同，也会由于行距而溢出。为了防止这种情况，请将画布设置为SASS文件中的块级元素。

#canvas
    display: block;