Блог

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

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

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

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

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

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

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

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

Они оба работают в текущих версиях Safari и Chrome — я просто быстро попробовал их.

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

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

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