JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <title>Stroke Endpoint Test</title>
</head>
<body>

<canvas id="canvas" width="320" height="240"></canvas>

</body>
</html>

CSS

canvas {
    border: 1px solid black;
}

JavaScript

var context = document.getElementById( 'canvas' ).getContext( '2d' );
    
context.lineWidth = 30;
context.moveTo( 40, 40 );
context.quadraticCurveTo( 200, 200, 200, 180 );
context.stroke();