Home

Cannon is a javascript framework that helps you create stuff with the HTML5 canvas. It focuses on 2D graphics, and is fully object oriented.

Before you start reading anything else, you might want to have a look at the Getting Started page.

This wiki holds the full documentation, but the source code is well documented too. Apart from the list of objects and their functions, you can read about a few core concepts here :

• How Cannon uses objects and inheritance, and how you can too
• What are packages, how to use them and create your own
• Cannon uses custom events, and they rely on the Cannon.Event object
• How to see what happens between the lines, and log your own stuff

Core objects

THose are absolutely necessary to Canvas. Everything else relies on them, so it's a good idea to know how they work.

• The Cannon core object acts as a bootstrap to get eveything else ready
• Cannon.Utils provides a set of utility functions
• The the Cannon.ChildSystem is used a lot when it comes to displaying stuff inside the canvas
• Cannon.Canvas creates and enhances the HTML5 canvas
• Everything displayed inside the canvas inherits from Cannon.DisplayObject - a must read.

Other core classes are used inside the framework, but you don't really have to worry about them. In case you do though :

• Cannon.Event is the object that allows the use of custom events
• Cannon.Context holds utility functions and constants related to the CanvasRenderingCOntext
• The (Cannon.LoadingSet)[https://github.com/y-lohse/Cannon/wiki/Cannon.LoadingSet]... loads stuff.
• The Cannon.Logger logs a lot of things

DisplayObjects

Odds are, you'll want to draw some stuff to the canvas first. Check out thepage about the Display Package and all objects it contains.

When dealing with shapes or texts, you'll want to apply some kind of color to them. To help you with that, check out the following :

• Cannon.Color is the simple objet representation of an rgba color, and can be created from pretty much any kind of string describing a color
• Gradients are cool made easy too : see Cannon.Gradient and its childrens
• Heck, Patterns are covered too.