JSFiddle - React, Tailwind, and code Playground

HTML

<canvas width="350" height="200"></canvas>

CSS

body { text-align:center; margin:1em; background:#eee }
canvas { background:#fff; border:1px solid #ccc }

JavaScript

var ctx = document.querySelector('canvas').getContext('2d');
ctx.lineWidth = 10;

ctx.beginPath();
ctx.strokeStyle = 'red';
ctx.moveTo(50,100);
ctx.lineTo(100,150);
ctx.lineTo(150,100);
ctx.closePath();
ctx.lineTo(50,50);
ctx.stroke();

ctx.translate(150,0);
ctx.beginPath();
ctx.strokeStyle = 'blue';
ctx.moveTo(50,100);
ctx.lineTo(100,150);
ctx.lineTo(150,100);
//ctx.closePath();
ctx.lineTo(50,50);
ctx.stroke();