JSFiddle - React, Tailwind, and code Playground

by paulL

HTML

<canvas id="canvas" width="400" height="400"></canvas>

JavaScript

var canvas = document.getElementById("canvas"),
    ctx = canvas.getContext("2d"),
   linGrad = ctx.createLinearGradient(50, 0, 250, 400), radGrad;

linGrad.addColorStop(0, "aquamarine");
linGrad.addColorStop(1, "darkolivegreen");
ctx.fillStyle = linGrad;
ctx.fillRect(0, 0, 400, 400);


radGrad = ctx.createRadialGradient(200, 200, 25, 200, 200, 150);

radGrad.addColorStop(0, "white");
radGrad.addColorStop(0.7, "yellow");
radGrad.addColorStop(1, "orange");
ctx.fillStyle = radGrad;
ctx.beginPath();
ctx.arc(230, 230, 150, 0, Math.PI * 2, false);
ctx.fill();