Blitting pixels

zCanvas is a lightweight JavaScript library that provides an OOP-style solution for working with HTMLCanvas drawables as if they were tangible / interactive, separate objects.

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.

zCanvas has been written in vanilla JavaScript and thus works independent from (and should work with) any other JavaScript framework.

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