The graphic module contains a set of classes extending HTML 2D canvas API. It include matrix manipulation, graphic scope management, graphic cache and tools for improve performances.

drawable objects

All drawable object inherit from GraphicObject. This class contain some methods for manipulate Matrix and set general graphic properties.

Tumbleweed provide two object categories: Shape and Sprite.
Sprites are used for draw an image or a part of image.
Shapes are dedicated to rendering forms like rectangles or Circles.

For drawing animated image, the AnimatedSprite class is available, using SpriteSheet.

graphic scope & matrix transformation

Although it's possible to draw a GraphicObject directly by passing a canvas context, the most easy way is to use Window and Layer.
A layer is a graphicalObject which can contain others graphical objects. The interest is to add matrix transformations and share them to many objects.
Window is a special layer keeping a reference from a HTML Canvas Element.

performance

For improve graphic performances, two way are possible: draw less objects each time or draw less often. The graphic module contain methods for reduce both number of redraw and useless draw.
The first point is treated by the cache management, provided by Layer and Window classes. After a first draw, a canvas cache is kept in memory for don't redraw until object has changed.

The second point is the purpose of the class SpatialContainer, used by Layer and Window.

Each SpatialContainer check for draw only a part of all objects, and not try to draw objects which are not in the screen. Because different type of scenes exist, each container is adapted to specific context.