Babylon.js/canvas2D

Canvas2D, a 100% WebGL based 2D Engine

Table of Content

• Introduction
• Documentation, want to give feedback, report a bug or need help?
• Releases
• Features list (separated page)
• How to build it

Introduction

Canvas2D is a separated distributed set of .js/.d.ts files laying on the top of the babylon.js library.

Its purpose is to provide a general featured 2D Engine that will serve as the foundations for:

• Any 2D Graphics related work
• A WebGL based GUI Library also present in the library (but under development right now.)

Canvas2D provides two types of Canvas

• ScreenSpace Canvas, lying on the top (or below/between) the 3D content. Typically used for 3D Game/App on screen UI
• WorldSpace Canvas, to display the content of a Canvas right in the 3D Scene. You can even make it track a scene node and using billboard mode to make it always face the screen.

Documentation

Overview

There's a full overview documentation that we greatly encourage you to read at least a bit before you start !

This overview page has many links to other documentation pages (organized like a wiki) you can learn a lot about the basic usage, the different features, how rendering works and the overall architecture of the 2D Engine.

Reference

The reference documentation is available here, most of the Canvas2D classes are suffixed by 2D so you can use it in the filter box like this:

Using the Forum

If you need help, want to give feedback, report a bug or be aware of the latest development: you have to use the Babylon.js forum.

• Questions are to be posted here
• Bugs reports must be made there
• Check this post to be aware of all the improvements/fixes made during the alpha/beta development of the library. You can check the first post as I update it each time there's new stuff or I simply encourage you to follow the thread to get notified. Please don't ask question or report bugs in this thread, create a dedicated one, thanks!
• Another post was created to track the progress on the GUI Library, same rules and observations as above.

Important when you post something you better mentioned me using @nockawa, I'm not checking the forum everyday but some other users does and ping me if needed, but still: mentioning me is the best way to get my attention.

We now use GitHub Issues and Projects

You can take a look at the current GitHub Project for the V3 here

Releases

You want to use an existing build, that's simple, you can grab either the latest official release or the latest build of the current developing version.

• The latest official release can be found here
• The latest preview release (which is the current developing version, stable most of the time) can be found there

How to build babylon.canvas2d.js with Gulp

If you want to locally build the canvas2D library, you can follow the steps below. But sure you've read this page before to learn how to setup your local repository and the general build concepts.

Gulp

Build Babylon.canvas2d.js with gulp and npm (nodejs), easy and cross-platform

(Paths in this file are relative to this file location.)

How to use it

From the /Tools/Gulp folder:

First install gulp :

npm install -g gulp

Install some dependencies :

npm install

Update dependencies if necessary :

npm update

From the javascript source

Build Babylon.canvas2d.js:

gulp canvas2D

Will be generated in dist/preview release/canvas2D:

• babylon.canvas2d.min.js
• babylon.canvas2d.js (unminified)
• babylon.canvas2d.d.ts

Build the changed files for debug when you save a typescript or shader file:

gulp watch

Watch and run a web server for debug purpose:

gulp run