JSFiddle - React, Tailwind, and code Playground

by Hooman Askari

HTML

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

JavaScript

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

// Create a radial gradient
// The inner circle is at x=110, y=90, with radius=30
// The outer circle is at x=100, y=100, with radius=70

// var gradient = new fabric.Gradient({
//     type: 'radial',
//     gradientUnits: 'percentage',
//     coords: {
//         x1: 0.5,
//         y1: 0.5,
//         x2: 0.5,
//         y2: 0.5,
//         r1: 0,
//         r2: 0.5
//     },
//     colorStops:[
//         { offset: 0, color: 'red' },
//         { offset: 1, color: 'blue'}
//     ]
// });
var gradient = ctx.createRadialGradient(50,50,0, 50,50,150);

// Add three color stops
gradient.addColorStop(0, 'red');
gradient.addColorStop(0.5, 'blue');
gradient.addColorStop(1, 'yellow');

// Set the fill style and draw a rectangle
ctx.fillStyle = gradient;
ctx.rect(0, 0, 200, 200);
ctx.fill();