JSFiddle - React, Tailwind, and code Playground

by Darby Rathbone

JavaScript

var c = document.createElement('canvas'),
    ctx = c.getContext('2d'),
    grd;

document.body.appendChild(c);
c.width = c.height = 512;
// Create gradient
grd = ctx.createLinearGradient(0.000, 150.000, 300.000, 150.000);

// Add colors
grd.addColorStop(0.000, 'hsl(0, 0%, 50%)');
grd.addColorStop(0.150, 'hsl(255, 100%, 100%)');


// Fill with gradient
ctx.fillStyle = grd;
ctx.fillRect(0, 0, 300.000, 600.000);
/*grd = ctx.createLinearGradient(150.000, 0.000, 150.000, 300.000);
      
      // Add colors
      grd.addColorStop(0.000, 'hsla(0%, 100%, 100%, 1.000)');
      grd.addColorStop(1.000, 'hsla(100%, 100%, 0%, 1.000)');
      
      // Fill with gradient
      ctx.fillStyle = grd;
      ctx.fillRect(0, 0, 300.000, 300.000);
grd = ctx.createLinearGradient(0.000, 600.000, 000, 300.000);
      
      // Add colors
      grd.addColorStop(0.000, 'hsla(0%, 50%, 100%, 1.000)');
      grd.addColorStop(1.000, 'hsla(100%, 50%, 100%, 0.000)');
      
      // Fill with gradient
      ctx.fillStyle = grd;
      ctx.fillRect(0, 300, 300.000, 300.000);*/



var lab = JSON.parse('{"xyzTemp":[0.3382841261267309,0.3559124708057392,0.387528175587413],"xyzTemp2":[0.3559124708057392,0.3559124708057392,0.3559124708057392],"const01":0.13793103448275862,"const02":0.4166666666666667,"tempR":0.6309834126647,"tempG":0.6309783987359889,"tempB":0.6310041286442635,"xRGB":[160.9007702294985,160.8994916776772,160.90605280428719]}');
console.log(lab);
lab.convert = function (a, b, c) {
    this.xyzTemp[1] = (a + 16) / 116;
    this.xyzTemp[0] = (b / 500) + this.xyzTemp[1];
    this.xyzTemp[2] = this.xyzTemp[1] - (c / 200);
    this.xyzTemp2[0] = Math.pow(this.xyzTemp[0], 3);
    this.xyzTemp2[1] = Math.pow(this.xyzTemp[1], 3);
    this.xyzTemp2[2] = Math.pow(this.xyzTemp[2], 3);
    if (this.xyzTemp2[0] > 0.008856) {
        this.xyzTemp[0] = this.xyzTemp2[0]
    } else {
        this.xyzTemp[0] = (this.xyzTemp[0] - this.const01) / 7.787037
    }
    if (this.xyzTemp2[1] > 0.008856) {
    ...