In old days of browsers, Flash/Silverlight likes plugins were used to support rich graphics in browsers.
With HTML5, the platform gets native support for the two types rich contents:
In this post, our focus will be the Canvas.
The source code is available from the this git repo.
I will be using an existing angular application and if you are following along this is the same code base from my other angular articles.
Unlike SVGs where we have a mathematical description of the shapes and therefore we can scale them, rasterized images have a set resolution.
Canvases are good choices for animations, game graphics, sketching tools and image manipulation application.
It is lot easier to generate images with canvas, which are difficult to define upfront.
Following are few key points about the HTML-5 canvas:
- An HTML5 canvas is like a real-world canvas, but it is more powerful.
- It can be used for static as well as moving contents (e.g. games).
- Canvas is pixel based, means, you draw pixels on it (so not scalable, contents get fixed size).
- Canvas itself is a simple look-less HTML element (no visual representation on its own).
- Very often browser allow the GPU of the PC to render the canvas and this is for performance reasons.
Starting with Canvas
To start with I’ve created a component using Angular CLI, this component will encapsulate our demos for canvas: