Canvas Effect Gallery Development

Expert guidance for working with the canvas-effect-gallery codebase - a vanilla JavaScript visual effects gallery featuring real-time animated canvas effects.

Project Architecture

This is a static HTML/JS/CSS application using ES6 modules with no build tools or external dependencies. All effects run entirely in the browser using native Canvas API.

Core Components

**main.js** - Application controller:

**effects/** - Effect modules following consistent interface:

Existing Effects

**Plasma** (effects/plasma.js):

**Starfield** (effects/starfield.js):

**Kaleidoscope** (effects/kaleidoscope.js):

Development Instructions

Running the Application

Serve via HTTP (required for ES6 modules):

```bash

Python 3

python -m http.server 8000

Python 2

python -m SimpleHTTPServer 8000

Node.js

npx http-server -p 8000

```

Then navigate to `http://localhost:8000`

Adding New Effects

1. **Create effect file** in `effects/` directory (e.g., `effects/myeffect.js`)

2. **Implement required interface**:

```javascript

export class MyEffect {

constructor(canvas, ctx, controls) {

// Initialize effect, bind event handlers

}

update() {

// Animation logic (called each frame)

}

draw() {

// Rendering logic (called each frame)

}

resize(width, height) {

// Handle canvas resize

}

destroy() {

// Remove event listeners, cleanup resources

}

}

```

3. **Import in main.js**:

```javascript

import { MyEffect } from './effects/myeffect.js';

```

4. **Add to effects object** (main.js line 28):

```javascript

const effects = {

// ... existing effects

MyEffect

};

```

Effect will automatically appear in dropdown selector.

Event Handling Pattern

All effects follow consistent mouse/touch handling:

Example:

```javascript

constructor(canvas, ctx, controls) {

this.handleMouseMove = this.handleMouseMove.bind(this);

canvas.addEventListener('mousemove', this.handleMouseMove);

}

destroy() {

this.canvas.removeEventListener('mousemove', this.handleMouseMove);

}

```

Performance Optimization

Code Quality Guidelines

1. **Use ES6 modules** - No bundler required, browser-native imports

2. **No external dependencies** - Keep vanilla JavaScript approach

3. **Consistent interface** - Follow effect module pattern

4. **Resource cleanup** - Always implement proper `destroy()` methods

5. **Performance first** - Monitor frame rate, optimize rendering

6. **Touch support** - Ensure all effects work on mobile devices

7. **Responsive** - Handle window resize gracefully

Testing