API: Canvas (AB)

API Version Uses canvas Graphics libraries AB framework Worlds using this API Starter Worlds
Canvas (AB) 1.0 Yes None Yes 43 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:


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
451 runs ♦ 2 likes
By Starter user  
Created: 17 Sep 2017
Modified: 3 Sep 2019
Minimal starter World for "Canvas" API (no graphics library). Program using getContext("webgl")....
canvas 2d
297 runs ♦ 2 likes
By Starter user  
Created: 4 Oct 2017
Modified: 3 Sep 2019
Minimal starter World for "Canvas" API (no graphics library). Program using getContext("2d"). Pa...
Cells
78 runs ♦ 0 likes
By Enhanced  
Created: 27 Jun 2018
Modified: 27 Jun 2018
'Cells' is an animation that displays 4 team of cells trying to infect each other, until total d...
CELLS WITH MIND ...
103 runs ♦ 0 likes
By Enhanced  
Created: 10 Jul 2018
Modified: 10 Jul 2018
Cells is a game about cells trying to infect each other. It offers a playground for minds to com...
CELLS WITH MIND ...
56 runs ♦ 0 likes
By Enhanced  
Created: 10 Jul 2018
Modified: 10 Jul 2018
Cells is a game about cells trying to infect each other. It offers a playground for minds to com...

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

Bug bounty      Classes in Dublin      Contact

Call for partners
If you are interested in writing a programming course or textbook, 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.