HTML Canvas
The HTML Canvas is a highly flexible element that can be used to display 2D and 3D compositions. Drawing of text and shapes, along with styling options, are provided by the Canvas API.
Gradients
Gradients are a great way to bring depth to a flat surface and have a lot of customisation potential.
Gradient Animation
Gradients Can be animated to create interesting effects, like this example that animates the radii sizes of each colour step of the radial gradient.
Interval Animation
Interval Timers are great tools for performing repetitive tasks, like animating a basic canvas composition.
Image Animation
Canvas can display and animation images to create dynamic multimedia compositions with JS.
Spiral Animation
Animation of a spiral created by not refreshing the canvas, and tracing a path.
Face Animation
Animation of a cartoon face by refreshing select parts of the canvas.
Mouse Input
Mouse Input can be used to dictate canvas drawing. By fetching the location of a mouse click on the canvas we can draw markers in the event's location.
Partial Clear Animation
Instead of fully clearing the canvas between animation frames, we can leave some of the previous frame to achieve a fading effect.