In C / C ++, OpenGL has a beautiful library for tessellating complex polygonal shapes into triangular stripes and fans. This library is a "GLUtesselator".
Is there a library with equivalent functionality for WebGL (HTML)?
Three.JS uses the triangulation function to render text into polygons. It is not publicly disclosed, but appears to be fairly easy to extract . In fact, it appears as THREE.Shape.Utils.triangulateShape .
GLUtesselator ported to javascript by Brendan Kenny on Google Maps. Here's a link to libtess.js on github .
Vladimir Agafonkin (leaflet.js, Mapbox) recently developed earcut.js, which is currently "the fastest and smallest JavaScript polygon triangulation library for your WebGL applications". Here is the github link for earcut.js .
I had the same problem (in HTML Canvas with Box2D forms) and I tried using the Three.js triangulation function, but it was much easier for me to use this really good library: https://code.google.com/p/poly2tri/
The JS implementation exists and works fine for me: https://code.google.com/p/poly2tri/source/browse/?repo=javascript#hg%2Fsrc
There are several libraries for this. What you use also depends on the quality of your data. Some libraries break up into duplicate points, self-intersecting polygons, or other data inconsistencies.