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 nums = "0123456789".split("");
let letters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'.split("");

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

var gridX = letters.length;
var gridY = 2;

// Configure the sheet.
const canvas = document.querySelector("canvas");
const charWidth = canvas.width;
const charHeight = canvas.height;
canvas.width = gridX * charWidth;
canvas.height = gridY * charWidth;
const ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.rect(0, 0, gridX * charWidth, gridY *charHeight);
ctx.fillStyle = "white";
ctx.fill();
ctx.fillStyle = "black";
ctx.font = "30px Roboto";
ctx.textAlign = "center";
ctx.textBaseline = "middle";

var charIndex = 0;
var arr = nums;
for (let y = 0; y < gridY; ++y) {
  if (y == 1) {
    arr = letters;
  }
  for (let x = 0; x < arr.length; ++x) {
    const char = arr[x];
    const posX = x * charWidth + charWidth / 2;
    const posY = y * charHeight + charHeight / 2;
    /* ctx.fillStyle = getRndColor() */;
    /* ctx.fillRect(posX - charWidth / 2, posY - charHeight / 2, charWidth, charHeight) */;
    /* ctx.fillStyle = getRndColor() */;
    ctx.fillText(char, posX, posY);
  }
}