Fabric.js Clipped Sprite Efficiency Against Individual Images

Question

I intend to have a FabricJS canvas that will display potentially dozens of different graphic elements that can be served as separate image files or sprites. For each graphic, it is possible that a specific graphic file will be displayed on the canvas 0 to dozens of times. I know that FabricJS has the ability to clipping , which would allow the use of sprites, and I know that, generally speaking, sprites on the Internet are very preferable over individual images, for example, for CSS.

However, I also heard about the browser behavior / quirks surrounding the canvas, where some of the optimizations you might expect are not - I cannot find the link at the moment, but I remember how large elements of the canvas contents will be inaccessible to view in Chrome, it will still take a considerable amount of time to be computed / “visualized”, despite the fact that it is not related to the appearance on the screen.

So, are there any known expectations as to whether n individual uncroped images would be preferable / not available for a sprite that was cropped n times for FabricJS canvas? In case it matters, it will not be a heavily animated FabricJS canvas; things can move when dragging, for example, but constant animation is not what is involved in this case.

Answer 1

Just do the test yourself to find out what slows down your PC. It depends on the PC and browser and video card.

I don't know anything about Fabric.js, but computer processors and graphics cards can easily handle clipping / graphic manipulation. You do not show millions of polygons, such as a 3D game, so you should be fine.

Here's a website that explains how CSS sprites vs and individual images work: https://medium.com/parlay-engineering/emoji-at-scale-render-performance-of-css-sprites-vs-individual-images -f0a0a2dd8039