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)

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

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)

Stadiums

Stadiums are also known as capsule shapes or pill shapes

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

Example

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!