JavaScript rendering library

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.

The concept of zCanvas encourages Object Oriented Programming, where each custom drawable Object you create for your project should inherit its prototype from the zSprite-"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.

You can play Weltkriegsimulator, a mobile friendly, vertical scrolling shoot 'em up which is built on top of zCanvas and is also open source.

zCanvas is also used by proprietary software providing online image editing solutions aimed at creating high quality, printable products.

Available via npm

npm install zcanvas