# Update canvas when scrolling

**URL:** <https://discourse.processing.org/t/update-canvas-when-scrolling/16160>\
**Category:** Coding Questions\
**Created:** [December 5, 2019, 6:14pm UTC](https://discourse.processing.org/t/update-canvas-when-scrolling/16160 "2019-12-05T18:14:01Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![clankill3r](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/clankill3r/32/1098_2.png) [@clankill3r](https://discourse.processing.org/u/clankill3r)\
**Post date:** [December 5, 2019, 6:14pm UTC](https://discourse.processing.org/t/update-canvas-when-scrolling/16160/1 "2019-12-05T18:14:01Z")

</div>

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](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/6/6bed14a9c8ac6e281df386cbe2b50ec8669be614.gif)

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

---

<div class="post-metadata">

**Author:** ![manno](https://avatars.discourse-cdn.com/v4/letter/m/a6a055/32.png) [@manno](https://discourse.processing.org/u/manno)\
**Post date:** [December 5, 2019, 8:01pm UTC](https://discourse.processing.org/t/update-canvas-when-scrolling/16160/2 "2019-12-05T20:01:11Z")

</div>

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](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…

---

<div class="post-metadata">

**Author:** ![clankill3r](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/clankill3r/32/1098_2.png) [@clankill3r](https://discourse.processing.org/u/clankill3r)\
**Post date:** [December 12, 2019, 8:42am UTC](https://discourse.processing.org/t/update-canvas-when-scrolling/16160/3 "2019-12-12T08:42:07Z")

</div>

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