canvas-extras

canvas-extras adds extra handy bits to canvas, including Progress Bars, rounded rectangles, and stadiums.

Installation

npm i canvas-extras

Usage

Prerequisites

To use canvas-extras, you must already:

• Have canvas installed and required
• Have a functioning canvas and 2D context to work with

Progress bars

ctx.progressBar(currentProgress, maxProgress, x, y, width, height, barFillColor, emptyFillColor)

Example

ctx.beginPath();
ctx.progressBar(5, 10, 50, 50, 200, 100, 'orange');
ctx.endPath();

This will yield this result:

![Image of progress bar.] (https://rollbot.net/images/progress1.png)

Rounded rectangles

ctx.roundRect(x,y, width, height, roundness)

Example

ctx.beginPath();
ctx.fillStyle = '#aaaaaa';
ctx.roundRect(50,50, 100, 100, 25);
ctx.fill();
ctx.closePath();

This will yield this result:

![Image of rounded square.] (https://rollbot.net/images/square.png)

Other bits

I'd really appreciate it if you gave a bit of credit to me if you use my package!

Thanks!