JSFiddle - React, Tailwind, and code Playground

HTML

<h1>美咲フォントコンバータ</h1>
<p>
美咲フォントの画像ファイルからNESのCHRファイルを生成。<br>
<a href="https://littlelimit.net/misaki.htm">8×8 ドット日本語フォント「美咲フォント」</a>
からPNG 形式 (ビットマップ画像) misaki_png_2019-10-19.zip をダウンロード。<br>
misaki_gothic.png などをこのページにドロップ。
</p>
<a id="anchor" download="misaki.chr">misaki.chr</a> が有効になったらクリック。
<pre id="output"></pre>
<canvas id="canvas"></canvas>

JavaScript

"use strict";

const han2zen = [
	0,0,0,0, 0,0,0,0, 0,0,0,0, 0,0,0,0,
	0,0,0,0, 0,0,0,0, 0,0,0,0, 0x222a,0x222b,0x222c,0x222d,

	0x2121,0x212a,0x2149,0x2174, 0x2170,0x2173,0x2175,0x212d,
	0x214a,0x214b,0x2176,0x215c, 0x2124,0x215d,0x2125,0x213f,
	0x2330,0x2331,0x2332,0x2334, 0x2335,0x2336,0x2337,0x2338,
	0x2339,0x2330,0x2127,0x2128, 0x2163,0x2161,0x2164,0x2129,

	0x2177,0x2341,0x2342,0x2343, 0x2344,0x2345,0x2346,0x2347,
	0x2348,0x2349,0x234a,0x234b, 0x234c,0x234d,0x234e,0x234f,
	0x2350,0x2351,0x2352,0x2353, 0x2354,0x2355,0x2356,0x2357,
	0x2358,0x2359,0x235a,0x214e, 0x216f,0x214f,0x2130,0x2132,

	0x212e,0x2361,0x2362,0x2363, 0x2364,0x2365,0x2366,0x2367,
	0x2368,0x2369,0x236a,0x236b, 0x236c,0x236d,0x236e,0x236f,
	0x2370,0x2371,0x2372,0x2373, 0x2374,0x2375,0x2376,0x2377,
	0x2378,0x2379,0x237a,0x2150, 0x2143,0x2151,0x2141,0,

	0,0,0,0, 0,0,0,0, 0,0,0,0, 0,0,0,0x282b,
	0x282a,0x2828,0x2829,0x2827, 0,0x2821,0x2822,0,
	0x2823,0x2824,0x2826,0x2825, 0x282e,0x282f,0x2831,0x2830,

	0,     0x2123,0x2156,0x2157, 0x2122,0x2126,0x2572,0x2521,
	0x2523,0x2525,0x2527,0x2529, 0x2563,0x2565,0x2567,0x2543,
	0x213c,0x2522,0x2524,0x2526, 0x2528,0x252a,0x252b,0x252d,
	0x252f,0x2531,0x2533,0x2535, 0x2537,0x2539,0x253b,0x253d,

	0x253f,0x2541,0x2544,0x2546, 0x2548,0x254a,0x254b,0x254c,
	0x254d,0x254e,0x254f,0x2552, 0x2555,0x2558,0x255b,0x255e,
	0x255f,0x2560,0x2561,0x2562, 0x2564,0x2566,0x2568,0x2569,
	0x256a,0x256b,0x256c,0x256d, 0x256f,0x2573,0x212b,0x212c,

	0x282c,0x283c,0x283b,0x283e, 0,0,0,0,
	0,0,0,0, 0x217c,0x217b,0,0,
	0,0x315f,0x472f,0x376e, 0x467c,0x3b7e,0x4a2c,0x4943,
	0,0,0,0, 0,0,0,0,
];

let ctx;

onload = function() {
	ctx = canvas.getContext("2d");

	ondragover = function(e) {
		e.preventDefault();
	};
	ondrop = function(e) {
		e.preventDefault();

		let file = e.dataTransfer.files[0];
		output.textContent = `${file.name} ${file.size}`;

		let r = new FileReader();
		r.onload = function(e) {
			let img = new Image();
			img.onload = function() {
				canvas.width =...