The Spine Web Player is designed to display a single skeleton per player instance, which means each SpinePlayer instance creates its own canvas for rendering. As you've observed, creating multiple instances for different skeletons results in multiple canvases, which can lead to performance issues, especially on mobile devices where the limit to the number of WebGL contexts (which are used by canvases for rendering) is lower.
To display multiple skeletons within a single canvas, you would need to use one of the Spine runtimes (like spine-ts or spine-webgl) instead of multiple Spine Web Player instances. These runtimes provide more flexibility and control, allowing you to render multiple skeletons to the same canvas. This approach requires more setup and management of the rendering loop, but it can significantly improve performance by reducing the number of canvases and WebGL contexts.
For example, the spine-ts or spine-webgl runtime allows you to load multiple skeletons and manage their animations, rendering them all within a single canvas. This approach is more efficient but requires a good understanding of the runtime's API and manual management of the animation states, rendering loop, and canvas size.
Unfortunately, there's no built-in feature in the Spine Web Player to merge multiple canvases into one directly in code due to its design to handle a single skeleton per player instance.
