Multiple overlapping threejs webgl elements

The problem with multiple WebGL contexts In web-based data visualisation applications, a common UX design is to have multiple cards (each card is a html <div> element) each containing a graphical representation of a different aspect of the data. If the plot is a view of a 3D surface, or involves thousands of data points, it is natural to use WebGL. This is most easily achieved by adding a <canvas> element as a child of the card <div> and making this a WebGL context. Unfortunately, browsers limit the number of available WebGL contexts (a limit of 16 is common), so, if you want more cards than that, another strategy is required.