To use Canvas Elements in Node.js, install the npm package by using the command below.
npm install canvas-elements
The project also includes a minified CDN file in the
build/cdn directory of the project.
Using the library
var CanvasElements = ;// All elements are in CanvasElements object. Example: CanvasElements.Circle, CanvasElements.Text// Using ES6 import, specifically choose elements that you need;
Note: If you are using ES6 import, ignore
CanvasElements object in the following documentation.
CDN exposes a
CanvasElements object to the window which contains the constructors of all the elements.
var circle =// options;
This example program creates a circle with blue rounded rectangle which has 'Hello Canvas' text at the center.
Check it on JSFiddle
var canvas = document0; // Get the canvas element referencevar ctx = canvas; // Get context of the canvas// Create a circlevar circle =x: 80y: 80r: 60background: 'white'borderWidth: 4borderColor: '#000'ctx: ctx;// Creates a blue rounded rectanglevar text =x: 25y: 63r: 20w: 110h: 30background: '#03a9f4'ctx: ctx// Create 'Hello Canvas' textvar text =x: 80y: 80background: '#ffffff'text: 'Hello Canvas'size: 16align: 'center'baseline: 'middle'weight: '600'ctx: ctx;
All the elements constructors take options object which allows you to configure the structure and style of the element.
These options are common between all the elements included in the library.
||X coordinate of the element in canvas|
||Y coordinate of the element in canvas|
||Context of the canvas to which the element must be drawn|
||Fill color. Eg.
||Thickness of the border|
||Color of the border|
||Rotation of the element in radians. Center is geometric center for shapes and starting coordinates for
Some exclusive options for Circle element.
||Radius of the circle|
Some exclusive options for Rect element to create rectangles.
||Width of the rectangle|
||Height of the rectangle|
||Roundness of every corner. Same as
Some exclusive options for Ellipse element.
||Horizontal radius of the ellipse|
||Vertical radius of the ellipse|
Some exclusive options for Line element.
||Ending x coordinate of the line|
||Ending y coordinate of the line|
||Distance from (x, y) for Polar system|
||Angle from the horizontal axis in radians (Clockwise is positive) for Polar system|
||Style for the ends of the line. Takes values
Some exclusive options for Text element to render text.
||Text to be shown|
||Horizontal text alignment|
||Vertical text alignment|
To contribute to the development of this project, you must first fork this project into your own account. Make sure you have a recent version of Node.js installed. Then follow the given commands
git clone https://github.com/your-username/canvas-elementscd canvas-elementsnpm install
The source code is located in the
src folder. Once the project is built or bundled,
build directory would be created which
contains the code for distribution.
To run the development server
Playground is included in the project in
playground directory. This is used to test features of Canvas Elements during development.
Do not commit changes in playground.
npm run dev
This will start a live development server on port
To build the project
npm run build
To bundle and minify source
npm run bundle
Bundled CDN file would be located in
This project is under MIT License