Object Not Rendered When Panned out of Viewport then Set Within It

[chonigman]

Hey y'all.

So I'm working on a real-time collaborative drawing app. One feature is to have a ghost cursor (a fabric.Circle object) that will show you where the other users' mice are on the canvas. An issue I'm having is that when you zoom and pan your viewport away from where another user's cursor is, it does not get rendered when it moves into your new viewport area. It will eventually show up when you zoom in/out.

Another feature was exhibiting similar behavior as well. This one is a sort of tool tip that shows the current stroke width and location of where your cursor tip is (in the app we are using a pencil icon). I need this tool tip to disappear when the mouse exits the canvas and then reappear when the mouse enters when the user is in "drawing mode". This mostly works except for sometimes the tool tip does not reappear unless you leave and exit the canvas again or change the zoom. This specifically seems to happen when you pan the screen far enough that the last set position of cursor tip is outside the viewport.

Both situations seem to have the same problem. The object being rendered is no longer in the viewport and even after it is moved into the viewport and canvas.requestRenderAll is called it does not show up.

I made a JsFiddle to showcase the latter situation as I wasn't sure how to do a Socket/RealtimeDB enabled version of the real-time multi-user situation. Now, in writing this I've realized that for the tool tip situation I can actually keep updating the position despite being in pan mode and then just turn on the opacity in draw mode, however, it does illustrate the same problem as the multi-user mouse position indicator so I'll let it as is for now.

I'm really not sure why it's not rendering the object's in the updated position despite having made the render request. I've also tried canvas.renderAll but the same issues persists.

I should also note that when console.logging the tip/circle object, it seems like it is in the right position but for whatever reason it is not rendered on the canvas.

Thanks in advance for your help.

https://jsfiddle.net/chonigman/a7Lsoj3b/80/

[asturur]

The object is probably not rendered becasue is considered out of the viewport.
You can disable this behaviour by setting:

canvas.skipOffscreen = false;

But i would rather trying to udnerstand what are you doing that fabricJS does not like.
From your fiddle i cannot replicate the issue.

[asturur]

maybe i m blind, but i would need a minimal set of actions to reproduce the issue. I don't follow.
Like a 3 bullet point list to follow.
Cut the fat until the problem is reproducible in 3 simple steps.

[chonigman]

I'm sorry but it's more than 3 steps but here are the steps.

1. Click draw
2. Zoom in (with mouse scroll on canvas) - red dot cursor indicator is visible
3. Click Pan
4. Drag/pan so that the current viewport is moved completely out of view
5. Click draw
6. Mouse over the canvas - red dot cursor is not visible.

[chonigman]

For now I have set canvas.skipOffscreen = false which seems to work. I don't know if this will impact rendering time in the long run as the canvas is large and could have many lines but it's probably going to be fine.

[chonigman]

I am noticing when there is a lot of lines drawn on the canvas and I zoom the render time is growing quite long. When I turn skipOffscreen back on the render time is very fast again, but then still having issues with objects outside of the viewport that are moved into the viewport not appearing.

[chonigman]

I've updated the the fiddle with the cursor indicator that is created at top: -10, left: -10 and should update and move to the mouse position on mouse move. however, you will see that the red circle does not appear. it only appears when you zoom in with a mouse scroll, or select pan and click+drag the viewport. I've removed the code that sets the red cursor indicator's opacity so that it's a little more obvious what's going on. Once you see the red dot and pan it offscreen, click draw, and try drawing the red dot does not appear even though it's position is being updated.

https://jsfiddle.net/chonigman/a7Lsoj3b/84/

Basic Issue

1. Click Draw
2. Free draw on canvas (no red dot appears)
3. Zoom in with mouse scroll (red dot appears)

Cause Red Indicator to disappear Again (continue from above)
4. Click Pan
5. Click+drag the viewport until the red dot is out of view
6. Click Draw
7. Free draw (no red dot)
8. Click Pan and pan the screen or zoom to cause red dot to appear