canvas-rounded-rectangle
v0.0.2
Published
Draw rounded rectangle on canvas using css-alike styles
Downloads
3
Readme
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...