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");
circles.init();

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.

circles.draw();

Change a specific shape.

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

Delete & clear.

// deletes the 3rd shape
circles.delete("three");
// deletes all the shapes
circles.deleteAll();
// destroys the library
circles.clear();

Changelog:

v2.0 (08/31/2019)

• [fix] animation duration bug