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

Installation

npm i canvas-extras

Usage

$3

To use canvas-extras, you must already:

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

$3

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

##### Note

For the progress bar to work correctly, do not use any code that changes the bar's appearance (e.g. fill() or stroke()) as it will cause the bar to appear incorrectly.

##### Example

``javascript
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)

$3

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

##### Example
`javascript
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)

$3

Stadiums are also known as capsule shapes or pill shapes

ctx.stadium(x,y, width, height)

##### Example
`javascript
ctx.beginPath();
ctx.fillStyle = '#aaaaaa';
ctx.stadium(50,50, 500, 100);
ctx.fill();
ctx.closePath();
``

This will yield this result:

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

Other bits

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

Thanks!