Your Guide To

Selecting a JavaScript Canvas Library or Framework

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

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

Image for post
Image for post
JavaScript Canvas Libraries and Frameworks :: front pages

he 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.

the dawn of the canvas, the two main libraries were EaselJS (part of the CreateJS suite) famous for remaking the Atari Arcade and PixiJS 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 P5js. A library called PaperJS made its way with code based on Adobe Illustrator. A few other libraries came and went as well. We will also mention Threejs for 3D.

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

List of Canvas Libraries and Frameworks Discussed

  • CreateJS
    EaselJS (BOM and events), TweenJS, PreloadJS and SoundJS
  • ZIMjs
    extends CreateJS with conveniences, components and controls
  • PixiJS
    a 2D canvas / WebGL rendering engine with a BOM and events
  • PhaserJS
    a game framework based on PixiJS
  • P5js
    a JavaScript port of Processing (in Java) for experimental works
  • PaperJS
    a vector graphics scripting framework with Beziers

CREATEJS

CreateJS at http://createjs.com is “a JavaScript library that makes working with the HTML5 Canvas element easy. Useful for creating games, generative art, and other highly graphical experiences.” CreateJS includes EaselJS which gives us the BOM and events to go along with it. PreloadJS lets us preload images, sound and most other assets. TweenJS lets us animate with the power of chaining. SoundJS lets us play sounds.

Image for post
Image for post

Activity over the last couple of years has led to StageGL where WebGL is used to render bitmap-based display objects. Note that many objects can be cached to bitmap to make use of StageGL.

Image for post
Image for post
CreateJS suite of libraries

The library has been very stable since its inception as one of the earliest canvas libraries and became well known making the Atari Arcade with sponsorship by Microsoft. Founder, Grant Skinner, is well known in the interactive media world and has worked with Adobe to make Adobe Animate (formerly Flash) export directly to CreateJS which has helped Adobe publish to the HTML 5 canvas. CreateJS is also considered cached according to Ad Networks so does not count as ad size: http://createjs.com/html5ads/. The stability, support from ad networks and connection with Adobe Animate for vector assets has led to billions of loads of CreateJS.

ZIM

ZIM at https://zimjs.com extends CreateJS and adds conveniences like one-line drag and drop, multitouch gestures, multiple hit tests, style on the canvas as well as components like buttons, sliders, dials, colorPickers, tabs, etc. and controls like adaptive layout, page management, accessibility, parallax, scrollers, swiping, hotspots, grids, guides, motion and gamepad controllers, particle emitters, integrated physics, sound-wave analysis. To keep ZIM slim, ZIM Distill lets you minify only the ZIM code that is used.

Image for post
Image for post

ZIM is a general canvas library and demonstrates remakes of the other canvas libraries projects at an average of 60–80% the code and shown on the ZIM CodePen Topic Page and in the conclusion of the ZIM promo video:

ZIM promo video 2 and promo video 1

The ZIM site has an extensive Learn Section for beginners, mid and advanced with code and video tutorials. There is also the ZIM Skool, ZIM Kids, and the Learn JavaScript with Creative Coding series.

Image for post
Image for post
ZIM Bits :: 64 interactive media technique tutorials

PixiJS

PixiJS at http://pixijs.com is a 2D WebGL rendering engine (with canvas fall-back) that provides and BOM and events to manage interactive media. PixiJS is very much like CreateJS but has focused on speed, WebGL filters and effects. Pixi also provides access for screen readers.

Image for post
Image for post

PixiJS is well known in the Interactive Agency world with “Thousands of award winning sites and experiences being made with PixiJS by leading content authors around the world” and as an extra bonus, the popular PhaserJS game framework is powered by PixiJS.

The team at PixiJS and PhaserJS are very involved in development and are featured in the FITC Spotlight Web Games Conference.

Image for post
Image for post

PHASER

Phaser at https://phaser.io/ is a desktop and mobile HTML 5 game framework for Canvas and WebGL that runs on PixiJS. They have a newsletter with thousands of subscribers and host the HTML5 Game Devs forum. Phaser is certainly the leading game engine in the HTML 5 world with integrated physics, tile maps and other classes specific to 2D gaming.

Image for post
Image for post

Phaser has a large community and many examples broken down into sections. Just watch it… the second tutorial with a TexturePacker Sprite on what’s new at Phaser was rebuilt in ZIM at 63% the size, and that was back in ZIM 7.

Image for post
Image for post

P5js — Processing

Processing has been around for quite some time — it was developed in the Java world to provide a more simple access to Java. It is based on a sketch where you put your code. It has an initialization area and a loop area (much like Phaser). Processing is famous for its access to hardware and has generally been used for coding experiments, art works and physical computing.

Image for post
Image for post

P5js at https://p5js.org/ is a JavaScript port of Processing and continues in the line of educational, experimental art works on the HTML Canvas. For instance, it is rare to see a logo in Processing or a typical embedded mini-site or feature. Usually, the sketch is stand-alone. Perhaps this will change, but this tends to be the culture.

Image for post
Image for post

There is a set of libraries that goes along with P5js to help connect to various other systems. The Interfaces and Play sections are rather limited compared to ZIM and Phaser with a statement such as: p5.play is built for simplicity, not performance. It is designed to be understood and possibly modified by intermediate programmers. It is not a box2D-based physics engine, it doesn’t use events, nor supports 3D. If you are looking for robust (but more complex) game frameworks I suggest phaser.io or easel.js.

Image for post
Image for post

Processing has a vast history of cool data visualizations. These days, most if not all of these can be done in any of the canvas libraries — CreateJS, ZIMjs, PixiJS, PaperJS. It is just a matter of porting over the code.

PaperJS

Paper.js at http://paperjs.org is an open source vector graphics scripting framework that runs on top of the HTML5 Canvas. It offers a clean Scene Graph / Document Object Model and a lot of powerful functionality to create and work with vector graphics and Bezier curves, all neatly wrapped up in a well designed, consistent and clean programming interface.

Image for post
Image for post

Paper comes from an Adobe Illustrator scripting background and works well with Beziers, SVG, etc. Here are some of its features:

ACTIVITY AND COMMUNITY

hat is the community like? PaperJS (235K) is under active maintenance handling issues on GitHub but the code-base has not made much progress in several years. P5js (609K) has a large community and support from its processing base but has pretty well stayed the same. CreateJS (237K) is complete and stable but developers have moved on to other things. Pixi (391K) and Phaser (946k) have huge followings with active development. ZIM (688K) ran out of versions at TEN so has moved to ZIM Cat. It has 21,000 messages in its Slack community and is poised to grow especially in e-learning. So all are doing quite well.

CONCLUSION

he Canvas was launched with HTML 5 and provides a way that we can code Bitmaps with JavaScript in HTML. You can code these directly with JavaScript commands but you would be missing the hierarchy organization, events and all the conveniences that these libraries and frameworks offer and your build time would be longer. Also, the frameworks are well tested.

Image for post
Image for post
Early Metrics Diagram comparing raw canvas, CreateJS and ZIM

If you took a look at coding on the Canvas when it first came out, it has certainly changed and is well worth a second look. Despite what you might think of Flash, it was the leading tool for interactive media for almost twenty years. Many very smart Engineers and Developers have provided countless hours of care in crafting an efficient system that models life. This learning was brought in to the JavaScript Canvas world to provide an excellent base with CreateJS and PixiJS. Certain precautions were also taken to make sure that mobile is considered. CreateJS and ZIM make sure that stage updates are only done when needed, for instance, to conserve processing and battery.

Which Canvas Library or Framework Should you Choose?

to which one(s) to choose, to some degree, it depends on what you like to make. Certainly Phaser targets gaming. PixiJS targets performance and effects. PaperJS targets vector manipulation. P5js targets hardware. P5js is also known for its art but PixiJS, CreateJS, ZIMjs can do the same.

ZIM extends CreateJS to give components and controls on top of a very solid base for general Interactive Media. Certainly do not count ZIM out with respect to 2D games. ZIM features Sprites, Integrated Physics, Particle Emitters, multiple types of HitTests, GamePad / Keyboard controls, integration with A-Star for tile maps, LeaderBoard and Isometric Board classes, Synth for generated sounds, multi-user with ZIM Socket, etc. But ZIM also has many other Interface components — all with leading edge accessibility. ZIM also handles vector manipulation. The front of PaperJS site was easily remade in ZIM. ZIM also provides user interfaces for its paths whereas PaperJS does not. ZIM has industry leading animation and dragging along paths.

So… can you tell which framework was founded by Dr Abstract? ;-)

Further reading

If you would like to see what coding is like on a Canvas Library or Framework then here is ◎ Your Guide to Coding Creativity on the Canvas.

Your Guide to When to Use a JavaScript Canvas Library or Framework will answer why we use a Canvas Library or Framework.

All the best! Dr Abstract.

Image for post
Image for post

Follow us on Twitter at ZIM Learn and here is ZIM Learn on YouTube!

Written by

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

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store