JSFiddle - React, Tailwind, and code Playground

by bairog

HTML

<canvas></canvas>

JavaScript

const canvas = document.querySelector("canvas");
const ctx = canvas.getContext("2d");
const grad = ctx.createLinearGradient(0,0,300,150);
// implicit from -Infinity "green"
grad.addColorStop(0.20, "#43dea6");
grad.addColorStop(0.20, "orange"); // same stop as previous color
grad.addColorStop(0.40, "orange");
grad.addColorStop(0.40, "#ed7506"); // same stop as previous color
grad.addColorStop(0.60, "#ed7506"); 
grad.addColorStop(0.60, "#e44269"); // same stop as previous color
grad.addColorStop(0.80, "#e44269");
grad.addColorStop(0.80, "#c0c0c0"); // same stop as previous color
// implicit to +Infinity "red"
ctx.fillStyle = grad;
ctx.fillRect(0,0,300,150);