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
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.
List of Canvas Libraries and Frameworks Discussed
- CreateJS
EaselJS (BOM and events), TweenJS, PreloadJS and SoundJS - ZIM
extends CreateJS with conveniences, components and controls - Pixi.js
a 2D canvas / WebGL rendering engine with a BOM and events - Phaser
a game framework based on PixiJS - P5.js
a JavaScript port of Processing (in Java) for experimental works - Paper.js
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.
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.
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.
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:
Here is a Comparison Chart with ZIM at 37% the code!
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.
Pixi.js
Pixi.js at http://pixijs.com is a 2D WebGL rendering engine (with canvas fall-back) that provides and BOM and events to manage interactive media. Pixi.js is very much like CreateJS but has focused on speed, WebGL filters and effects. Pixi also provides access for screen readers.
Pixi.js is well known in the Interactive Agency world with “Thousands of award winning sites and experiences being made with Pixi.js by leading content authors around the world” and as an extra bonus, the popular Phaser game framework is powered by Pixi.js.
The team at Pixi.js and Phaser are very involved in development and are featured in the FITC Spotlight Web Games Conference.
PHASER
Phaser at https://phaser.io/ is a desktop and mobile HTML 5 game framework for Canvas and WebGL that runs on Pixi.js. 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.
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.
P5.js — 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.
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.
There is a set of libraries that goes along with P5.js 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.
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, ZIM, Pixi.js, Paper.js. It is just a matter of porting over the code.
Paper.js
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.
Paper comes from an Adobe Illustrator scripting background and works well with Beziers, SVG, etc. Here are some of its features:
ACTIVITY AND COMMUNITY
What is the community like? Paper.js (235K) is under active maintenance handling issues on GitHub but the code-base has not made much progress in several years. P5.js (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
The 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.
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 Pixi.js. 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?
As to which one(s) to choose, to some degree, it depends on what you like to make. Certainly Phaser targets gaming. Pixi.js targets performance and effects. Paper.js targets vector manipulation. P5.js targets hardware. P5.js is also known for its art but Pixi.js, CreateJS, ZIM 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 Paper.js site was easily remade in ZIM. ZIM also provides user interfaces for its paths whereas Paper.js 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.
Follow us on Twitter at ZIM Learn and here is ZIM Learn on YouTube!
