HTML5 — Canvas Basics (with Angular)
Introduction
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:
- Canvas
- SVG
In this post, our focus will be the Canvas.
I’ll be using Angular for JavaScripting, however the concepts are same if you use some other JS frameworks (React, Vue etc.) or just the plain JavaScript.
The source code is available from the this git repo.
Setup
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.
Canvas
Canvases are JavaScript based technology. Canvas can be used to create 2D and 3D (WebGL) rasterized images.
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.
