JSFiddle - React, Tailwind, and code Playground

by icodeforlove

HTML

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

CSS

canvas {
-webkit-transform: scale(.5);   
-webkit-transform-origin: 0 0;
}

JavaScript

/*!
 
 Simple <canvas> Word Cloud
 by timdream

 usage:
  $('#canvas').wordCloud(settings); // draw word cloud on #canvas.
  $.wordCloudSupported // return true if the browser checks out
  $.miniumFontSize // return minium font size enforced by the browser
 
 available settings
    fontFamily: font list for text.
    gridSize: 8,
    ellipticity: ellipticity of the circle formed by word.
    center: [x,y] of the center of the circle. Set false to use center of canvas.
    drawMask: true to debug mask to show area covered by word.
    maskColor: color of the debug mask.
    maskGridWidth: width of the mask grid border.
    wordColor: color for word, could be one of the following:
        [CSS color value],
        'random-dark', (default)
        'random-light',
        [function(word, weight, fontSize, radius, theta)]
    backgroundColor: background to cover entire canvas or the detect against.
    wait: wait N ms before drawing next word.
    abortThreshold: abort and execute about() when the browser took more than N ms to draw a word. 0 to disable.
    abort: abort handler.
    weightFactor: 
    minSize: minium font size in pixel to draw (default: $.miniumFontSize / 2, larger than that is still look good using bilinear sampling in browser)
    wordList: 2d array in for word list like [['w1', 12], ['w2', 6]]
    clearCanvas: clear canvas before drawing. Faster than running detection on what's already on it.
    fillBox: true will mark the entire box containing the word as filled - no subsequent smaller words can be fit in the gap.
    shape: keyword or a function that represents polar equation r = fn(theta), available keywords:
        'circle', (default)
        'cardioid', (apple or heart shape curve, the most known polar equation)
        'diamond', (alias: 'square'),
        'triangle-forward',
        'triangle', (alias: 'triangle-upright')
        'pentagon',
        'star'
*/

"use strict";

// http://jsfromhell.com/array/shuffle
Array.prototype.shuffle...