canvas-rounded-rectangle v0.0.2

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...