setLineDash([3,2]), draws a Solid Line instead of dashed lines. (Canvas HTML5)

Question

I'm trying to draw different rectangular designs using setLineDash and lineDashOffset(HTML5 Canvas-2d Context). But Solid lines are drawn instead of dashed lines. Please help.

Points to be noted:

Canvas Scaling is done.
drawLine API is used for drawing lines.
I'm using different integer points to draw lines.
setLineDash([3,2]). Strictly, dashed thickness is "3" and space between them is "2" should be used.

`

this.context.setLineDash([3,2]);
this.context.lineDashOffset = 2;  
drawLine(300,9.5,570,10);
drawLine(300,9.5,300,100);
drawLine(300,99.5,570,100);
drawLine(570,9.5,570,100);`

My Complete code for your reference: Codepen Link

Inspired from: Document Link

It would be great if you could include drawLine in your question, since this was actually where the problem came from. — Kaiido

Kaiido Kaiido · Accepted Answer · 2021-02-26T13:16:14

This happens because you close the path using closePath().

This method doesn't say "the path declaration is over", it says, "make my path an enclosed path", which means it will lineTo the last entrance point in the path. Doing so and depending on the line's length, the second line may have its own dashes cover the holes of the first line.

const context = canvas.getContext("2d");

function drawLine(x1, y1, x2, y2, mode) {
  context.beginPath();
  context.moveTo(x1, y1);
  context.lineTo(x2, y2);
  switch (mode) {
    case "closePath":
      context.closePath();
    case "lineTo":
      context.lineTo(x1, y1);
  }
  context.stroke();
}
context.lineWidth = 2;
context.setLineDash([3, 2]);

context.strokeStyle = "red";
drawLine(30, 9.5, 30, 100, "closePath");
context.strokeStyle = "blue";
drawLine(60, 9.5, 60, 100, "lineTo");
context.strokeStyle = "green";
drawLine(90, 9.5, 90, 100, "");

<canvas id="canvas"></canvas>

And to avoid this, don't call closePath().

setLineDash([3,2]), draws a Solid Line instead of dashed lines. (Canvas HTML5)

1 Answers