JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="canvas1" width="500" height="500"></canvas>

JavaScript

var can = document.getElementById('canvas1');
var ctx = can.getContext('2d');

ctx.lineWidth = 5;

// linear gradient from start to end of line
var grad= ctx.createLinearGradient(50, 50, 150, 150);
grad.addColorStop(0, "red");
grad.addColorStop(0.5, "green");
grad.addColorStop(1, "blue");
ctx.strokeStyle = grad;

ctx.beginPath();
ctx.moveTo(50,50);
ctx.lineTo(150,150);
ctx.lineTo(50,250);
ctx.lineTo(250,350);
ctx.lineJoin="round";
ctx.stroke();