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;ctx;ctx;
This will yield this result:
Rounded rectangles
ctx.roundRect(x,y, width, height, roundness)
Example
ctx;ctxfillStyle = '#aaaaaa';ctx;ctx;ctx;
This will yield this result:
Stadiums
Stadiums are also known as capsule shapes or pill shapes
ctx.stadium(x,y, width, height)
Example
ctx;ctxfillStyle = '#aaaaaa';ctx;ctx;ctx;
This will yield this result:
Other bits
I'd really appreciate it if you gave a bit of credit to me if you use my package!
Thanks!