Обновить HTML высоту холста при прокрутке - PullRequest
Новая
       53

Обновить HTML высоту холста при прокрутке

0 голосов
/ 25 мая 2020

Я хочу добавить холст для рисования поверх веб-сайта, который растягивается на всю высоту веб-сайта.

Я указал canvas.height = window.innerHeight; canvas.width = window.innerWidth; и, похоже, он работает для области просмотра, но когда я прокручиваю, я не могу рисовать ниже.

Я предполагаю, что мне нужно обновлять canvas.height каждый раз, когда я прокручиваю вниз, но я не могу найти решение .

Вот код: 

window.addEventListener ("load", () => {
  const canvas = document.querySelector ("#canvas");
  const ctx = canvas.getContext ("2d");

//Resizing

canvas.height = window.innerHeight;
canvas.width = window.innerWidth;

//Variables

let painting = false;

function startPosition (e){
  painting = true;
  draw (e);
}
function finishedPosition (){
  painting = false;
  ctx.beginPath();
}


function draw (e){
  if (!painting) return;
  ctx.lineWidth = 1;
  ctx.lineCap = "round";

  ctx.lineTo(e.clientX, e.clientY);
  ctx.stroke();
  ctx.beginPath();
  ctx.moveTo(e.clientX, e.clientY);
}


//Event listeners

canvas.addEventListener ("mousedown", startPosition);
canvas.addEventListener ("mouseup", finishedPosition);
canvas.addEventListener ("mousemove", draw);


});

Буду признателен за любую помощь по этому поводу!

1 Ответ

0 голосов
/ 12 июня 2020

Похоже, это связано с использованием window.innerHeight. Попробуйте использовать document.querySelector('body').clientHeight, поскольку это должно дать вам высоту всего тела страницы.

Также используйте MouseEvent.pageX и .pageY, потому что .clientY не будет обновляться, когда пользователь прокручивает страницу.

...