<!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 tester</title>
</head>
<body>
<canvas id="cvs" width="1000">
Your browser doesn't support canvas.
</canvas>
<input type="text" id="txtinput">
<script>
// Inspired by https://github.com/PaulBGD/PixelFont
const fntA = [
[, , 1, 1, 1, 1],
[, 1, 1, , , 1, 1],
[, 1, 1, , , 1, 1],
[, 1, 1, , , 1, 1],
[, 1, 1, 1, 1, 1, 1],
[, 1, 1, , , 1, 1],
[, 1, 1, , , 1, 1],
];
const fntB = [
[, 1, 1, 1, 1, 1],
[, 1, 1, , , 1, 1],
[, 1, 1, , , 1, 1],
[, 1, 1, 1, 1, 1],
[, 1, 1, , , 1, 1],
[, 1, 1, , , 1, 1],
[, 1, 1, 1, 1, 1],
];
const fntC = [
[, , 1, 1, 1, 1],
[, 1, 1, , , 1, 1],
[, 1, 1],
[, 1, 1],
[, 1, 1],
[, 1, 1, , , 1, 1],
[, , 1, 1, 1, 1]
];
const fntD = [
[, 1, 1, 1, 1, 1],
[, 1, 1, , , 1, 1],
[, 1, 1, , , 1, 1],
[, 1, 1, , , 1, 1],
[, 1, 1, , , 1, 1],
[, 1, 1, , , 1, 1],
[, 1, 1, 1, 1, 1]
];
const fntE = [
[, , 1, 1, 1, 1, 1],
[, 1, 1, 1, 1, 1, 1],
[, 1, 1],
[, 1, 1, 1, 1, 1],
[, 1, 1],
[, 1, 1, 1, 1, 1, 1],
[, , 1, 1, 1, 1, 1],
];
const fntF = [
[, , 1, 1, 1, 1, 1],
[, 1, 1, 1, 1, 1, 1],
[, 1, 1],
[, 1, 1, 1, 1, 1],
[, 1, 1],
[, 1, 1],
[, 1, 1],
];
const fntG = [
[, , 1, 1, 1, 1, 1],
[, 1, 1, 1, 1, 1, 1], ,
[, 1, 1],
[, 1, 1, , 1, 1, 1],
[, 1, 1, , , 1, 1],
[, 1, 1, 1, 1, 1, 1],
[, , 1, 1, 1, 1]
];
const fntH = [
[, 1, 1, , , 1, 1],
[, 1, 1, , , 1, 1],
[, 1, 1, , , 1, 1],
[, 1, 1,1,1, 1, 1],
[, 1, 1, , , 1, 1],
[, 1, 1, , , 1, 1],
[, 1, 1, , , 1, 1],
];
const fntI = [
[, 1, 1, 1, 1, 1, 1],
[, , , 1, 1],
[, , , 1, 1],
[, , , 1, 1],
[, , , 1, 1],
[, , , 1, 1],
[, 1, 1, 1, 1, 1, 1],
];
const fntJ = [
[, , 1, 1, 1, 1, 1],
[, , , , , 1, 1],
[, , , , , 1, 1],
[, , , , , 1, 1],
[, , , , , 1, 1],
[, 1, 1, , , 1, 1],
[, , 1, 1, 1, 1],
];
const fntK = [
[, 1, 1, , , 1],
[, 1, 1, , , 1],
[, 1, 1, , 1],
[, 1, 1, 1],
[, 1, 1, , 1],
[, 1, 1, , , 1],
[, 1, 1, , , 1],
];
const fntL = [
[, 1, 1],
[, 1, 1],
[, 1, 1],
[, 1, 1],
[, 1, 1],
[, 1, 1, 1, 1, 1, 1],
[, 1, 1, 1, 1, 1, 1],
];
const fntM = [
[, 1, 1, , , , 1],
[, 1, 1, 1, , 1, 1],
[, 1, 1, , 1, , 1],
[, 1, 1, , , , 1],
[, 1, 1, , , , 1],
[, 1, 1, , , , 1],
[, 1, 1, , , , 1],
];
const fntN = [
[, 1, 1, , , , 1],
[, 1, 1, , , , 1],
[, 1, 1, 1, , , 1],
[, 1, 1, 1, 1, , 1],
[, 1, 1, , 1, 1, 1],
[, 1, 1, , , 1, 1],
[, 1, 1, , , , 1],
];
const fntO = [
[, , 1, 1, 1, 1],
[, 1, 1, , , 1, 1],
[, 1, 1, , , 1, 1],
[, 1, 1, , , 1, 1],
[, 1, 1, , , 1, 1],
[, 1, 1, , , 1, 1],
[, , 1, 1, 1, 1],
];
const fntP = [
[, 1, 1, 1, 1, 1],
[, 1, 1, , , 1, 1],
[, 1, 1, , , 1, 1],
[, 1, 1, 1, 1, 1],
[, 1, 1],
[, 1, 1],
[, 1, 1],
];
const fntQ = [
[, , 1, 1, 1, 1],
[, 1, 1, , , 1, 1],
[, 1, 1, , , 1, 1],
[, 1, 1, , , 1, 1],
[, 1, 1, , 1, 1, 1],
[, 1, 1, , , 1, 1],
[, , 1, 1, 1, 1, , 1],
];
const fntR = [
[, 1, 1, 1, 1, 1],
[, 1, 1, , , 1, 1],
[, 1, 1, , , 1, 1],
[, 1, 1, 1, 1, 1],
[, 1, 1, , , 1, 1],
[, 1, 1, , , 1, 1],
[, 1, 1, , , 1, 1],
];
const fntS = [
[, , 1, 1, 1, 1],
[, 1, 1, , , , 1],
[, 1, 1],
[, , 1, 1, 1, 1],
[, , , , , , 1],
[, 1, 1, , , , 1],
[, , 1, 1, 1, 1],
];
const fntT = [
[, 1, 1, 1, 1, 1, 1],
[, 1, 1, 1, 1, 1, 1],
[, , , 1, 1],
[, , , 1, 1],
[, , , 1, 1],
[, , , 1, 1],
[, , , 1, 1],
];
const fntU = [
[, 1, 1, , , 1, 1],
[, 1, 1, , , 1, 1],
[, 1, 1, , , 1, 1],
[, 1, 1, , , 1, 1],
[, 1, 1, , , 1, 1],
[, 1, 1, 1, 1, 1, 1],
[, , 1, 1, 1, 1],
];
const fntV = [
[, 1, 1, , , , 1],
[, 1, 1, , , , 1],
[, 1, 1, , , , 1],
[, 1, 1, , , , 1],
[, 1, 1, , , , 1],
[, , 1, 1, , 1],
[, , , 1, 1],
];
const fntW = [
[, 1, 1, , , , 1],
[, 1, 1, , , , 1],
[, 1, 1, , , , 1],
[, 1, 1, , 1, , 1],
[, 1, 1, , 1, , 1],
[, 1, 1, , 1, , 1],
[, , , 1, , 1],
];
const fntX = [
[, 1, , , , , 1],
[, 1, 1, , , 1, 1],
[, , 1, 1, 1, 1],
[, , , 1, 1],
[, , 1, 1, 1, 1],
[, 1, 1, , , 1, 1],
[, 1, , , , , 1],
];
const fntY = [
[, 1, 1, , , 1, 1],
[, 1, 1, , , 1, 1],
[, 1, 1, , , 1, 1],
[, , 1, 1, 1, 1, 1],
[, , , , , 1, 1],
[, 1, 1, , , 1, 1],
[, , 1, 1, 1, 1],
];
const fntZ = [
[1, 1, 1, 1, 1, 1],
[, , , , , 1, 1],
[, , , , 1, 1],
[, , , 1, 1],
[, , 1, 1],
[, 1, 1],
[, 1, 1, 1, 1, 1, 1], ,
];
const fntTalt = [
[, 1, 1, 1, 1, 1, 1],
[, 1, 1, , , 1, 1],
[, 1, 1, , , 1, 1],
[, 1, 1, , , 1, 1],
[, 1, 1, , , 1, 1],
[, 1, 1, , , 1, 1],
[, 1, 1, , , 1, 1],
];
const fntINDEX = {
'A': fntA, 'B': fntB, 'C': fntC, 'D': fntD, 'E': fntE, 'F': fntF,
'G': fntG, 'H': fntH, 'I': fntI, 'J': fntJ, 'K': fntK, 'L': fntL,
'M': fntM, 'N': fntN, 'O': fntO, 'P': fntP, 'Q': fntQ, 'R': fntR,
'S': fntS, 'T': fntT, 'U': fntU, 'V': fntV, 'W': fntW, 'X': fntX,
'Y': fntY, 'Z': fntZ, '1': fntTalt
}
</script>
<script>
console.log(fntINDEX);
var canvas = document.getElementById("cvs");
var ctx = canvas.getContext("2d");
var text = "";
var txtinput = document.getElementById("txtinput");
text = txtinput.value;
var letters = fntINDEX;
var size = 6;
txtinput.addEventListener("keyup", function(event) {
var needed = [];
text = text.toUpperCase(); // because I only did uppercase letters
for (var i = 0; i < text.length; i++) {
var letter = letters[ text.charAt(i)];
if (letter) { // because there's letters I didn't do
needed.push(letter);
}
}
ctx.fillStyle = 'black';
var currX = 0;
for (i = 0; i < needed.length; i++) {
letter = needed[i];
var currY = 0;
var addX = 0;
for (var y = 0; y < letter.length; y++) {
var row = letter[y];
for (var x = 0; x < row.length; x++) {
if (row[x]) {
ctx.fillRect(currX + x * size, currY, size, size);
}
}
addX = Math.max(addX, row.length * size);
currY += size;
}
currX += size + addX;
needed.splice(i)
}
});
</script>
</body>
</html>