Simple Click Handler

Shows how to handle click events with GameCanvas.

interactiveclickeventsbasics

Demo

Canvas will resize automatically if resize handling is enabled in the demo.

Source Code
/**
 * @demo Simple Click Handler
 * @description Shows how to handle click events with GameCanvas.
 * @tags interactive, click, events, basics
 */

import { GameCanvas } from "../src";

const gameCanvas = new GameCanvas("demo-canvas");

const coolColors = ['salmon', 'coral', 'navy', 'orange', 'teal', 'red', ' green', 'blue', 'indigo', 'violet', 'pink', 'purple']

gameCanvas.addClickHandler((event) => {
  const { x, y } = event;
  const color = coolColors[Math.floor(Math.random() * coolColors.length)];
  gameCanvas.addDrawing(({ ctx }) => {
    ctx.fillStyle = color;
    ctx.fillRect(x - 25, y - 25, 50, 50);
  });
});

gameCanvas.run();