Graphics on Web: Canvas Web API

A basic introduction to Canvas API to draw 2D/3D graphics on Web

In this article, we are going look at the basics of Canvas Web API provided by the browser to draw 2D/3D graphics natively on the web.

Uday Hiwarale
JsPoint
Published in
24 min readOct 14, 2020

--

(source: unsplash.com)

I wanted to keep the title of this article “Why every web developer must know Canvas API?” but then decided not to because to be honest, we don’t use Canvas API that regularly or in most of the cases, ever. But Canvas API, in my opinion, is least explored, however, it can do pretty amazing things. First, let’s understand what Canvas API is and what it can do for us.

(source: pixabay.com)

Take a look at the above image. What do you see? You see a canvas on which you can draw (or paint) something. It has a background color, in this case white, and proper width and height. You can’t paint beyond these dimensions since there is nothing to paint on. If you need a red background for your entire painting, then first you need to paint the entire canvas red.

Most modern web browsers give us the canvas HTML element that constructs such a canvas, but on

--

--