How to round corners of CANVAS dotted line?

Question

css

Hello everybody! There is such a code

<canvas id="tutorial" width="359" height="299"></canvas>
<script>
                                var canvas = document.getElementById('tutorial');
var ctx = canvas.getContext('2d');

// Так как аргументом функции может быть только радиан,
// а не угол в градусах, то  переводим.
var a = 45 * (Math.PI / 180);
// Длина линии.
var r = 100;


ctx.setLineDash([10, 3]);
ctx.beginPath();
ctx.moveTo(0, 100);
ctx.lineTo(Math.sin(a) * r, Math.cos(a) * r);
ctx.lineWidth = 4;
ctx.strokeStyle="#fff";
ctx.stroke();
</script>

Как мне скруглить углы пунктира?

Answer 1

ctx.lineCap = 'round';
it 's all on topic.