Ask HN: Is there a high level guide to graphics technologies on the web?

As a hobby, I am looking to getting into graphics programming on the web. I understand that this may be a very very broad subject. I am already very comfortable with math (linear algebra, calculus, trigonometry) and not looking to relearn math. The only tools I am going to use are HTML, CSS or JavaScript - so say generating WebAssembly using C is not an option. Some things I wish to create are -

1) Simple 2D games like Tetris 2) Animations of mathematical concepts 3) 3D animations like what was popular in HN few days back (My Room in 3D - https://news.ycombinator.com/item?id=28496650)

I am not looking to create graphics related to data - e.g. d3.js. Doing some investigation, the various technologies are very confusing. What is canvas good for? What are main uses of SVG? Is it possible to do raytracing on the web? What is the future of WebGL and when will WebGPU replace it? Does it make sense to learn libraries like three.js or babylon.js?

Can someone help me with a link to a guide which explains the different technologies and what each is good for?

Thank you in advance.