You're referring to HTML5's canvas tag, right?
Definitely you can get a very quick introduction to it on w3schools at:
More detailed documentation is available from:
I practiced with various independent examples to get better at the canvas API. That worked for me and could work for you too. Sharing your examples on Sololearn's Code Playground so others see it might also boost your motivation like it did for me.
Here are some codes I published that heavily use canvas. I'll also comment on why I made them and what they uniquely demonstrate about the power of the canvas API:
- https://code.sololearn.com/WkjYmMJ025jn/ - Eye Poke Simulator. It draws an eye on a canvas using 2D context. It uses some gradients that were new to me when I made it and made the eyebrow, shadows... look smoother.
- https://code.sololearn.com/WvW556P3kzwK/ - 3D Wireframe Spheres. It draws 3D shapes but still uses the canvas's 2D context. It demonstrates that you don't really need WebGL to create a 3D experience.
- https://code.sololearn.com/WVhoMHzy3K81/ - Sololearnski Fractal Viewer. It draws fractals on a canvas using 2D context. It includes a feature for downloading the canvas image to a png file. I used the png download code to make a video at https://www.youtube.com/watch?v=6oTEzDDTsnU
- https://code.sololearn.com/WiH4n0rrvD1B/ - Mandelbrot Zoomout Using Shaders. It uses canvas's webgl context and shader code to very quickly draw the mandelbrot fractal. I made it to investigate a potential optimization that might make the Sololearnski Fractal Viewer perform better.
- https://code.sololearn.com/WqG6xi6CqDrm/ - Rotating Earth 3D. This doesn't use the Canvas API directly. It uses a graphics library called threejs that indirectly uses canvas and WebGL. That example shows how to use threejs but also that the underlying canvas API is powerful enough to support texture mapping, 3D lighting...