Circle & Arc Generator With Canvas – circlesJS

Category: Javascript | August 31, 2019
Author: Madmadmax
Views Total: 548 views
Official Page: Go to website
Last Update: August 31, 2019
License: MIT


Circle & Arc Generator With Canvas – circlesJS


The circlesJS JavaScript library makes it simple to generate customizable circle and arc shapes using HTML5 canvas.

How to use it:

Include the main JavaScript file ‘circles.js’ on the web page.

<script src="circles.js"></script>

Create a container to place the generated circles and arcs.

<div id="container"></div>

Initialize the circlesJS.

let circles = new Circles("container");

Create the circles and arcs with your own styles.

circles.add({id: 1, x: 40, y: 50, size: 30, width: 2, fill: 30, color: "#f00"});
circles.add({id: "two", x: 90, y: 140, size: 40, width: 6, fill: 75, color: "#0f0"});
circles.add({id: "three", x: 200, y: 200, size: 50, width: 15, fill: 90, color: "#000"});

Draw the circles and arcs inside the container.


Change a specific shape.

circles.change([{id: 1, params: {fill: 70, width: 5}}])

Delete & clear.

// deletes the 3rd shape

// deletes all the shapes

// destroys the library


v2.0 (08/31/2019)

  • [fix] animation duration bug

You Might Be Interested In:

Leave a Reply