<canvas id="my-canvas" width="650px" height="500px">
</canvas>
let myCanvas = document.getElementById('my-canvas');

let ctx = myCanvas.getContext('2d');

ctx.strokeStyle = 'teal';
ctx.lineWidth = 10;
ctx.beginPath();
ctx.moveTo(25, 75);
ctx.lineTo(450,75);
ctx.lineCap = 'butt';
ctx.stroke();

ctx.beginPath();
ctx.strokeStyle ='darkslateblue';
ctx.lineWidth =  15
ctx.moveTo(25, 150);
ctx.lineTo(450, 150);
ctx.lineCap = 'round';
ctx.stroke();

ctx.beginPath();
ctx.strokeStyle ='darkgreen';
ctx.lineWidth =  12;
ctx.moveTo(25, 225);
ctx.lineTo(450, 225);
ctx.lineCap = 'square';
ctx.stroke();

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.