@jahlgren/simple-canvas-input

Simple Canvas Input

Simple Canvas Input is a simple input system for HTML-canvas animations and games.

Install

npm install @jahlgren/simple-canvas-input

Usage

// First, make sure to import the input system:
import Input, { Keys, MouseButtons } from '@jahlgren/simple-canvas-input';

// Create example canvas and context:
const canvas = document.createElement('canvas');
canvas.width = 800;
canvas.height = 600;
const context = canvas.getContext('2d');
document.body.append(canvas);

// Initialize the input system, outside the game loop:
const input = new Input(canvas);

// Game loop
requestAnimationFrame(gameLoop);
function gameLoop(elapsed) {
  requestAnimationFrame(gameLoop);

  // Always make sure to update the input before using it, inside the game loop:
  input.update();

  // Now we can use the public methods in the input system to check for keyboard and mouse events:
  if(input.getMouseButton(MouseButtons.Left)) {
    context.fillRect(input.mousePosition.x - 4, input.mousePosition.y - 4, 8, 8);
  }
}

API

For key and mouseButton arguments you can use the enums Keys and MouseButtons, just remember to import them aswell.

props	type	description
mousePosition	{x: number, y: number}	Mouse coordinates relative to the canvas
getKey	(key: string) => boolean	Returns true if the given key is held down
getKeyDown	(key: string) => boolean	Returns true if the given key was pressed this frame
getKeyUp	(key: string) => boolean	Returns true if the given key was released this frame
getMouseButton	(mouseButton: string) => boolean	Returns true if the given mouse button is held down
getMouseButtonDown	(mouseButton: string) => boolean	Returns true if the given mouse button was pressed this frame
getMouseButtonUp	(mouseButton: string) => boolean	Returns true if the given mouse button was released this frame
setCanvasScale	(scale: number) => boolean	Sets the scale of the canvas to be used for mouse coordinates
getCanvasScale	(key: string) => boolean	Gets the value of the given canvas scale