How to add multiple colors in Konva dashed line stroke

Question

Can someone please guide me to the right way of adding the white and black strokes as shown in the image? Dotted line image

I've tried passing an array of colors to the stroke property but it doesn't work.

const referenceLine = new Line({
                 points: [pos.x, pos.y],
                 stroke: ['black', 'white'],
                 strokeWidth: 1,
                 lineCap: 'round',
                 lineJoin: 'round',
                 dash: [3, 3],
                 strokeScaleEnabled: false
               });

Answer 1

The Konva.Line has the stroke property to set the color and the dash property to enable dashes. However, dashes are drawn by the use of gaps in the line - so that is the absence of color. Which means that it is not possible to draw a line with alternating colors. What you can do though is to draw two lines in the same position, using the same points data. Set one to use one colour and no dash, and the other to use the alternate color and with the dash property. That way the second line, with the dash-gaps, will draw over the solid color line and that solid color will appear in the gaps.

Here is some sample code for a Line with dashes. See example of drawing lines solid & dashed here https://konvajs.org/docs/shapes/Line_-_Simple_Line.html. This example is not the solution that you need precisely but the final step of drawing two lines should be easy to intuit.

  // dashed line
  var greenLine = new Konva.Line({
    points: [5, 70, 140, 23, 250, 60, 300, 20],
    stroke: 'green',
    strokeWidth: 2,
    lineJoin: 'round',
    /*
     * line segments with a length of 33px
     * with a gap of 10px
     */
    dash: [33, 10],
  });