API: Canvas

API Version Uses canvas Graphics libraries AB framework Worlds using this API Starter Worlds
Canvas 1.0 Yes None No 3 Worlds Starter Worlds


This API is for Worlds that use a canvas to do their own 2D or WebGL rendering. It does not come with a graphics library or with any Ancient Brain framework. Anything written in JS for a canvas should run using this API without change.

This API has the following features:

  • No graphics library.
  • No Ancient Brain framework.
  • The author has to do create canvas themselves and do their own 2D or WebGL rendering.
  • See 2D rendering documentation and WebGL rendering documentation.
  • Includes jQuery 1.12.4.
  • The screenshot assumes a canvas exists and takes a screenshot of that.

  • Run header on RHS. Many JS worlds use fixed small dimension canvas, which will go in top LHS. So this API puts run header on RHS.
  • If World uses Minds, World author must call the Mind themselves:
     AB.mind.getAction ( state );  

Optional: The "ABWorld" object

This API defines the following "ABWorld" global variable. World authors can ignore the existence of ABWorld entirely.
 

	ABWorld;                 // instance of class ABWorldClass  
 
// Data and methods of ABWorld:
 
	ABWorld.canvas;          // to point to the canvas  		
 
	// useful functions for creating/resizing canvas:

	ABWorld.fullwidth();     // return full width of window on desktop / screen on mobile 
	ABWorld.fullheight();    // return full height of window on desktop / screen on mobile

The AB system will find the canvas automatically (e.g. when it needs to do a screenshot). If the AB system fails to find the canvas, you can help it out by assigning the canvas to ABWorld.canvas.


Important: Set preserveDrawingBuffer for screenshots

If you are doing WebGL rendering (context "webgl"), you need in canvas.getContext to set preserveDrawingBuffer = true. This is so we can generate World image screenshots from the canvas. Do something like:

 
 ctx = canvas.getContext ( "webgl", { preserveDrawingBuffer: true } );	
This may lead to lower performance. So you might like to set it to true for "generate image" runs and false for normal runs, which can be done as follows:
 
 if ( AB.isScreenshotRun() ) ctx = canvas.getContext ( "webgl", { preserveDrawingBuffer: true } );	
 else                        ctx = canvas.getContext ( "webgl", { preserveDrawingBuffer: false } );	

Templates


Examples

Examples of Worlds that use this API:


Plain canvas web...
30 runs ♦ 0 likes
By Starter user  
Created: 1 Sep 2018
Modified: 19 May 2019
Example of porting webgl World (almost) unchanged to AB using plain canvas API
Plain canvas web...
34 runs ♦ 0 likes
By Starter user  
Created: 1 Sep 2018
Modified: 19 May 2019
Example of porting webgl World (almost) unchanged to AB using plain canvas API

The background is a program, showing the JavaScript graphics used on this site.
The globes light up when you log in.
 
Font:

© Ancient Brain Ltd. 2018-19. All rights reserved.

Ancient Brain ™ is a trademark of Ancient Brain Ltd.

Platforms      Stats      The name      Terms and conditions      Contact

Call for partners      Bug bounty      Classes in Dublin