WBC休暇届Generator #JavaScript

昨日、WBC決勝戦の為、MLBJapanが休暇届を発信したことが、話題になっていました。

https://twitter.com/MLBJapan/status/1638099375657476096

名前欄が「＿＿＿＿（あなたの名前）様」となっていて、そのままでは使えないので、名前を埋め込むページを作ってみました。

ページは下記
https://aeha.github.io/dayoff4wbs/
Javascriptなので、ブラウザで動作します。

ソース (base.jpegは、MLBJapan公開の画像)

<!DOCTYPE html>
<html>
<head>
	<title>WBC休暇届を生成</title>
</head>
<body>
	<label for="text-input">テキスト:</label>
	<input type="text" id="text-input" placeholder="お名前を入れて">
	<button onclick="draw()">描画する</button><br>
	<canvas id="canvas" width="1350" height="1080"></canvas>
	<script>
		// 画像のパス
		var imagePath = "base.jpeg";

		// 画像の読み込み
		var image = new Image();
		image.src = imagePath;

		// canvas要素の取得
		var canvas = document.getElementById("canvas");
		var context = canvas.getContext("2d");

		// 描画関数
		function draw() {
			// 画像を描画
			context.drawImage(image, 0, 0);

			// テキストを取得
			var text = document.getElementById("text-input").value;

			// 文字列を描画
			context.font = "30px sans-serif";
			context.fillStyle = "white";
			context.fillText(text, 100, 640); // X座標: 100, Y座標: 100

			// 画像と文字列を合成
			var imageData = context.getImageData(0, 0, canvas.width, canvas.height);
			context.putImageData(imageData, 0, 0);
		}
	</script>
</body>
</html>