Canvas Toolkit
A widget toolkit for canvas, with some basic predefined elements and a layering system.
Quickstart
Create a div to contain the canvas.
Create a new Canvas object.
;const canvas = width: 750height: 500container: document;canvas
Add an element.
canvas;
That's it. The canvas should draw itself automatically, and you should see your text.
Updating Elements
The canvas will automatically redraw when an element is changed.
const canvas = width: 750 height: 500 container:document;const text = left: 10 top: 10 text: 'Foobar';canvas; //updating the text position will cause the canvas to automatically redraw, and the//text will gradually move to the right.;
List of Elements
Circle
The circle element can either draw a full circle, or a slice of a circle, depending on the "angle" parameter.
const circle = // the left coordinate of the circle, relative to the canvasleft: 0//the right coordinate of the circle, relative to the canvastop: 0//whether to draw the fill colorfill: true//the color that fills the circlefillColor: '#CCCCCC'//whether to draw the stroke linestroke: true//the color of the line around the circlestrokeColor: '#000000'//the thickness of the line around the circlestrokeThickness: 1//the radius of the circleradius: 10//how much to rotate the circle, in degreesrotate: 0//the angle of the circle. Angles less than 360 produce a partial circle.angle: 360;
### Line
An element that draws a line between two points.
const dashedLine = // the left coordinate of the line, relative to the canvasleft: 10// the right coordinate of the line, relative to the canvastop: 10//the x value of the beginning of the linex1: 0//the y value of the beginning of the line y1: 0//the x value of the end of the linex2: 500//the y value of the end of the liney2: 500//how much to rotate the linerotate: 0//the color of the linecolor: '#a7c'//the line caplineCap: 'square'//whether the line is dasheddashed: true//the spacing between dashesdashSpacing: 105//the thickness of the linethickness: 1;
The path element takes an arbitrary list of coordinates and draws a path between them.
const path = //the left coordinate of the path, relative to the canvas.left: 0//the top coordinate of the path, relative to the canvas.top: 0//whether to fill the path with a colorfill: true//the color used to fill the pathfillColor: '#44ff56'//whether to draw a line around the pathstroke: true//the color of the line around the pathstrokeColor: '#068fff'//how thick the line around the path should bestrokeThickness: 2//how much to rotate this elementrotate: 90//a list of lists of [x,y] coordinates that the path runs through. Each separate//list a different path that will be drawn (multiple paths can be provided.)path: 00 1010 4020 50-10 605 100 2010 300 ;
Text
This element draws a piece of text to the canvas.
const text = //the left coordinate of the text, relative to the canvasleft: 200//the top coordinate of the text, relative to the canvastop: 100//the text to drawtext: 'Count: 0'//the color of the textcolor: 'red'//the font of the textfont: //the font family family: 'DejaVu Sans Mono' //the font size size: 44 //the font style style: 'normal' //the font weight weight: 'bold';
Triangle
This element draws a triangle.
const triangle = //the left coordinate of the text, relative to the canvas left: 0 //the top coordinate of the text, relative to the canvas top: 0 //the width of the triangle width: 10 //the height of the triangle height: 50 //whether to fill the triangle fill: true //what color to use to fill the triangle fillColor: //whether to draw the stroke line around the triangle stroke: true //the color of the stroke line strokeColor: //the stroke line's thickness strokeThickness: 2 //how much to rotate the triangle, in degrees rotate: 0;