Update canvas when scrolling

p5.js Coding Questions
1

I have elements in the dom and I draw certain overlays using a canvas.
The problem is that often the render of the dom happens before the canvas is updated and therefore they are not in sync:
16

Is there any way to make sure the canvas is updated after a scroll before the browser does a repaint?

1 Like
2

Not sure on the specifics how the browser handles this, but p5.js uses requestAnimationFrame for updates AFAIK and with that the browser is in control as to when the update really happens. Here’s some info on requestAnimationFrame: https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame.
Is there no way to do the overlay with CSS? If it only renders borders…

1 Like
3

I disabled smooth scrolling for the browser and use my own tween function to decide the scroll position.