vitrage | Page content management system for Rails | Content Management System library

I've got a canvas that has an array of objects, these objects are positioned and added to the canvas. Each object has a matching DOM element that triggers a tooltip. This element is placed exactly on top of the canvas object.

On desktop this works fine since the background image is always filling the screen and there is no scrollbar. But on mobile I have a horizontal scrollbar so users can scroll left and right on the image (else it will become to small).

The problem is, the DOM elements that are positioned on top of the fabric objects stay in their spot according to where the objects are without any scrolling, when I scroll horizontally, the DOM elements keep in their same spot.

I made a video on my phone that shows this: https://streamable.com/xn1t2i Dots with circle are the DOM elements outside the canvas that are placed on the canvas objects (blue dots without circles).

So I thought of the following solution: put the entire script inside a function, and call that function on an event, like: touchmove this however is very slow and shows a lot of flickering when moving around. So I tried touchend but this also is pretty slow and also triggers the function when clicking the tooltip.

Example video of touchmove: https://streamable.com/708d2s As you can see the dots do get repositioned, but way too slow and if the scroll drags on a bit too long, the dots get mis-aligned again.

I've also tried scroll but this didn't work at all.

This is my code at the moment:

javascript:

I am trying to create a canvas that is wider than my mobile screen, users can drag right and left to see the rest of the canvas. But for some reason dragging does not work from inside the canvas.

If I below it (outside the canvas) the page can be dragged left and right, but not inside the canvas. How can I fix that?

Ideally I just want a scrollbar inside the canvas so people can drag left and right on mobile, whilst it doesn't increase the entire page width.

I tried setting overflow:scroll on the canvas but I still couldn't drag it. I also added pointer-events: none;, this allows dragging while focused in the canvas but drags the whole page, not just inside the canvas.

What can I do?

Snippet:

I'm trying to create seeds.rb for specific vitrage gem. I have working prototype for simple title element: