CutJS is lightweight, fast, interactable 2D HTML5 rendering engine for cross-platform game development, it can be used for creating games for web, iOS, Android, Win8, Facebook, Chrome Web Store, etc.

CutJS is an open-source Canvas library inspired by DOM and jQuery with a new concept called pinning introduced instead of styling.

Examples and Demos add

  • Loading...

Projects using CutJS add

  • Loading...


Canvas is the graphic component of HTML5 game development, but it only has drawing API and no data model like DOM to compose your app; you have to manually draw your app and manage rendering cycles to play it. Moreover, mouse events are only available at entire Canvas level and they also need to be processed manually.

CutJS provides a DOM-like tree data model to compose your app and internally manages rendering cycles and drawing of your app, it also processes and distributes mouse events to targeted tree nodes.

How it Works

A CutJS app consists of a tree of nodes, each node is pinned (transformed) against its parent and have zero, one or more image cutouts (sprites). Image cutouts comes from either image textures or Canvas drawing.

Each rendering cycle consists of ticking and painting the tree. On ticking nodes adjust themselves to recent updates and then on painting each node transforms according to its pinning, pastes its cutouts and then delegates to its children.

Rendering is retained and is paused in each cycle unless/until it is touched directly or indirectly.

Sample Code edit


API Doc edit



Copyright © 2013-2014 Ali Shakiba and other contributors
Available under the MIT license