JSFiddle - React, Tailwind, and code Playground

by Will Stott

HTML

<canvas id="canvas" width="1" height="512"></canvas>

JavaScript

const canvas = document.getElementById("canvas");
  canvas.width = 1;
  canvas.height = 512;
  const ctx = canvas.getContext("2d");
  const gradient = ctx.createLinearGradient(0, 0, 0, 512);
  gradient.addColorStop(0, "red");
  gradient.addColorStop(1, "blue");
  ctx.fillStyle = gradient;
  ctx.fillRect(0, 0, 10, 512);
  const img = new Image(1, 512);
  img.src = canvas.toDataURL();
  document.body.append(img);