<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Font maker</title> <style> input[type="checkbox"] { all: unset; display: inline-block; border: 1px solid #ccc; width: 20px; height: 20px; /* No padding */ padding: 0; margin: 0; vertical-align: middle; } input[type="checkbox"]:checked { background-color: rgb(0, 0, 0); } input[type="checkbox"]:focus { outline: none; } </style> </head> <body> <div id="inputbox"> <!-- 16x16 grid of checkboxes --> </div> <pre id="output"> </pre> <canvas id="renderedOutput"> Your browser doesn't support canvas. </canvas> <script> var drawing = document.getElementById("inputbox"); var routput = document.getElementById("renderedOutput"); var ctx = routput.getContext("2d"); chkNum = 0; for (var i = 0; i < 8; i++) { for (var j = 0; j < 8; j++) { var checkbox = document.createElement("input"); chkNum++; checkbox.type = "checkbox"; checkbox.id = chkNum; checkbox.addEventListener("change", function() { updateOutput(); }); drawing.appendChild(checkbox); } drawing.appendChild(document.createElement("br")); } var output = document.getElementById("output"); var outputText = ""; var listOfBoxes = []; var updateOutput = () => { listOfBoxes = []; // for each row of checkboxes, give it its own array in the listOfBoxes array for (var i = 0; i < 8; i++) { listOfBoxes.push([]); for (var j = 0; j < 8; j++) { var chk = document.getElementById(i * 8 + j + 1); if (chk.checked) { listOfBoxes[i].push(1); } else { listOfBoxes[i].push(0); } } } // run through each item in the listOfBoxes array and remove leading zeros for (var i = 0; i < listOfBoxes.length; i++) { var row = listOfBoxes[i]; // run through the array backwards for (var j = row.length - 1; j >= 0; j--) { // if it's a 0, remove it if (row[j] == 0) { row.splice(j, 1); } else { // if it's a 1, stop removing break; } } } // output the listOfBoxes array to the output textarea, row by row outputText = "const fntCHAR = [\n"; for (var i = 0; i < listOfBoxes.length; i++) { outputText += " ["; for (var j = 0; j < listOfBoxes[i].length; j++) { if (listOfBoxes[i][j] == 1) { outputText += "1"; } else { outputText += ""; } if (j != listOfBoxes[i].length - 1) { outputText += ", "; } } outputText += "],\n"; } outputText += "];\n"; output.innerHTML = outputText; } updateOutput(); </script> </body> </html>