Time Visualizer render with canvas or WebGL (PIXI, threejs)?

[larskarbo]

Hi,

I made a web-app for planning and visualizing time segments.

It looks like this in action:

 

I do all the calculations in pure Javascript, and had to write a lot of code to code all the shapes make hit detection work for all shapes. I am drawing all elements in HTML5 canvas.

I am looking into refactoring the codebase and adding more features. In that case I am wondering if a library rendering to WebGL would help me?

Things I want:

• Easy way to prevent text overlapping
• Easy way to add small animations and slick effects
• Smooth animations with more complex and advanced shapes than in the video.

The bottleneck is when animating the shape, and then the JS have to calculate all elements every frame, but would WebGL help with that?

This is a non-trivial usecase, and I think it may be best to just use pure JS and canvas, but to be honest, I don't really know how WebGL works, and in what way it helps.

Any WebGL heads here?