Brief History of the Canvas Libraries and Frameworks
At 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
EaselJS (BOM and events), TweenJS, PreloadJS and SoundJS
extends CreateJS with conveniences, components and controls
a 2D canvas / WebGL rendering engine with a BOM and events
a game framework based on PixiJS
a vector graphics scripting framework with Beziers
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 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:
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.
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.
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.
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.
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.
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.
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.
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? 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.
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. 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? ;-)
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.
All the best! Dr Abstract.