JSFiddle - React, Tailwind, and code Playground

by Lazaro Contreras

HTML

<canvas id="canvas" width="300" heigth="300"></canvas>

JavaScript

var ctx = canvas.getContext("2d")
ctx.beginPath()

ctx.moveTo(0, 0)

ctx.bezierCurveTo(0, 0, 0, 0, 0, 50)

ctx.bezierCurveTo(0, 200, 128, 110, 150, 110)

ctx.bezierCurveTo(172, 110, 300, 200, 300, 50)

ctx.bezierCurveTo(300, 50, 300, 0, 300, 0)

var grd = ctx.createLinearGradient(0, 0, 500, 0);
grd.addColorStop(0, "purple");
grd.addColorStop(1, "red");

ctx.fillStyle = grd;
//ctx.stroke()
ctx.fill();