Your Guide To

Selecting a JavaScript Canvas Library or Framework

The canvas is great for games, art and apps in a Browser

Dr Abstract
9 min readJul 21, 2020

--

Welcome readers from ◎ Your Guide to Coding Creativity on the Canvas

JavaScript Canvas Libraries and Frameworks :: front pages

The canvas is a relatively new tag in HTML with a JavaScript API that allows coders to dynamically draw images to display in a Browser. In theory, the canvas is an open source alternative to rich media plugins like Adobe Shockwave (Flash) R.I.P.

The JavaScript canvas API is relatively low level. It allows you to make shapes, text, images, apply blend modes, manipulate pixels and a few other things. It was quickly apparent that helper libraries would be needed to replace Flash.

Brief History of the Canvas Libraries and Frameworks

A caveat… Dr Abstract happens to be a founder of a JavaScript Canvas Framework. Let’s see if you can guess which one by the end of the article.

At the dawn of the canvas, the two main libraries were EaselJS (part of the CreateJS suite) famous for remaking the Atari Arcade and Pixi.js out of the United Kingdom. Both these were made by former Flash developers who have generously upgraded twenty years of Interactive Media knowledge to the world of mobile.

Each library provides a hierarchy system of containers that is called a Display List in Flash, a scene graph in gaming and a Document Object Model (DOM) in HTML. For the canvas, which is a bitmap, we could call it a Bitmap Object Model or a BOM. Apparently there is a Browser Object Model but this is not official so we will endearingly use BOM for Bitmap Object Model.

Processing, a Java Code Sketching environment often used for generative art and science experiments, was ported to the canvas as P5.js. A library called Paper.js made its way with code based on Adobe Illustrator. A few other libraries came and went as well. We will also mention Three.js for 3D.

What we might call Canvas 2 happened where the wildly successful Phaser game framework was built on top of Pixi.js. What was missing was a general canvas framework with components. This role was filled by ZIM which was built on top of CreateJS.

--

--

Dr Abstract

Inventor, Founder of ZIM JavaScript Canvas Framework and Nodism, Professor of Interactive Media at Sheridan, Canadian New Media Awards Programmer and Educator