Fabric.js: Is there a maximum limit for drawing objects

[jrs320]

When I draw about 1000 objects, I can't draw them. It's on the mobile phone

[asturur]

Probably try to disable caching, many objects creates a lot of offscreen canvases and eventually you hit some memory limit.

[jrs320]

thx,
Is it right to use fabric.Object.prototype.objectCaching = false to disable caching?
It doesn't seem to work

[asturur]

it should work, at any point in time, unless some objects have their own property defined. Also some drawing requirements require cache to be active ( clippath at least )

[jrs320]

oh, Yes，All objects i drawed have their own property defined,In this case, what should be done to disable caching

[asturur]

if you defined objectCaching: true for each object, you need to go over each object and set objectCaching: false.

[jrs320]

Thk,
i don't defined objectCaching for object, defined other property.
May be i wrong understanded what you mean, my english is poor.
May be i should show you problem with video.
I'm in pain
refresh h5 page,it can draw them again,o my god

[juzhiyuan]

@jrs320 deepl.com may help you.

[asturur]

Following the issue template also would help right? Put 1000 objects on a canvas and show the problem.

[jrs320]

use the follow code can draw object again:
canvas.clear()
canvas.dispose()

[jrs320]

I need to draw a picture that might be 5000px long, but on the phone if it's in a 5000px long canvas drawing objects, when there are a lot of objects it is very stuck, in order to optimize performance, I used 10 canvas seamlessly Stitch together a 5000px area and scroll the area to draw objects, even on low-end Android phones. up also very smooth. After the painting will cache json, the next time you come in to reload the last object painted, when repeatedly loading the 1000 object After multiple times it won't load out and you need to refresh the page for it to work. Is it because I'm using 10 canvas?

[jrs320]

@juzhiyuan thank you, very good website

[asturur]

Can you explain better this 5000px long? If you do not disable retina on basically any phone 5000 becomes 10.000 and a lot of memory starts to go away.

ideally you make the canvas as big as the screen, never more, and then use virtual scrolling in order to move around the content.
If you need to to export then a big picture, fine you export with a scaling factor.

This seem a recurring question/problem that could deserve a small tutorial.

[jrs320]

Thank you

Yes, I'm currently working on an application where I'm going to draw something very long, draw a screen and then scroll to continue drawing, maybe 5000px long.

As you said, I'm currently using a canvas as big as my phone screen to draw on, and when I scroll to the next screen after I'm done, I still need to use the canvas to render what I've drawn before, so I'll have a total of maybe 10 canvases.

If I don't use the canvas to render what I drew before, when I scroll to see what I drew before, how can I render it, or scroll back to modify what I drew before?

What's a better way to do this, it's a bit tricky because you have to record the current position of the canvas in order to show exactly what you've drawn when you scroll!

[asturur]

i m not sure what are you drawing, but if your drawing is 50.000 pixel long, there is no problem on displaying it on a 1080x1920 canvas, vertical ( for example ) and draw one piece at time, emulating the scroll using the viewport transform as done here:
http://fabricjs.com/fabric-intro-part-5#pan_zoom

[jrs320]

Thank you, but that doesn't seem to be what I'm looking for.

[asturur]

Let me know if you manage to mock up a code sample in jsfiddle.