JSFiddle - React, Tailwind, and code Playground

HTML

<body>
<canvas id=c width="600" height="600"></canvas>
</body>

CSS

#c {
  position:absolute;
  top:10;
  left:10;
  border: solid 1px black;
  }

#debug {
  position:absolute;
  top:10;
  left:820;  
  }

JavaScript

// Jon Palin, 6 October 2012
// Colors added by Glenn Willen, 6 October 2012
// inspired by http://mathlesstraveled.com/2012/10/05/factorization-diagrams/
//////////////////////////////////////////////////////////////////////
var N; // leave N undefined to show the first 100 diagrams
//var N = 3 * 4 * 7 * 11; // choose N to draw a particular diagram
// start the diagram with the largest or smallest prime
var smallfirst = true;
//////////////////////////////////////////////////////////////////////
var c;
var PI = 355 / 113;
var off2 = 0;

function start() {
    c = document.getElementById("c").getContext("2d");
    if (N === undefined) {
        var S = 60;
        for (var i = 1; i <= 100; i++) {
            var ci = (i - 1) % 10 + 1;
            var ri = (i - ci) / 10;
            draw(i, S * (ci - 0.5), S * (ri + 0.5), S * 0.45, 0);
            c.beginPath();
            c.rect(S * (ci - 1), S * ri, S, S);
            c.stroke();
        }
    }
    else {
        draw(N, 300, 300, 270, 0);
    }
}

// Random color code from https://github.com/sterlingwes/RandomColor,
// copyright 2012 Wes Johnson, under the MIT License.

var RColor = function() {
    this.hue = Math.random(), this.goldenRatio = 0.618033988749895;
};

RColor.prototype.hsvToRgb = function(h, s, v) {
    var h_i = Math.floor(h * 6),
        f = h * 6 - h_i,
        p = v * (1 - s),
        q = v * (1 - f * s),
        t = v * (1 - (1 - f) * s),
        r = 255,
        g = 255,
        b = 255;
    switch (h_i) {
    case 0:
        r = v, g = t, b = p;
        break;
    case 1:
        r = q, g = v, b = p;
        break;
    case 2:
        r = p, g = v, b = t;
        break;
    case 3:
        r = p, g = q, b = v;
        break;
    case 4:
        r = t, g = p, b = v;
        break;
    case 5:
        r = v, g = p, b = q;
        break;
    }
    return [Math.floor(r * 256), Math.floor(g * 256), Math.floor(b * 256)];
};

RColor.prototype.get = function(hex, saturation, value) {
    this.hue...