<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();
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.