Search code examples
javascriptcanvaskonvajskonva

JS Canvas: Konva bezier issue

I want to draw polyline with round corners like this:

enter image description here

There is an issue with setting points to line with Konva library.

I am trying to use bezier property to simulate smooth corners without tension and as doc says:

if no tension is provided but bezier=true, we draw the line as a bezier using the passed points

But if I set bezier: true, it receives only 3 pairs of points[x,y] and ignores the rest of point array and then just cuts the polyline.

Example on codeopen

I don't event have an idea how to draw straight polyline with rounded corners without bezier option only with tension.

Is there any approach to implement such figure with Konva or other JS Canvas library?

Solution

  • Actually, there is a way to draw rounded corners only with Konva.Path:

    var path = new Konva.Path({
        x: 20,
        y: 20,
        data: 'm0 0 h 90 q 10 0 10 10 v 80 q 0 10 10 10 h 90',
        stroke: 'red',
      });

    Using quadratic curve bezier (Q) operator from svg path rules we can achieve such result:

    enter image description here

    This is an example on Codepen.