canvas-extras

1.0.7 • Public • Published

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.

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.

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.

Other bits

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

Thanks!

Package Sidebar

Install

npm i canvas-extras

Weekly Downloads

577

Version

1.0.7

License

ISC

Unpacked Size

5.38 kB

Total Files

3

Last publish

Collaborators

  • ohtrobinson