Why is WebGL slower than Canvas?
I just started playing with canvas and webgl, read the article, etc. and as far as I know WebGL should be much faster than canvas, but in these following tests it is remarkably slower:
I run them in Chrome and Firefox, the difference was around 80% in both browsers.
Why does canvas render faster? Is jsperf imprecise? Is canvas improved in browsers?
(PS: I am not the author of the tests, I found them.)
source to share
The short answer is that webgl / opengl is not designed to draw a single quadrant at a time. GPUs are designed for massive parallelism and thus, to get the most out of webgl, you should paint in batches.
You have to compare pictures of 10k images in canvas and drawings of 10k images in webgl using the corresponding webgl implementation. However, most of the webgl libraries you find are written for client convenience, but not necessarily for maximum performance.
My 2d webgl renderer implementation is much faster than canvas (100 times +), especially if you need to rotate / scale images. And of course, if you want your own blending operations, then webgl is the only way to go.
source to share