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:
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.