Drag the background!

API: Canvas

API Version Uses canvas Graphics libraries AB framework Worlds using this API Starter Worlds
Canvas 1.0 Yes None No 7 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...
55 runs ♦ 0 likes
By Starter user  
Created: 1 Sep 2018
Modified: 1 Oct 2020
Example of porting webgl World (almost) unchanged to AB using plain canvas API
Plain canvas web...
40 runs ♦ 0 likes
By Starter user  
Created: 1 Sep 2018
Modified: 1 Oct 2020
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:

Website copyright © Ancient Brain Ltd. 2018-20.
Users retain copyright of their own content.
Ancient Brain ™ is a trademark of Ancient Brain Ltd.

Platforms      Stats      The name      Terms and conditions

Bug bounty      Classes      Contact

Call for partners!
If you are interested in writing a programming course, textbook or tutorial videos, Ancient Brain is looking for partners. We will work with you, and integrate your course into the site. This is an opportunity for someone looking to develop a course or textbook to partner with a site to support it and promote it.