Where the children in an HTMLElements "display list" are nicely visible as stacked separate tags, the pixels on a canvas-element remain out of bounds. zCanvas provides a means to work with a similar stacked display list, add interaction events to individual Objects, as well as supply utilities such as dragging, applying constraints to movement and collision detection.
zCanvas will provide an API that takes care of all animation and update logic you'd associate with, for instance, a game loop. However, the rendering logic (i.e. the "drawing" of the visual content) can be as low level as you'd like, by drawing straight onto the canvas using the browsers CanvasRenderingContext2D-API.
A matter of class
The concept of zCanvas encourages Object Oriented Programming, where each custom drawable Object you create for your project should inherit its prototype from the zcanvas.Sprite-class. You'll find you'll usually only have to override two methods: one to update your Objects properties and the other to draw/render its contents.
What are some use cases?
zCanvas is good for lightweight game engines and is mobile friendly as it is optimized for squeezing the most out of your CPU, relying on optimal use of resources and working well with touch events; as such zCanvas can be an excellent engine for creating mobile web games.
And some example usages ?
Game wise, you can play Weltkriegsimulator, a mobile friendly, vertical scrolling shoot 'em up or Drunk Dragon vs. the Drag Queens which is a classic style RPG. Both are built on top of zCanvas and are also open source.
For more graphics crunching, you can also use BitMappery, an online image editor.
Available via npm
npm install zcanvas