What is the difference between canvas and webgl, and what is better to learn for 3d animation?

Question

Canvas

I do some development with react. I want to learn how to make beautiful backgrounds, I tried to do it on css platform-jumbotron.herokuapp.com. But I see that it didn’t work out very well, it looks especially bad on safari.
I want to teach something 3d in js. But many variations of canvas three.js babylon.js, webgl. I don’t understand which technology to choose, and is it necessary to learn the framework or can I take native technology?
The task is this:
- fast loading.
- make simple but spectacular backgrounds with 3d animation.

Answer 1

-webgl is low-level graphics programming. It works faster on pure webgl (relative to frameworks), but it is difficult and long to write.
-three.js babylon.js is essentially an API to webgl . those. higher level graphics programming. And here it is easier than on webgl, a low entry threshold, but of course with some overhead.
- canvas - this is what all this is drawn on in the browser.
for me, so clean webgl is needed when you need something complex / fast.