DrCircuitsCanvasLibrary click to view examples live

A tiny library for doing boilerplate stuff for canvas based vanilla js gfx and game projects.

Installation: Install via npm: npm install --save drcircuitscanvaslibrary

Usage:

(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();
})();

Examples:

• Cube
• Curve
• Dodecahedron
• Dual tetrahedron
• Keyboard
• Mouse
• Shapes
• Tetrahedron
• Triangle

setupScreen function

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

Parameters:

• width: The width of your canvas
• height: The height of your canvas
• keepSquare: This will create a square canvas
• gridScale: Create a grid based coordinate system, where the scale is number of square pixels in one grid unit.

return object:

This method returns an object with the following:

• ctx: 2d rendering context
• width: the width of the canvas
• height: the height of the canvas
• cols: the number of columns in your grid
• rows: the number of rows in your grid
• setBgColor: function(color): sets the background color of the canvas
• randomSpot: function(): retrieves a random spot from the grid, returns a vector x, y

dcl.random function

dcl.random: function(min, max)

Parameters:

• min: the minimum desired number of the random range. & max: the maximum desired number of the random range.

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:

• x: the x position of the upper left corner of the rectangle
• y: the y position of the upper left corner of the rectangle
• width: the width of the rectangle
• height: the height of the rectangle, if 0 or no value is provided, a square with a side length equal to the "width" parameter will be drawn
• color: the fill color of the rectangle, defaults to "blue" if no input is given.
• lineWidth: The width of the stroke around the perimeter : optional
• lineColor: The color of the stroke around the perimeter, defaults to "#000088" if no input is given : optional
• ctx: The canvas context to draw the circle on : optional.

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:

• x: the x position of the center of the circle
• y: the y position of the center of the circle
• radius: the radius of the circle
• color: the fill color of the circle, defaults to "blue" if no input is given.
• lineWidth: The width of the stroke around the perimeter : optional
• lineColor: The color of the stroke around the perimeter, defaults to "#000088" if no input is given : optional
• ctx: The canvas context to draw the circle on : optional.

void

This method draws a circle based on the given parameters.

dcl.line function

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

Parameters:

• x: the x position of the start of the line
• y: the y position of the start of the line
• dx: the x position of the end of the line
• dy: the y position of the end of the line
• lineWidth: The width of the stroke around the perimeter : optional
• lineColor: The color of the stroke around the perimeter, defaults to "#000088" if no input is given : optional
• ctx: The canvas context to draw the circle on : optional.

void

This method draws a line based on the given parameters.

dcl.init function

Parameters:

• setup a function to setup your scene
• draw a function that will run in a loop rendering your scene

dcl.animate function

This function starts the render loop.