canvas-circle

0.1.1 • Public • Published

Canvas Circle

Geometry type for canvas-tree

Creates Path2D object represented circle

Installation

    $ npm install --save canvas-circle

Usage

 
    import circle from 'canvas-circle';
    import createCanvas from 'canvas-tree';
 
    const style = {
        top: 60,
        left: 80,
        radius: 10,
        stroke: '#3333ff',
        fill: '#fffaaa',
        strokeWidth: 2,
        hover: {
            stroke: '#ff3333'
        }
    }
 
    const $canvas = document.getElementById('canvas');
 
    // as geometry type for canvas-tree
    const canvas = createCanvas($canvas);
 
    canvas.update({
        children: [
            {
                geometry: circle,
                children: [],
                style
            }
        ]
    });
 
    // standalone
    const path = circle(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...
 

Package Sidebar

Install

npm i canvas-circle

Weekly Downloads

2

Version

0.1.1

License

MIT

Last publish

Collaborators

  • rb-lab