HTML5 introduced a new HTML element called a canvas. A canvas is placed on the page in a similar way to any other element such as an image or a div element.
However, the unique feature of the canvas is that you can use Javascript code to draw on it. The canvas has a comprehensive set of drawing commands including:
You can also interact with the mouse to create dynamic graphics, for example selecting, dragging or drawing on the canvas.
Animation is also possible, using standard JavaScript animation support (requestAniFrame).
There are also numerous libraries built on top of the canvas to provide scene based animation, more complex mouse interactions, 3D drawing, tweening and games.
This tutorial assumes you understand basic HTML and a bit of Javascript (although if you have programmed in other languages you will probably be able to muddle through).
Copyright (c) Axlesoft Ltd 2021