JSFiddle - React, Tailwind, and code Playground

by WolfeSVK

HTML

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

CSS

body {
    background: #CEF;
}

JavaScript

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






ctx.clearRect(0, 0, canvas.width, canvas.height);


ctx.globalCompositeOperation = 'source-over'; //default


ctx.rect(0, 0, 100, 100);
var grd = ctx.createLinearGradient(0, 0, 0, 100);


grd.addColorStop(0.000, 'rgba(41, 137, 204, 1.000)');
grd.addColorStop(0.500, 'rgba(255, 255, 255, 1.000)');
grd.addColorStop(0.520, 'rgba(144, 106, 0, 1.000)');
grd.addColorStop(0.640, 'rgba(217, 159, 0, 1.000)');
grd.addColorStop(1.000, 'rgba(255, 255, 255, 1.000)');


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






ctx.fillStyle = '#fff'; //color doesn't matter, but we want full opacity
ctx.globalCompositeOperation = 'destination-in';
ctx.beginPath();
ctx.arc(50, 50, 50, 0, 2 * Math.PI, false);
ctx.closePath();
ctx.fill();

imgData = ctx.getImageData(0, 0, 100, 100);
console.log(imgData);
ctx.putImageData(imgData, 200, 70);