JSFiddle - React, Tailwind, and code Playground

by Andrew Poes

HTML

<canvas width="30" height="30"></canvas>
<a id="download" download="atlas.jpg" href="" onclick="download_img(this);">Download texture atlas</a>

CSS

canvas {
  outline: 1px solid #000000;
}

JavaScript

let string = "1234567890-=!@#$%^&&*()_+qwertyuiop[]asdfghjkl;'zxcvbnm,./QWERTYUIOP{}ASDFGHJKL:ZXCVBNM<>?¡™£¢∞§¶•ªº–≠œ∑´®†¥¨ˆ“‘åßlet©˙∆˚¬…æΩ≈˜µ÷ç√";
/* let string = " .>:L8C/,M"; */
arr = string.split("");
const set = new Set(arr);
arr = Array.from(set);
let chars = [];
let font = "bold 32px courier new";

download_img = function(el) {
  // get image URI from canvas object
  var imageURI = canvas.toDataURL("image/jpg");
  el.href = imageURI;
};

function getRndColor() {
    var r = 255*Math.random()|0,
        g = 255*Math.random()|0,
        b = 255*Math.random()|0;
    return 'rgb(' + r + ',' + g + ',' + b + ')';
}

function getLumaForChar(char) {
  const canvas = document.querySelector("canvas"),
  ctx = canvas.getContext("2d")
  const charWidth = canvas.width;
  const charHeight = canvas.height;
  ctx.beginPath();
  ctx.rect(0, 0, charWidth, charHeight);
  ctx.fillStyle = "black";
  ctx.fill();
  ctx.fillStyle = "white";
  ctx.font = font;
  /* font-family: 'Courier New', monospace; */
  //for centering text
  ctx.textAlign = "center";
  ctx.textBaseline = "middle";
  //draws text to canvas
  ctx.fillText(char, charWidth / 2, charHeight / 2);

  const imgData = ctx.getImageData(0, 0, charWidth, charHeight);
  const data = imgData.data;
  let colorSum = 0;
  let r, g, b, avg;
  //loops through image data
  for (let x = 0, len = data.length; x < len; x += 4) {
    //r, g, and b are always 0
    r = data[x];
    g = data[x + 1];
    b = data[x + 2];
    avg = Math.floor((r + g + b) / 3.0);
    colorSum += avg;
  }
  return Math.floor(colorSum / (charWidth * charHeight));
 }
for (const char of arr) {
  const b = getLumaForChar(char);
  chars.push([b, char]);
}
chars.sort((a, b) => a[0] - b[0]);
var gridX = Math.ceil(Math.sqrt(chars.length));
var gridY = Math.ceil(chars.length / gridX);

// Configure the sheet.
const canvas = document.querySelector("canvas");
const charWidth = canvas.width;
const charHeight = canvas.height;
canvas.width = gridX *...