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.
- Simple shapes such as lines, rectangles and circles.
- Complex shapes created from lines, arcs and curves.
- Various line and fill styles for drawing shapes including gradients, dashes and patterns.
- Positioning text and images.
- Tranparency, shadows and clipping.
You can also interact with the mouse to create dynamic graphics, for example selecting, dragging or drawing on the canvas.
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.