@jahlgren/simple-canvas-input v0.1.4

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.