Text in Konva Custom Shape

Question

I need text output from my Custom Shape.

My code: sceneFunc(context, shape) {

    context.strokeStyle = "black";
    context.font = (15 / shape.parent.scale().x).toFixed(0) + "px arial";
    context.textBaseline = 'middle';
    context.textAlign = 'center';
    context.fillStyle = 'red';
  
    context.beginPath();
    context.strokeText("AAABBBCCC", shape.attrs.centerPoint.x, shape.attrs.centerPoint.y);
    context.closePath();
    context.fillStrokeShape(shape);
}

The text is properly rendered, but it is not filled. How can I fill the text?

Text output

score 0 · Answer 1 · answered Feb 05 '21 at 18:49

Konva can't automatically fill/stroke text, because the text is using slightly different methods for drawings.

If you want to draw text in custom shape, you don't need to use context.fillStrokeShape(shape);. Just draw what you want in sceneFunc. Use context.strokeText() and context.fillText().

Then manually create a hit graph (using rectangle) in hitFunc. For hit demo take a look here: https://konvajs.org/docs/events/Custom_Hit_Region.html#1-What-is-hitFunc

Text in Konva Custom Shape

1 Answers1