SVG, Canvas, & WebGL

SVG and Canvas (2D or WebGL) represent the different ways to create graphics on a web application programmatically.

Unlike Canvas, SVG is based solely on XML, a markup language like HTML. You do not need to use JavaScript to create an SVG image.

On the other hand, Canvas, 2D or WebGL, is based on JavaScript. Games and maps have been developed with Canvas. 

While a canvas lacks many SVG features like object-level event-driven interactivity, a canvas provides per-pixel control of the graphic.

SVG is faster when rendering large objects, but slower when rendering many objects.  A canvas allows you to display the webcam capture, letting you take and save a photo with it.

Covering every language construct, keyword, and function, this book attempts to provide a complete guide to web graphics based on these technologies.

Have fun!

source codes:   https://drive.google.com/file/d/17IBN0IqqwSFSiBmqDx4g5tjuei78lPWj/view?usp=sharing