DrCircuitsCanvasLibrary

DrCircuitsCanvasLibrary click to view examples live

A lightweight, performance-focused HTML5 Canvas library for creative coding and graphics programming

DrCircuitsCanvasLibrary (DCL) is a minimalist canvas library designed for developers who want powerful graphics capabilities without the overhead. Perfect for creative coding, games, data visualization, and interactive graphics applications.

๐ŸŽฏ Why Choose DCL Over P5.js?

While P5.js is an excellent library for creative coding, DCL offers distinct advantages for certain use cases:

๐Ÿš€ Performance & Size

๐Ÿ”ง Professional Development Focus

๐ŸŽฎ Game Development Optimized

๐Ÿ“ Advanced Mathematics

๐ŸŽจ Fine-Grained Control

๐Ÿ“ˆ When to Choose DCL vs P5.js

Choose DCL when:

Choose P5.js when:

๐Ÿ› ๏ธ Built for Modern JavaScript

DCL embraces modern JavaScript practices with ES6 modules, clean functional APIs, and excellent developer experience. Itโ€™s designed to feel natural in modern build systems and works seamlessly with frameworks like React, Vue, or vanilla JavaScript applications.

๐Ÿš€ Quick Start

Installation

npm install --save drcircuitscanvaslibrary

Basic Usage

import dcl from 'drcircuitscanvaslibrary';

function setup() {
    // Initialize your scene - called once
    dcl.screen.setBgColor('darkblue');
}

function draw(timestamp, deltaTime) {
    // Animation loop - called every frame
    dcl.clear();
    
    // Draw a spinning circle
    const angle = timestamp * 0.01;
    const x = dcl.screen.width / 2 + Math.cos(angle) * 100;
    const y = dcl.screen.height / 2 + Math.sin(angle) * 100;
    
    dcl.circle(x, y, 20, dcl.color.RED);
}

// Initialize and start the animation
dcl.init(setup, draw, {
    width: 800,
    height: 600,
    parent: document.getElementById('canvas-container')
});

dcl.animate();

Advanced Configuration

Advanced Configuration

// Legacy pattern (still supported)
(function(){
    let scr;
  
    function setup() {
        scr = dcl.setupScreen(window.innerWidth, window.innerHeight);
        scr.setBgColor('darkblue');
        document.body.style.backgroundColor = 'darkblue';      
    }
    function draw(t, dt){
       // your drawing and update logic here..
    }
    dcl.init(setup, draw);
    dcl.animate();
})();

โœจ Core Features

๐ŸŽจ Drawing & Shapes

๐Ÿ“ Vector Mathematics

๐Ÿ”ข Matrix & Complex Math

๐ŸŽฎ Input & Interaction

โšก Performance & Animation

๐Ÿ› ๏ธ Developer Experience

๐Ÿ“ TypeScript Support

DCL includes comprehensive TypeScript definitions for a superior development experience:

import dcl, { vector, color, Vector, Color, ScreenOptions } from 'drcircuitscanvaslibrary';

// Type-safe initialization
const options: ScreenOptions = {
  width: 800,
  height: 600,
  background: '#000000'
};

await dcl.init(options);

// Fully typed vector operations
const position: Vector = vector.create(100, 200);
const velocity: Vector = vector.create(2, -1);
const newPosition: Vector = position.add(velocity.mul(deltaTime));

// Type-safe color management
const primaryColor: Color = color.create(255, 100, 50, 200);
const mixedColor: Color = primaryColor.mix(color.blue(), 0.5);

// IntelliSense for all 100+ DCL methods
dcl.fill(primaryColor);
dcl.circle(position, 50);

Features:

See types/README.md for complete TypeScript integration guide.

๐Ÿ”ง Flexible Initialization API

DCL provides multiple initialization patterns to suit different coding styles and project needs:

New: Enhanced Init API with Screen Configuration

// Traditional approach - separate functions with screen config
dcl.init(setup, draw, {
    width: 800,
    height: 600,
    keepSquare: false,
    gridScale: 1,
    parent: document.getElementById('canvas-container')
});

// Config object with draw function
dcl.init(setup, {
    draw: draw,
    width: 800,
    height: 600,
    parent: document.getElementById('canvas-container')
});

// Full configuration object
dcl.init({
    setup: function() {
        // setup code here
    },
    draw: function(t, dt) {
        // drawing code here
    },
    screen: {  // or just put screen properties at top level
        width: 800,
        height: 600,
        keepSquare: false,
        gridScale: 1,
        parent: document.getElementById('canvas-container')
    }
});

๐ŸŽฏ Live Examples

Explore these interactive examples to see DCLโ€™s capabilities in action:

Examples:

setupScreen function

setupScreen: function (width, height, keepSquare, gridScale, parent, positioning)

Parameters:

return object:

This method returns an object with the following:

dcl.init function

dcl.init: function(setup, draw, config) | function(setup, config) | function(config)

The init function has multiple signatures to provide flexibility in how you set up your DCL application:

Three-parameter signature:

dcl.init(setupFunction, drawFunction, screenConfig)

Two-parameter signatures:

// Setup function + config with draw
dcl.init(setupFunction, {
    draw: drawFunction,
    width: 800,
    height: 600,
    parent: containerElement
})

Single-parameter signature (full config):

dcl.init({
    setup: setupFunction,
    draw: drawFunction,
    screen: {  // or put screen properties at top level
        width: 800,
        height: 600,
        keepSquare: false,
        gridScale: 1,
        parent: containerElement
    }
})

Screen Configuration Options:

dcl.random function

dcl.random: function(min, max)

Parameters:

return object:

This method returns a random integer between the given min / max values passed to the function.

dcl.rect function

dcl.rect: function(x, y, width, height, color, lineWidth, lineColor, ctx)

Parameters:

void

This method draws a rectangle based on the given parameters.

dcl.circle function

dcl.circle: function(x, y, radius, color, lineWidth, lineColor, ctx)

Parameters:

void

This method draws a circle based on the given parameters.

dcl.line function

dcl.line: function(x, y, dx, dy, lineWidth, lineColor, ctx)

Parameters:

void

This method draws a line based on the given parameters.

dcl.animate function

This function starts the render loop.

๐Ÿ“š Additional Resources

๐Ÿค Contributing

DCL is open source under the CC-BY-4.0 license. Contributions, issues, and feature requests are welcome!

๐Ÿ“ˆ Performance

DCL includes built-in performance monitoring and maintains comprehensive test coverage (95%+) to ensure reliability and performance in production applications.

Built with โค๏ธ by Espen Sande Larsen (Working Class Hacker)

This site is open source. Improve this page.