API: Plain Canvas 1.0

API Uses canvas Graphics libraries AB framework Worlds using this API Starter Worlds
Plain Canvas 1.0 Yes None No 2 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:
     ABRun.mind.getAction ( state );  

Related APIs


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...
By Starter user  
Example of porting webgl World (almost) unchanged to AB using plain canvas API
Plain canvas web...
By Starter user  
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.
 
Font:

© Ancient Brain Ltd. All rights reserved.

Ancient Brain ™ is a trademark of Ancient Brain Ltd.

Beta      Bug bounty      Contact      Stats      The name      Terms and conditions