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.

--

--

Jawadhasan
Jawadhasan

Written by Jawadhasan

Software Solutions Team Lead | Cloud Architect | Solutions Architect

No responses yet