Exciting news!Announcing our $4.6M Series Seed. Learn more
Log in


Package Overview
File Explorer

Advanced tools


Collection of easy to use elements with HTML5 Canvas


Version published
Yearly downloads
increased by112.78%

Weekly downloads



Canvas Elements

Release Size License

Canvas Elements is a library of commonly used components for HTML5 canvas made easy to use with JavaScript and Node.js. It wraps the structure and the styling of elements into one which makes it easy to create new elements on the canvas.


Using NPM

To use Canvas Elements in Node.js, install the npm package by using the command below.

npm install canvas-elements

Using CDN

The project also includes a minified CDN file in the build/cdn directory of the project.


Using the library

Using Node

var CanvasElements = require('canvas-elements'); // All elements are in CanvasElements object. Example: CanvasElements.Circle, CanvasElements.Text // Using ES6 import, specifically choose elements that you need import { Circle, Text } from 'canvas-elements';

Note: If you are using ES6 import, ignore CanvasElements object in the following documentation.

Using CDN

CDN exposes a CanvasElements object to the window which contains the constructors of all the elements.

var circle = new CanvasElements.Circle({ // options });

Example usage

This example program creates a circle with blue rounded rectangle which has 'Hello Canvas' text at the center.
Check it on JSFiddle

var canvas = document.getElementsByTagName('canvas')[0]; // Get the canvas element reference var ctx = canvas.getContext('2d'); // Get context of the canvas // Create a circle var circle = new CanvasElements.Circle({ x: 80, y: 80, r: 60, background: 'white', borderWidth: 4, borderColor: '#000', ctx: ctx }); // Creates a blue rounded rectangle var text = new CanvasElements.Rect({ x: 25, y: 63, r: 20, w: 110, h: 30, background: '#03a9f4', ctx: ctx }) // Create 'Hello Canvas' text var text = new CanvasElements.Text({ x: 80, y: 80, background: '#ffffff', text: 'Hello Canvas', size: 16, align: 'center', baseline: 'middle', weight: '600', ctx: ctx });

Options Reference

All the elements constructors take options object which allows you to configure the structure and style of the element.

Common options

These options are common between all the elements included in the library.

xnumber (required)X coordinate of the element in canvas
ynumber (required)Y coordinate of the element in canvas
ctxCanvasRenderingContext2D (required)Context of the canvas to which the element must be drawn
backgroundstring (optional)Fill color. Eg. #6ddad0, rgba(20, 30, 40, 0.5)
borderWidthnumber (optional)Thickness of the border
borderColorstring (optional)Color of the border
rotationnumber (optional)Rotation of the element in radians. Center is geometric center for shapes and starting coordinates for Text element


Some exclusive options for Circle element.

rnumber (required)Radius of the circle

Rect (Rectangle)

Some exclusive options for Rect element to create rectangles.

wnumber (required)Width of the rectangle
hnumber (required)Height of the rectangle
rnumber (optional)Roundness of every corner. Same as border-radius CSS property


Some exclusive options for Ellipse element.

radiusXnumber (required)Horizontal radius of the ellipse
radiusYnumber (required)Vertical radius of the ellipse


Some exclusive options for Line element.

x2number (optional)Ending x coordinate of the line
y2number (optional)Ending y coordinate of the line
rnumber (optional)Distance from (x, y) for Polar system
anglenumber (optional)Angle from the horizontal axis in radians (Clockwise is positive) for Polar system
lineCapstring (optional)Style for the ends of the line. Takes values square (default), round, butt


Some exclusive options for Text element to render text.

textstring (required)Text to be shown
sizenumber (required)Font size
fontstring (optional)Font family
alignstring (optional)Horizontal text alignment
baselinestring (optional)Vertical text alignment
weightstring (optional)Text weight


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-elements cd canvas-elements npm 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 3030.

To build the project

npm run build

To bundle and minify source

npm run bundle

Bundled CDN file would be located in build/cdn directory.


This project is under MIT License




Subscribe to our newsletter

Get open source security insights delivered straight into your inbox. Be the first to learn about new features and product updates.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc