HTML5 — Canvas Basics (with Angular)

Jawadhasan
8 min readOct 12, 2023
Photo by Jan Kopřiva on Unsplash

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.

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).
  • All drawings on canvas are done using JavaScript.
  • 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:

--

--

Jawadhasan

Software Solutions Team Lead | Cloud Architect | Solutions Architect