Drag the background!

API: Canvas (AB) (r2)

API Uses canvas Graphics libraries AB framework Worlds using this API Starter Worlds
Canvas (AB) (r2) Yes None Yes 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. It comes with an Ancient Brain framework to make writing Worlds easier.

This API has the following features:

  • No graphics library.
  • Creates a canvas in the run window.
  • The author has to do their own 2D or WebGL rendering.
  • See 2D rendering documentation and WebGL rendering documentation.
  • Includes jQuery 3.6.0.
  • Loads up minimal CSS that should not conflict with user CSS.
  • The screenshot assumes a canvas exists and takes a screenshot of that.

Global variables

This API defines the following global variables:
 

 ABWorld;       // instance of class ABWorldClass - basic functionality for this API
 

The "ABWorld" object

The public variables and methods of "ABWorld" are as follows:

 

  // A canvas that may be drawn on using getContext("2d") or getContext("webgl")

	ABWorld.canvas;		
		  
		
  // create canvas:		

	ABWorld.init ( color );   
		
		
  // get drawing context:
  
	ABWorld.getContext ( type );
		

Optional: Customising drawing context

The function ABWorld.getContext calls ABWorld.canvas.getContext with default args to create a drawing context. It is used like:
 
 var ctx = ABWorld.getContext ( "2d" );
 var ctx = ABWorld.getContext ( "webgl" );

If you want a customised drawing context, call it directly:

 
 var ctx = ABWorld.canvas.getContext ( type, args );


Important: With custom drawing context, set preserveDrawingBuffer for screenshots

If you are customising drawing context (not using ABWorld.getContext) and if you are using "webgl" context, then this is important.

For your World to generate screenshots, you need in canvas.getContext to set preserveDrawingBuffer = true. Like this:

 
 ctx = ABWorld.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 = ABWorld.canvas.getContext ( "webgl", { preserveDrawingBuffer: true } );	
 else                        ctx = ABWorld.canvas.getContext ( "webgl", { preserveDrawingBuffer: false } );	
If you use ABWorld.getContext, this is not needed. It is built-in (preserveDrawingBuffer true for screenshot runs, false for normal runs).

Templates


Examples

Examples of Worlds that use this API:


canvas webgl
482 runs ♦ 2 likes
By Starter user  
Created: 17 Sep 2017
Modified: 18 Apr 2021
Minimal starter World for "Canvas" API (no graphics library). Program using getContext("webgl")....
canvas 2d
330 runs ♦ 2 likes
By Starter user  
Created: 4 Oct 2017
Modified: 18 Apr 2021
Minimal starter World for "Canvas" API (no graphics library). Program using getContext("2d"). Pa...

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. 2018-2021.
Users retain ownership of user content.

Platforms      Stats      The name      Terms and conditions

Call for partners      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.