subzey/index.html

## index.html
<!doctype html>
<html>
	<head></head>
	<body>
		<canvas width="1080" height="1920"></canvas>
<script>
const blocks = [
	[0x2e80, 0x2eff],
	[0x2f00, 0x2fdf],
	[0x3000, 0x303f],
	[0x3040, 0x309f],
	[0x30a0, 0x30ff],
	[0x31f0, 0x31ff],
	[0x3200, 0x32ff],
	[0x3300, 0x33ff],
	[0x3400, 0x4dbf],
	[0x4e00, 0x9fff],
	[0xf900, 0xfaff],
	[0xff00, 0xffef],
	[0x16fe0, 0x16fff],
	[0x1aff0, 0x1afff],
	[0x1b000, 0x1b0ff],
	[0x1b100, 0x1b12f],
	[0x1b130, 0x1b16f],
	[0x1f200, 0x1f2ff],
	[0x20000, 0x2a6df],
	[0x2a700, 0x2b73f],
	[0x2b740, 0x2b81f],
	[0x2b820, 0x2ceaf],
	[0x2ceb0, 0x2ebef],
	[0x2f800, 0x2fa1f],
	[0x30000, 0x3134f],
];


function * japaneseCodePoints() {
	for (const [from, to] of blocks) {
		for (let i = from; i <= to; i++) {
			yield i;
		}
	}
}

async function main() {
	const ctx = document.querySelector('canvas').getContext('2d');
	const { width, height } = ctx.canvas;

	ctx.font = '16px -apple-system, BlinkMacSystemFont, sans-serif';
	let x = Infinity;
	let y = Infinity;

	for (const cp1 of japaneseCodePoints()) {
		for (const cp2 of japaneseCodePoints()) {
			const s = String.fromCodePoint(cp1, cp2);

			const box = ctx.measureText(s);
			if (x + box.width > width) {
				x = 0;
				y += 10;
			}
			if (y > height) {
				y = 8;
				console.log(cp1, cp2);
				await new Promise(r => requestAnimationFrame(r));
				ctx.clearRect(0, 0, width, height);
			}

			ctx.fillText(s, x, y);
			x += box.width;
		}
	}
}

main();

</script>
</body>
</html>
	<!doctype html>
	<html>
	<head></head>
	<body>
	<canvas width="1080" height="1920"></canvas>
	<script>
	const blocks = [
	[0x2e80, 0x2eff],
	[0x2f00, 0x2fdf],
	[0x3000, 0x303f],
	[0x3040, 0x309f],
	[0x30a0, 0x30ff],
	[0x31f0, 0x31ff],
	[0x3200, 0x32ff],
	[0x3300, 0x33ff],
	[0x3400, 0x4dbf],
	[0x4e00, 0x9fff],
	[0xf900, 0xfaff],
	[0xff00, 0xffef],
	[0x16fe0, 0x16fff],
	[0x1aff0, 0x1afff],
	[0x1b000, 0x1b0ff],
	[0x1b100, 0x1b12f],
	[0x1b130, 0x1b16f],
	[0x1f200, 0x1f2ff],
	[0x20000, 0x2a6df],
	[0x2a700, 0x2b73f],
	[0x2b740, 0x2b81f],
	[0x2b820, 0x2ceaf],
	[0x2ceb0, 0x2ebef],
	[0x2f800, 0x2fa1f],
	[0x30000, 0x3134f],
	];


	function * japaneseCodePoints() {
	for (const [from, to] of blocks) {
	for (let i = from; i <= to; i++) {
	yield i;
	}
	}
	}

	async function main() {
	const ctx = document.querySelector('canvas').getContext('2d');
	const { width, height } = ctx.canvas;

	ctx.font = '16px -apple-system, BlinkMacSystemFont, sans-serif';
	let x = Infinity;
	let y = Infinity;

	for (const cp1 of japaneseCodePoints()) {
	for (const cp2 of japaneseCodePoints()) {
	const s = String.fromCodePoint(cp1, cp2);

	const box = ctx.measureText(s);
	if (x + box.width > width) {
	x = 0;
	y += 10;
	}
	if (y > height) {
	y = 8;
	console.log(cp1, cp2);
	await new Promise(r => requestAnimationFrame(r));
	ctx.clearRect(0, 0, width, height);
	}

	ctx.fillText(s, x, y);
	x += box.width;
	}
	}
	}

	main();

	</script>
	</body>
	</html>