Canvas2D Home General Purpose Documentation

Few useful links

Please check the GitHub main page of the Canvas2D library, there's a bunch of useful information out there.

For a first-time learning tutorial go there.

To learn about the Design and Architecture of the Canvas2D go there.

To learn how to develop your own Primitive type, it's here.

General concepts overview

This section contains useful links for you to get started on different concepts that are useful to grasp.

• Class hierarchy diagram
• Overview of the Canvas2D type
• Using the Canvas' Design Size to work with a predefined surface size.
• How Visibility works
• How Z-Order works
• Using the origin of a Primitive
• How rendering is working. Rendering Chain, Cache modes, Render Modes (Opaque, Alpha Test, Transparency)
• How positioning, transformation and hierarchy work.
• How to use the Layout Engine, alignment and Margin
• How to interact with Primitives.
• How to work with the Primitive Collision Engine (PCM)
• The particularities of a Shape2D based Primitive type and how to use Brushes.
• How to use AtlasPicture to store/pack many pictures into a big one.

Overview of the different primitive types

• Base Primitive type, all primitive derive from this type.
• Group2D, define a new frame of reference, have the ability to cache its content for performance sake.
• Text2D
• Sprite2D
• Shape based:
  • Rectangle2D
  • Ellipse2D
  • Lines2D
• WireFrame2D

Playgrounds referential

• Because we have to start from here: Hello World -
  
  
  
• All types of Primitives (TODO)
• A little example of the simplest features: two spinning Rect -
  
  
  
• The two spinning Rectangles, World Space version -
  
  
  
• A Lots of spinning primitives -
  
  
  
• Playing with origin and hierarchy -
  
  
  
• Changing origin -
  
  
  
• Relying on the babylon.js animation engine: a simple example of Animation -
  
  
  
• A simple interaction example -
  
  
  
• Primitives with Action Manager -
  
  
  
• An Animated Sprite2D -
  
  
  
• Some Lines2D primitives -
  
  
  
• Playing with Visibility -
  
  
  
• A little Transparency test -
  
  
  
• Using the Layout engine to arrange many primitives arranged using a StackPanel -
  
  
  
• How works Margin & Padding -
  
  
  
• Advanced Positioning example -
  
  
  
• How to track a node from the 3D Scene -
  
  
  
• WorldSpace Canvas on a custom scene node -
  
  
  
• Z-Order test -
  
  
  
• Scale9Sprite feature, playground -
  
  
  
• Sprite2D loaded from AtlasPicture -
  
  
  
• Text rendered using Signed Distance Field technique -
  
  
  
• Using BMFont to render text with BitmapFont -
  
  
  
• Track 3D Scene Nodes with WorldSpaceCanvas -
  
  
  
• Using the Primitive Collision Manager -
  
  
  
• Want to render a ScreenSpaceCanvas below or between 3D Content using renderingGroupID? -
  
  
  
• How to use the Canvas2D designSize feature (TODO)
• How to use the WorldSpaceCanvas unitScaleFactor (TODO)