JSFiddle - React, Tailwind, and code Playground

by Станислав Некрасов

HTML

<canvas></canvas>

CSS

canvas {
  border: 1px solid #000;
}

JavaScript

let cnv = document.querySelector('canvas'),
	ctx = cnv.getContext('2d');
let yaColor = '#f7382d';

let points = [
	[0, 0.1],
  [3 + 7 / 31, 0.1],
  [3 + 10 / 31, 0.3],
  [3 + 11 / 31, 100],
  [7, 10]
];
let maxX = 7, maxY = 10;

let c = (p) => [p[0] / maxX * 600, 400 - p[1] / maxY * 400]

cnv.width = 600;
cnv.height = 400;
ctx.strokeStyle = yaColor;
ctx.lineWidth = 2;

ctx.moveTo(...c(points[0]));
for (let i = 1; i < points.length; i++) {
  ctx.lineTo(...c(points[i]));
  ctx.stroke();
}