canvas-rounded-rectangle

    0.0.2 • Public • Published

    Canvas Rounded Rectangle

    Geometry type for canvas-tree

    Creates Path2D object represented rounded rectangle

    Installation

        $ npm install --save canvas-rounded-rectangle

    Usage

     
        import roundedRectangle from 'canvas-rounded-rectangle';
        import createCanvas from 'canvas-tree';
     
        const style = {
            top: 60,
            left: 80,
            width: 100,
            height: 50,
            stroke: '#3333ff',
            fill: '#fffaaa',
            borderRadius: 5,
            strokeWidth: 2,
            hover: {
                stroke: '#ff3333'
            }
        }
     
        const $canvas = document.getElementById('canvas');
     
        // as geometry type for
        const canvas = createCanvas($canvas);
     
        canvas.update({
            children: [
                {
                    geometry: roundedRectangle,
                    children: [],
                    style
                }
            ]
        });
     
        // standalone
        const path = roundedRectangle(style);
        const ctx = $canvas.getContext('2d');
        ctx.lineWidth = style.strokeWidth;
        ctx.strokeStyle = style.stroke;
        ctx.fill =  style.fill;
        ctx.fill(path);
        ctx.stroke(path);
        // if(ctx.isPointInPath(path, x, y)) ... etc...
     

    Install

    npm i canvas-rounded-rectangle

    DownloadsWeekly Downloads

    12

    Version

    0.0.2

    License

    MIT

    Last publish

    Collaborators

    • rb-lab