Class: GameCanvas

GameCanvas(canvas, config)

new GameCanvas(canvas, config)

GameCanvas sets up a canvas for creating a simple game in. Hand it the id of the canvas you want to use from your HTML document. It returns an object for registering functions to do the drawing and for registering callbacks to handlers events on the canvas.
Parameters:
Name Type Description
canvas string | Canvas The Canvas Element OR the ID of the canvas element we will render the game in.
config Object Optional argument with initial size of canvas in pixels (otherwise we just measure the element)
Properties
Name Type Default Description
size Size Optional size for canvas. Otherwise size is taken from explicitly set width/height OR from the element's size on the page.
autoresize boolean true autoresize=true whether to resize the game canvas to the DOM canvas automatically (defaults to true)
Source:
Examples

Make a simple spinner using only the addDrawing method.

game = GameCanvas('game'); // Set up a game on <canvas id='game'>
game.addDrawing(
   function ({ctx,elapsed}) {
        ctx.beginPath();
        ctx.moveTo(100,100);
        ctx.lineTo(100+Math.cos(elapsed/1000)*100,
                   100+Math.sin(elapsed/1000)*100);
        ctx.stroke()
   }
);
game.run();

Create a game where clicking makes balls drop.

game = GameCanvas('game');
const colors = ['red','green','purple','yellow','orange']
const drawings = []; // track our drawings so we can remove them...
var colorIndex = 0;
var color = colors[colorIndex]

game.addClickHandler(
    // When the canvas is clicked...
    function ({x,y}) {        
        // Add the drawing to the game...
        var id = game.addDrawing(
            function ({ctx,elapsed,height}) {
                var ypos = y + elapsed/5;
                while (ypos > height) {
                    ypos -= height; // come around the top...
                }
                ctx.beginPath();
                ctx.fillStyle = color;
                ctx.arc(x,ypos,20,0,Math.PI*2);
                ctx.fill();
            } // end drawing function
        )

        drawings.push(id); // Keep track of our drawing so we can remove it.
        // If we have too many drawings, remove the first one we put on...
        if (drawings.length > colors.length) { 
            const toRemove = drawings.shift()
            game.removeDrawing(toRemove);
        }

        // shift colors for next ball
        colorIndex += 1;
        if (colorIndex >= colors.length) {colorIndex = 0}
        color = colors[colorIndex];

    } // end click callback

);
game.run(); // run the game!

Methods

addClickHandler()

Syntactic sugar for addHandler('click',h)
Source:

addDrawing(draw)

Add a drawing to our drawing queue (it will remain until we remove it).
Parameters:
Name Type Description
draw SimpleCanvas.GameCanvas~drawCallback function OR an object with a draw callback method
Source:
Returns:
ID that can be used in a SimpleCanvas.GameCanvas#removeDrawing callback to remove drawing.
Examples

Passing a draw function

game.addDrawing(
    function ({ctx,elapsed}) {
        ctx.beginPath();
        ctx.moveTo(200,200);
        ctx.lineTo(100,200+Math.sin(elapsed/10)*200);
        ctx.stroke();
    }
);

Passing an object with a draw method

game.addDrawing(
     { x : 0,
       y : 0,
       w : 100,
       h : 100,
       draw ({ctx,stepTime,width,height}) {
          this.x += stepTime/20;
          this.y += stepTime/20;
          if (this.x > width) { this.x = 0 }
          if (this.y > height) { this.y = 0 }
          ctx.fillRect(this.x,this.y,this.w,this.h)
       },
     }
);

A drawing that will remove itself when it leaves the screen

game.addDrawing(
    function ({ctx,elapsed,width,remove}) {
        const x = elapsed / 20
        ctx.fillRect(20,20,20);
        if (x > width) { remove () }
    }
);

addHandler(eventType, eventCallback)

Register a handler h for eventType Returns an ID that can be used to later remove the handler.
Parameters:
Name Type Description
eventType string the javaScript event to handle. Can be click,dblclick,mousedown,mousemove,mouseup or keyup
eventCallback SimpleCanvas.GameCanvas~eventCallback A callback to handle events of type eventType.
Source:
Returns:
ID that can be used to remove handler with SimpleCanvas.GameCanvas#removeHandler

addResizeHandler(eventType, resizeCallback)

Register a handler h for resize Returns an ID that can be used to later remove the handler.
Parameters:
Name Type Description
eventType string the javaScript event to handle. Can be click,dblclick,mousedown,mousemove,mouseup or keyup
resizeCallback SimpleCanvas.GameCanvas~resizeCallback A callback to handle canvas resize events
Source:
Returns:
ID that can be used to remove handler with SimpleCanvas.GameCanvas#removeResizeHandler

getSize() → {Size}

Source:
Returns:
size
Type
Size

removeDrawing(id)

Parameters:
Name Type Description
id number drawing ID to remove (return value from {SimpleCanvas.GameCanvas#addDrawing}).
Source:

removeHandler(eventType, id)

Remove handler for eventType.
Parameters:
Name Type Description
eventType String the javaScript event to handle
id Number the ID of the handler to remove (this is the value returned by SimpleCanvas.GameCanvas#addHandler)
Source:

replaceDrawing(id, f)

Parameters:
Name Type Description
id number drawing ID to replace
f SimpleCanvas.GameCanvas~drawCallback draw function OR an object with a draw callback method
Source:

restoreDrawing(id)

Parameters:
Name Type Description
id number drawing ID to restore (start drawing again).
Source:

run()

run the game (start animations, listen for events).
Source:

Type Definitions

drawCallback(config)

Parameters:
Name Type Description
config Object
Properties
Name Type Description
ctx CanvasRenderingContext2D
width number width of canvas
height number height of canvas
elapsed number milliseconds since first drawing
timestamp number current timestamp
stepTime number milliseconds passed since last tick
remove number a function that will remove this callback from the queue
Source:

eventCallback(config)

Parameters:
Name Type Description
config Object
Properties
Name Type Description
x number offsetX of event (x with respect to canvas)
y number offsetY of event (y with respect to canvas)
type string type of event (i.e. mouseUp)
event Object javascript event object
Source:
Returns:
true to prevent other handlers from being called, or return undefined/false to allow other handlers to run.

resizeCallback(config, canvas, setCanvasSize)

Parameters:
Name Type Description
config Object
Properties
Name Type Description
ctx CanvasRenderingContext2D drawing context
width number width of canvas element (will be same as internal width if autoresize is true)
height number height of canvas element (will be same as internal height if autoresize is true)
canvas Canvas the canvas DOM element
setCanvasSize function method to set internal size of canvas (width, height) if you want to implement custom sizing logic.
Source:
Returns:
true to prevent other handlers from being called, or false to allow other handlers to run.