CODEWITHSUNDEEP
javascriptkonvajskonvakonvajs-reactjs
Vardan
Vardan

Reputation: 75

Text's `fill` color is overriden by `stroke` in Konva

I have some Konva Text node, whose fill attribute is set to black and stroke is set to some other color. In my canvas it looks as expected. The problem happens when I convert the canvas to base64 image to download it as an image file - in that case the downloaded image looks like in the screenshot below:

(the canvas is on the left side, the right one is the downloaded image)

Text

As you can see, the stroke color is applied to the text's own color as well.

I created a Codesandbox example with a Text node that has the same attributes as in my environment, here is how that node is created:

const text = new Konva.Text({
      x: 26.330053300533024,
      y: 128,
      text: "Add a body text",
      defaultText: "Add a body text",
      fontSize: 22,
      fontFamily: "Montserrat",
      draggable: true,
      name: "text",
      fontStyle: "300",
      id: "textkgrsl68w",
      is_settings: true,
      wrap: "word",
      padding: 5,
      fill: "black",
      opacity: 1,
      isPremium: false,
      width: 183.5,
      visible: true,
      rotation: 0,
      scaleX: 1,
      scaleY: 1,
      offsetX: 0,
      offsetY: 0,
      skewX: 0,
      skewY: 0,
      stroke: "rgba(255,0,0,1)",
      strokeWidth: 3.75
    });

As you can see, it has the same (incorrect) look - without the inline color. I played with fontSize in Codesandbox and when I set it to very big value (like 100), the text's inline color became visible. I assumed it can be some ratio problem, but as we see on the screenshot, the text's size is similar in both canvas and downloaded image.

How can this be fixed, maybe there is some extra attribute that should also be set?

konva: 7.1.4

react-konva: 16.12.0-0

Upvotes: 2

Views: 1605

Answers (1)

lavrton
lavrton

Reputation: 20288

UPDATED:

You can use text.fillAfterStrokeEnabled(true); to draw fill over stroke.

Old answer:

By default Konva is drawing fill first then stroke. So it will be a text itself and then stroke around it (that goes overfill part).

Probably one-day Konva will support a different order, but at the current moment [email protected] can't do that.

As a workaround just use two Konva.Text instances. First for stroke, second for fill.

https://codesandbox.io/s/download-konva-text-node-with-stroke-as-base-64-image-forked-w0z4v

Upvotes: 3

Related Questions