add previously made stuff

text-to-image/script.js

@@ -0,0 +1,66 @@
+const $ = (x) => document.getElementById(x);
+
+const input = $("input");
+const canvas = $("canvas");
+const preview = $("preview");
+const background = $("background");
+
+const ctx = canvas.getContext("2d");
+const lineHeight = 22;
+
+let height = 0;
+let line = 0;
+
+input.addEventListener("input", () => {
+    const lines = input.value.split("\n");
+    height = lines.length;
+    canvas.width = 512;
+    ctx.font =
+        '16px "gg sans", "Noto Sans", "Helvetica Neue", Helvetica, Arial, sans-serif';
+    ctx.textBaseline = "hanging";
+    line = 0;
+    lines.forEach(renderText);
+    canvas.height = 22 * height;
+    ctx.fillStyle = background.value;
+    ctx.fillRect(0, 0, canvas.width, canvas.height);
+    ctx.fillStyle = "#EFEFF0";
+    ctx.font =
+        '16px "gg sans", "Noto Sans", "Helvetica Neue", Helvetica, Arial, sans-serif';
+    ctx.textBaseline = "hanging";
+    line = 0;
+    lines.forEach(renderText);
+    preview.src = canvas.toDataURL();
+    canvas.toBlob((blob) => {
+        const item = new ClipboardItem({ "image/png": blob });
+        navigator.clipboard.write([item]);
+    });
+});
+
+input.addEventListener("keydown", (e) => {
+    if (e.key == "c" && e.ctrlKey) {
+        e.preventDefault();
+    }
+});
+
+function renderText(item, i) {
+    line++;
+    if (ctx.measureText(item).width > canvas.width) {
+        let rn = ctx.measureText(item).width;
+        let goal = canvas.width;
+        let len = item.length;
+        while (rn > goal) {
+            len--;
+            rn = ctx.measureText(item.slice(0, len)).width;
+        }
+        ctx.fillText(
+            item.slice(0, len),
+            0,
+            (line - 1) * lineHeight + 2,
+            canvas.width,
+        );
+        renderText(item.slice(len), line);
+        height++;
+    } else {
+        ctx.fillText(item, 0, (line - 1) * lineHeight + 2, canvas.width);
+    }
+}