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!

    Install

    npm i canvas-extras

    DownloadsWeekly Downloads

    218

    Version

    1.0.7

    License

    ISC

    Unpacked Size

    5.38 kB

    Total Files

    3

    Last publish

    Collaborators

    • ohtrobinson