Не правильно рисуется вертикальная прерывистая линия canvas
Пытаясь сделать кривую прерывистую линию на js, у меня появилась много проблем, одна из которых - это неправильное отображение вертикальных линий. Иногда они размываются, иногда вообще выглядит как сплошная. Как это решить, помогите пожалуйста)

Ответы (1 шт):
Автор решения: Igor
→ Ссылка
Линия [2,1] так не выглядит. Вы что-то делаете с канвой, растягивая ее в горизонтальном направлении.
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.lineWidth = 1;
ctx.setLineDash([2,1]);
ctx.beginPath();
ctx.moveTo(20,20);
ctx.lineTo(170,20);
ctx.lineTo(170,120);
ctx.lineTo(20,120);
ctx.lineTo(20,20);
ctx.lineTo(170,120);
ctx.stroke();
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">