Как установить ширину и высоту холста на всю высоту и ширину браузера без переполнения?

Question

Я хочу сделать холст с шириной и высотой документа без свитков, но я не знаю, как это сделать. Я попробовал:

canvas.width = window.innerWidth;
canvas.width = parseInt(getComputedStyle( document.body ).getPropertyValue( 'width' ));
canvas.width = document.body.offsetWidth
canvas.width = document.body.clientWidth

Но у меня есть 1-20 неиспользуемых пикселей, которые я могу прокручивать, также я не могу уменьшить ширину и высоту на фиксированное количество пикселей - разные браузеры показывают это по-разному.

Answer 1

window.innerWidth дает всю ширину внутри рамки окна, игнорируя полосы прокрутки.

document.body.clientWidth дает ширину внутри вертикальной полосы прокрутки - если есть.

Они обе работают на текущих версиях Safari и Chrome - я просто дал им небольшую попытку.

Оба должны работать во всех современных браузерах, проверьте здесь window.innerWidth и здесь для document.body.clientWidth .

Мне было бы интересно узнать какие-либо обстоятельства, когда они не работают так, как рекламируется.

(Конечно, если вы выполнили код в точности так, как вы его показали, в итоге вы получите только значение document.body.clientWidth. Я предполагаю, что вы имели в виду, что вы пробовали каждый из них по очереди.)

Answer 2

Исправлено "display: block", элементы canvas по умолчанию не являются блоками.

Answer 3

если вы спрашиваете, как сделать элемент на 100% ширины и высоты области просмотра, вы можете использовать CSS ...

#selector_id {
    width: 100vw,
    height: 100vh
}