Does the picture jump at the beginning of the scroll?

Question

css

I wrote some code to zoom in on my image, but when I scroll, the image jumps a little at the very beginning. How can I fix this?
Here's what it looks like on the whole page.
Sandbox with code.
HTMLJS
<canvas id="canvas"></canvas>
_

function draw(scroll) {
  scroll = (window.scrollY || window.pageYOffset) / (document.body.clientHeight - window.innerHeight) * 3000;
  canvas.setAttribute('width', window.innerWidth);
  canvas.setAttribute('height', window.innerHeight);

//Главная функия, отвечающая за прорисовку
  drawImageProp(ctx, forest, 0, (-scroll * 3.9) / 4, canvas.width, canvas.height + (scroll * 3.9) / 2);
}