const square = new Konva.Shape({
x: 50,
y: 30,
stroke: 'rgba(0,0,0,0.5)',
strokeWidth: 20,
fill: 'green',
draggable: true,
width: 100,
height: 100,
sceneFunc: (ctx, shape) => {
ctx.rect(0, 0, shape.width(), shape.height());
// first stroke
ctx.strokeShape(shape);
// then fill
ctx.fillShape(shape);
}
});
layer.add(square);
const triangle = new Konva.Shape({
x: 250,
y: 30,
stroke: 'rgba(0,0,0,0.5)',
strokeWidth: 20,
fill: 'green',
draggable: true,
sceneFunc: (ctx, shape) => {
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(50, 100);
ctx.lineTo(-50, 100);
ctx.closePath();
// first stroke
ctx.strokeShape(shape);
// then fill
ctx.fillShape(shape);
}
});
layer.add(triangle);
Демо: https://jsbin.com/fumacupoku/edit?html,js,output