🎨 Object-Oriented Canvas Starter

A small, dependency-free starter project for building animated HTMLCanvasElement applications with modern JavaScript classes and ES modules.

The included demo renders a square that moves horizontally using a frame-rate-independent animation loop.

✨ Features

• Reusable Canvas base class for setup, resizing, clearing, and animation
• Automatic high-DPI scaling with devicePixelRatio
• Delta-time calculation for consistent movement across frame rates
• Base Entity class for drawable objects
• Simple Vector2D utility for positions and calculations
• Native ES modules with no build tools or runtime dependencies

🚀 Getting Started

Clone or download the repository, then serve it from the project directory:

python3 -m http.server 8000

Open http://localhost:8000 in a modern browser. Serving over HTTP is recommended because browsers may restrict ES module imports when opening index.html through a file:// URL.

📁 Project Structure

.
├── css/
│   └── styles.css      # Full-page canvas styling
├── js/
│   ├── canvas.js       # Canvas lifecycle and animation loop
│   ├── entity.js       # Base class for drawable entities
│   ├── script.js       # Application entry point
│   ├── square.js       # Example animated entity
│   └── vector2d.js     # Two-dimensional vector utility
├── index.html
└── LICENSE

🧩 How It Works

Canvas manages the rendering context and calls an overridable update method once per animation frame. The supplied delta value is the elapsed time in seconds since the previous frame.

Create an application by extending Canvas:

class ApplicationCanvas extends Canvas {
    update(delta) {
        square.move(delta);
        square.draw(this.context);
    }
}

Entities extend Entity and implement their own drawing behavior. The included Square updates its horizontal position with speed * delta, keeping its motion independent of display refresh rate.

🛠️ Extending the Starter

Add new entity classes under js/, then import and update them from js/script.js. A drawable entity should normally implement a draw method:

class Circle extends Entity {
    draw(context) {
        context.beginPath();
        context.arc(this.position.x, this.position.y, 25, 0, Math.PI * 2);
        context.fill();
    }
}

Keep coordinates and dimensions in CSS pixels. High-DPI scaling is already handled by the Canvas class.

✅ Testing

There is currently no automated test suite. After making changes, verify that:

• The browser console contains no errors.
• The canvas fills the viewport and responds to resizing.
• Animation speed remains stable at different refresh rates.
• New entities update and render as expected.

🤝 Contributing

See AGENTS.md for repository conventions, development guidance, and pull request expectations.

📄 License

This project is available under the MIT License.