main.js

document.addEventListener("DOMContentLoaded", function () {
 function generateImage() {
    const text = document.querySelector("#input").value;
    const canvas = document.createElement("canvas");
    canvas.width = 1000;
    canvas.height = 1000;
    const context = canvas.getContext("2d");
    context.textAlign = "center";
    context.textBaseline = "middle";
    context.font = "48px Arial";
    context.fillStyle = "white";
    context.fillText(text, canvas.width / 2, canvas.height / 2);
    const imageData = canvas.toDataURL("image/png");
    const image = document.querySelector("#output");
    image.src = imageData;
 }
});