p5.js canvas добавляет ненужную полосу прокрутки

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

Вот jsfiddle, который показывает ошибку .

Однако, когда я добавляю холст, который имеет точный размер как мой html, *Элементы 1013 * и #musicscape, добавлена ​​вертикальная полоса прокрутки.Единственный способ удалить его - установить ширину холста на $musicscape.outerHeight() - 3, что также создает маленькую белую линию внизу, которая не является частью холста. Как избавиться от вертикальной полосы прокрутки, сохранив холст до размера его родительского элемента? Я проверил, и на моей странице нет отступов или полей.

Я тестирую наХром кстати.

Answer 1

HTML-элемент canvas по умолчанию является встроенным элементом ( список встроенных элементов ). Так что даже если вы установите его высоту точно так же, как его родитель, он переполняется из-за межстрочного интервала. Чтобы предотвратить это, установите canvas для элемента уровня блока в вашем файле SASS.

#canvas
    display: block;