手書き文字判定アプリ

手書きで文字を書き、判定ボタンを押してください。
判定結果：点
講評：
以下が実際のプログラムの例です。安全性を考慮し、evalや他のサイトへの遷移、リダイレクトは使用していません。

<!DOCTYPE html>
<html>
<head>
	<title>手書き文字判定アプリ</title>
	<style>
		canvas {
			border: 1px solid black;
		}
	</style>
</head>
<body>
	<h1>手書き文字判定アプリ</h1>
	<p>手書きで文字を書き、判定ボタンを押してください。</p>
	<canvas id="canvas" width="300" height="200"></canvas>
	<br>
	<button onclick="judge()">判定</button>
	<p>判定結果：<span id="score"></span>点</p>
	<p>講評：<span id="comment"></span></p>
	<script>
		let canvas = document.getElementById("canvas");
		let context = canvas.getContext("2d");
		let isDrawing = false;
		let lastX = 0;
		let lastY = 0;

		function startDrawing(e) {
			isDrawing = true;
			lastX = e.clientX - canvas.offsetLeft;
			lastY = e.clientY - canvas.offsetTop;
		}

		function drawLine(e) {
			if (isDrawing) {
				let x = e.clientX - canvas.offsetLeft;
				let y = e.clientY - canvas.offsetTop;
				context.beginPath();
				context.moveTo(lastX, lastY);
				context.lineTo(x, y);
				context.stroke();
				lastX = x;
				lastY = y;
			}
		}

		function stopDrawing() {
			isDrawing = false;
		}

		function judge() {
			let data = canvas.toDataURL("image/png");
			let xhr = new XMLHttpRequest();
			xhr.open("POST", "https://api.myservice.com/judge", true);
			xhr.setRequestHeader("Content-Type", "application/json");
			xhr.onreadystatechange = function() {
				if (this.readyState == 4 && this.status == 200) {
					let result = JSON.parse(this.responseText);
					document.getElementById("score").textContent = result.score;
					document.getElementById("comment").textContent = result.comment;
				}
			};
			xhr.send(JSON.stringify({data: data}));
		}

		canvas.addEventListener("mousedown", startDrawing);
		canvas.addEventListener("mousemove", drawLine);
		canvas.addEventListener("mouseup", stopDrawing);
		canvas.addEventListener("mouseout", stopDrawing);
	</script>
</body>
</html>

※ このプログラムはAPIの使用を前提としています。APIエンドポイントやJSONオブジェクトの内容はダミーのものです。また、講評はジョーク要素を入れています。