Changing the shape of line capsSection

by Sillvva

HTML

<!-- Learn about this code on MDN: https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineCap -->

<canvas id="canvas" width="300" height="300"></canvas>
<div id="output"></div>

CSS

canvas {
  background-color: #eee;
}

JavaScript

const canvas = document.getElementById('canvas');
const context = canvas.getContext('2d');

let radius = Math.round(Math.min(canvas.width, canvas.height) * 0.3);

let x = canvas.width / 2, 
		y = canvas.height / 2;

const roadAngle = 60;

const opts = {
	dirtbl: [60]
};

let curAngle = Math.PI - (opts.dirtbl[0]) * Math.PI / 180;
let x2 = x + (radius) * Math.sin(curAngle);
let y2 = x + (radius) * Math.cos(curAngle);

context.beginPath();
context.moveTo(x,y);
context.lineTo(x2,y2);

context.lineWidth = 2;
context.strokeStyle = '#000000';
context.stroke();

dtdir = 1;
context.beginPath();
curAngle1 = Math.PI - (opts.dirtbl[0] + (dtdir == 1 ? 15 : -15)) * Math.PI / 180;
context.moveTo(x + radius*17/32*Math.sin(curAngle), y + radius*17/32*Math.cos(curAngle));
context.lineTo(x + radius*17.5/32*Math.sin(curAngle1), y + radius*17.5/32*Math.cos(curAngle1));
context.fillStyle = '#000000';
context.lineWidth = 2;
context.stroke();