JSFiddle - React, Tailwind, and code Playground

by pimvdb

HTML

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

JavaScript

var ctx = $('#cv').get(0).getContext('2d');

var g = ctx.createRadialGradient(200, 200, 0, 200, 200, 200);
g.addColorStop(0, 'red');
g.addColorStop(1, 'blue');

ctx.fillStyle = g;
ctx.fillRect(0, 0, 400, 400);

var imgdata = ctx.getImageData(0, 0, 400, 400);
var data = imgdata.data;

for(var i = 0; i < data.length; i += 4) {
    data[i]     = nearest(data[i],     8);
    data[i + 1] = nearest(data[i + 1], 8);
    data[i + 2] = nearest(data[i  +2], 4);
}

ctx.putImageData(imgdata, 0, 0);

function nearest(x, a) {
    return Math.floor(x / (255 / a)) * (255 / a);
}