Как установить ширину и высоту холста на всю высоту и ширину браузера без переполнения?
Я хочу сделать холст с шириной и высотой документа без прокрутки, но я не знаю, как это сделать. Я старался:
canvas.width = window.innerWidth;
canvas.width = parseInt(getComputedStyle( document.body ).getPropertyValue( 'width' ));
canvas.width = document.body.offsetWidth
canvas.width = document.body.clientWidth
Но у меня есть 1-20 неиспользуемых пикселей, которые я могу прокручивать, также я не могу уменьшить ширину и высоту на фиксированное количество пикселей - разные браузеры показывают это по-разному.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 3
если вы спрашиваете, как сделать элемент равным 100% ширины и высоты области просмотра, вы можете использовать CSS...
#selector_id {
width: 100vw,
height: 100vh
}
window.innerWidth дает вам всю ширину внутри оконной рамы, игнорируя полосы прокрутки.
document.body.clientWidth дает вам ширину внутри вертикальной полосы прокрутки - если она присутствует.
Оба они работают с текущими версиями Safari и Chrome — я только что попробовал их.
Оба должны работать во всех современных браузерах, проверьте здесь окно.innerWidth и здесь для document.body.clientWidth.
Мне было бы интересно узнать о любых обстоятельствах, когда они не работают так, как рекламируется.
(Конечно, если вы выполнили код точно так, как вы его показали, вы получили бы только значение document.body.clientWidth. Я предполагаю, что вы имели в виду, что пробовали каждый из них по очереди.)
Исправлено с помощью «display: block», элементы холста по умолчанию не являются блоками.