From 9dfc23f1838e0ff7d042f503bd7572ba828ebed0 Mon Sep 17 00:00:00 2001
From: awesomeuser <awesomeuser@noreply.localhost>
Date: Fri, 4 Aug 2023 15:10:58 +0000
Subject: [PATCH] test oekaki

---
 index.php | 32 ++++++++++++++++++++++++++++++++
 1 file changed, 32 insertions(+)

diff --git a/index.php b/index.php
index 296997d..16bdcd7 100644
--- a/index.php
+++ b/index.php
@@ -93,6 +93,7 @@
 
                     <form method="post" action="farp.php">
                         <textarea id="body-input" name="body"></textarea>
+                        <canvas id="inputCanvas" width="128" height="64" style="width: 100%; border:1px solid grey; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;"></canvas>
                         Signature (optional): <input id="signature-input" onchange="logSignature();" type="text" name="signature">
                         <input type="submit" value="Farp it">
                     </form>
@@ -100,6 +101,37 @@
                     <span style="font-size: 12px; color: grey;">Privacy Policy: The only data collected by furpsocial server-side is the contents of your posts (signature and body text). This information is stored in our secure databases which are wiped of all post data every week. This data is only used to accomodate furpsocial as a social media platform. Client-side, furpsocial stores your most recently used signature as a cookie, which persists for one day before expiring.</span>
                 </div>
 
+                <script>
+                    const canvas = document.getElementById("inputCanvas");
+                    const crect = canvas.getBoundingClientRect();
+                    const ctx = canvas.getContext("2d");
+
+                    const pen = ctx.createImageData(2, 2);
+                    for (let i = 0; i < pen.data.length; i += 4) {
+                        pen.data[i]   = 0;
+                        pen.data[i+1] = 0;
+                        pen.data[i+2] = 0;
+                        pen.data[i+3] = 255;
+                    }
+
+                    var drawing = false;
+                    canvas.onmousedown = function() { drawing = true; }
+                    canvas.onmouseup = function() { drawing = false; }
+
+                    canvas.onmousemove = function() {
+                        if (drawing) {
+                            draw(window.event);
+                        }
+                    };
+
+                    function draw(e) {
+                        var posX = (e.clientX - crect.left) * canvas.width / crect.width - 1;
+                        var posY = (e.clientY - crect.top) * canvas.height / crect.height - 1;
+                        
+                        ctx.putImageData(pen, posX, posY);
+                    }
+                </script>
+
             </div>
 
             <div id="content-column">