simple-canvas-library
    Preparing search index...

    Class GameCanvas

    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 handle events on the canvas.

    const game = new 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();

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

    game.addClickHandler(
        // When the canvas is clicked...
        function ({x,y}) {
            // Add the drawing to the game...
            const id = game.addDrawing(
                function ({ctx,elapsed,height}) {
                    let 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!

    SimpleCanvas

    Hierarchy (View Summary)

    Index

    Constructors

    constructor

    Methods

    addClickHandler addDrawing addHandler addResizeHandler getIsRunning getSize removeClickHandler removeDrawing removeHandler removeResizeHandler replaceDrawing restoreDrawing run stop

    Constructors

    • Creates a new GameCanvas instance.

      Parameters

      • id: string | HTMLCanvasElement

        The Canvas Element OR the ID of the canvas element we will render the game in.

      • config: { autoresize?: boolean; size?: Size } = {}

        Optional configuration object

        • Optionalautoresize?: boolean

          Whether to resize the game canvas to the DOM canvas automatically (defaults to true)

        • Optionalsize?: Size

          Optional size for canvas. Otherwise size is taken from explicitly set width/height OR from the element's size on the page.

      Returns GameCanvas

    Methods

    • Syntactic sugar for addHandler('click',h).

      Parameters

      • h: (params: { event: Event; type: string; x: number; y: number }) => boolean | void

        A function to handle click events

      Returns number

      ID that can be used to remove handler with removeClickHandler

      let xpos = 100;
      let ypos = 100;
      // Register a handler to update our variable each time
      // there is a click.
      game.addClickHandler(
          function ({x,y}) {
            // set variables...
            xpos = x;
            ypos = y;
          }
      )
      // Now create a drawing that uses the variable we set.
      game.addDrawing(
          function ({ctx}) {ctx.fillRect(xpos,ypos,30,30)}
      )

    • Add a drawing to our drawing queue (it will remain until we remove it).

      Parameters

      Returns number

      ID that can be used in removeDrawing callback to remove drawing.

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

      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)
             },
           }
      );

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

    • Register a handler h for eventType

      Parameters

      • eventType: "click" | "dblclick" | "mousedown" | "mousemove" | "mouseup"

        type of event to handle

      • h: (params: { event: Event; type: string; x: number; y: number }) => boolean | void

        handler function

      Returns number

      ID that can be used to remove handler with removeHandler

      game.addHandler('mousemove',
          function ({x,y}) {
              console.log("Mouse moved to",x,y);
          }
      );

    • Register a handler h for eventType

      Parameters

      • eventType: "keydown" | "keypress" | "keyup"

        type of event to handle

      • h: (params: { event: KeyboardEvent; type: string }) => boolean | void

        handler function

      Returns number

      ID that can be used to remove handler with removeHandler

      game.addHandler('mousemove',
          function ({x,y}) {
              console.log("Mouse moved to",x,y);
          }
      );

    • Register a handler h for eventType

      Parameters

      • eventType: "resize"

        type of event to handle

      • h: (
            params: {
                canvas: HTMLCanvasElement;
                ctx: CanvasRenderingContext2D;
                height: number;
                setCanvasSize: (w: number, h: number) => void;
                width: number;
            },
        ) => boolean
        | void

        handler function

      Returns number

      ID that can be used to remove handler with removeHandler

      game.addHandler('mousemove',
          function ({x,y}) {
              console.log("Mouse moved to",x,y);
          }
      );

    • Register a handler h for resize

      Parameters

      • h: (
            params: {
                canvas: HTMLCanvasElement;
                ctx: CanvasRenderingContext2D;
                height: number;
                setCanvasSize: (w: number, h: number) => void;
                width: number;
            },
        ) => boolean
        | void

      Returns number

    • Check if the game is currently running.

      Returns boolean

      Whether the game is running

    • Syntactic sugar for removeHandler('click',h)

      Parameters

      • idx: number

      Returns void

    • Remove a drawing by its ID.

      Parameters

      • idx: number

        drawing ID to remove (return value from addDrawing).

      Returns void

    • Remove handler for eventType.

      Parameters

      • eventType: string
      • idx: number

      Returns void

    • Syntactic sugar for removeHandler('resize',h)

      Parameters

      • idx: number

      Returns void

    • Restore a previously removed drawing (start drawing again).

      Parameters

      • idx: number

        drawing ID to restore (start drawing again).

      Returns void

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

      Returns void

    • Stop the game animation loop.

      Returns void

    Settings

    Member Visibility

    On This Page

    Constructors
    Methods