Skip to content
Igor Zinken edited this page Dec 29, 2023 · 26 revisions

Welcome to the zCanvas wiki!

In this wiki, the API for each of the zCanvas classes is highlighted while we additionally delve into some use cases showing real world usage of the library.

An introduction

This page documents the generic outline for using zCanvas by briefly describing the actors, you can refer to their dedicated Wiki pages for more documentation on their API.

Core actors

A Canvas is the root of your zCanvas project. It is basically a wrapper for the HTMLCanvasElement that provides an API to work with drawable content and interaction events.

A Sprite can be seen as a "drawable", in other words : an object that has a visual representation. This can be a photo or graphic, or - in the context of a game - a bullet, character, etc. Sprites are children of the Canvas in a concept known as a "Display list", which is a hierarchical list of visual objects. Not only the Canvas maintains such a list, but Sprites themselves can have a display list (containing other child Sprites).

A sprite is only visible when it is present on a Display List (either directly on the Canvas or in the list of another parent Sprite). Sprites that are added before other sprites (and thus are at a lower index in the display list hierarchy) are visible BELOW the sprites that are at a higher index to provide a convenient layering system.

Interactions

User interactions (such as mouse- or touch actions) are monitored by the Canvas instance. If an action applies to a Sprite (for instance if the user clicks/touches the Canvas and moves the cursor/pointer across, the Canvas will check whether a Sprite is present at the coordinate of the action and delegate the movement to the Sprite (for instance to update the Sprite's coordinates according to the pointer movement when dragging).

User actions are NOT assigned by adding listeners to sprites, but by overriding the built-in event handling methods of the sprite class (see Sprite event handlers).

For additional interactions (for instance checking for collisions between objects, or pixel walking for extreme precision in collision detection) see the dedicated page on collision detection.

API

Legacy API / migration guide

For users of zCanvas version below 6.0.0

Use cases