MarkJSCanvasUI

A lightweight JavaScript library for creating interactive UI controls within HTML Canvas elements, specifically designed for simple web games and canvas-based applications.

Features

• Complete UI Controls - Menus (including buttons), toggles, text inputs, radio buttons, carousels, sliders, and panels
• Modal Dialogs & Toast Notifications - User-friendly pop-ups and temporary messages
• Comprehensive Theme System - Consistent styling across all controls with easy customization
• Multi-Input Support - Keyboard, mouse, gamepad, and touch navigation
• External Input Management - Uses @markharrison/markjsinput for flexible input handling
• Canvas Scaling Support - Automatically handles responsive canvas sizing
• Simple API - Minimal setup with maximum flexibility

Installation

npm install @markharrison/markjscanvasui --save

Requirements

MarkJSCanvasUI requires an external input handler to manage user interactions. The recommended input handler is @markharrison/markjsinput.

Quick Start

import { MarkJSCanvasUI, Menu } from './markjscanvasui.js';
import { MarkJSInput } from '@markharrison/markjsinput';

const canvas = document.getElementById('gameCanvas');
const input = new MarkJSInput(canvas);
const ui = new MarkJSCanvasUI(canvas, { input });

// Add a button (using Menu with single item)
const button = new Menu(100, 100, [{ label: 'Click Me!', callback: () => ui.showToast('Hello World!', 'success') }], { width: 200, height: 50 });
ui.addControl(button);

// Game loop
let lastTime = 0;
function gameLoop(currentTime) {
    const deltaTime = currentTime - lastTime;
    lastTime = currentTime;

    ui.update(deltaTime);
    ui.render();

    requestAnimationFrame(gameLoop);
}
requestAnimationFrame(gameLoop);

Available Controls

• Menu - Horizontal or vertical navigation menus (can be used for buttons with single items)
• Toggle - On/off switches with labels
• TextInput - Text input fields with placeholder support
• Radio - Mutually exclusive option groups
• Carousel - Cycleable option selectors with arrows
• Slider - Numeric value selection with range controls
• Panel - Non-interactive background panels for grouping

Theme System

// Set consistent styling across all controls
ui.setTheme({
    controlColor: '#4CAF50',
    backgroundColor: '#333333',
    textColor: '#ffffff',
    borderRadius: 10,
    fontFamily: 'Arial',
    fontSize: 16,
});

Documentation

📖 Complete Documentation - Detailed API reference, examples, and usage guide

Test Application

🎮 Live Showcase - Interactive demo showing all controls and themes in action

License

MIT License - See LICENSE file for details.