Canvas Interaction Kit

A versatile canvas interaction library for creating dynamic visual content and immersive user experiences on the web.

🚀 Quick Start

Installation

npm install canvas-interaction-kit

Basic Usage

import CanvasInteractionKit from 'canvas-interaction-kit';

// Create interactive canvas instance
const kit = new CanvasInteractionKit('canvas-container', {
    width: '800px',
    height: '600px',
    autostart: true
});

// Initialize interactive content
await kit.init();

📦 Web Integration

Perfect for any web application requiring dynamic canvas interactions.

CDN Integration

Add this to your HTML:

<script src="https://unpkg.com/canvas-interaction-kit/dist/canvas-interaction-kit.umd.js"></script>
<script>
let interactionKit = null;

window.loadInteractiveContent = async function() {
    if (interactionKit) return; // Already loaded

    interactionKit = new CanvasInteractionKit('interaction-container', {
        width: '100%',
        height: '600px',
        autostart: true,
        onEvent: (event, data) => {
            console.log('Interaction event:', event, data);
        }
    });

    await interactionKit.init();
};

window.closeInteractiveContent = function() {
    if (!interactionKit) return;
    interactionKit.destroy(); // Cleans up for optimal performance
    interactionKit = null;
};
</script>

HTML Setup

<!-- Interactive content container -->
<div id="interaction-container" style="width: 100%; height: 600px;"></div>

<!-- Control buttons -->
<button onclick="loadInteractiveContent()">🎨 Load Interactive Content</button>
<button onclick="closeInteractiveContent()">❌ Close</button>

Advanced Container Selection

Use data attributes for dynamic container selection:

<div data-shatter-type="area" class="content-zone">
    <!-- Content will be dynamically replaced -->
</div>

// Find and initialize in specific container
const container = document.querySelector('[data-shatter-type="area"]');
const kit = new CanvasInteractionKit(container.id);

⚙️ Configuration Options

const kit = new CanvasInteractionKit('container-id', {
    width: '800px',           // Container width
    height: '600px',          // Container height
    autostart: false,         // Auto-start after init
    showUI: true,             // Show interface elements
    theme: 'default',         // Visual theme
    onEvent: (event, data) => {
        // Handle interaction events
        console.log(event, data);
    }
});

🎮 API Methods

Content Control

• await kit.init() - Initialize the interactive content
• kit.start() - Start/restart interactions
• kit.pause() - Pause interactions
• kit.resume() - Resume paused content
• kit.stop() - Stop and return to initial state
• kit.destroy() - Clean up and remove content (important for performance)

Information Retrieval

• kit.getStats() - Get current interaction statistics

const stats = kit.getStats();
// Returns:
// {
//   score: 1500,
//   highScore: 2300,
//   speed: 2.5,
//   energy: 85,
//   state: 'active',
//   isRunning: true
// }

🎯 Events

Listen to interaction events:

const kit = new CanvasInteractionKit('container', {
    onEvent: (eventName, data) => {
        switch(eventName) {
            case 'init':
                console.log('Content initialized');
                break;
            case 'start':
                console.log('Interactions started');
                break;
            case 'pause':
                console.log('Content paused');
                break;
        }
    }
});

Or use custom events:

document.addEventListener('canvas-interaction-start', (e) => {
    console.log('Interactive content started!', e.detail);
});

💡 Performance Tips

1. Always call destroy() when removing content to prevent memory leaks
2. Use the CDN version for faster loading
3. Initialize on demand rather than page load
4. Listen to events to update your UI accordingly

🌟 Use Cases

Modal/Overlay Content

function openContentModal() {
    showModal();
    const kit = new CanvasInteractionKit('modal-container');
    kit.init();
}

function closeContentModal() {
    const kit = getKitInstance();
    kit.destroy(); // Important: clean up!
    hideModal();
}

Dynamic Content Areas

function loadContentArea() {
    if (!kitInstance) {
        kitInstance = new CanvasInteractionKit('content-area');
        kitInstance.init();
    }
}

Secret/Hidden Content

// Activate with special triggers
document.addEventListener('keydown', (e) => {
    if (e.ctrlKey && e.shiftKey && e.key === 'I') {
        activateHiddenContent();
    }
});

function activateHiddenContent() {
    const container = document.querySelector('[data-shatter-type="area"]');
    const kit = new CanvasInteractionKit(container.id);
    kit.init();
}

🛠️ Development

# Install dependencies
npm install

# Build the package
npm run build

# Development build
npm run dev

📝 License

MIT License - free for commercial use.

Ready to create engaging interactive experiences? 🎨