canvas input

This commit is contained in:
awesomeuser 2023-08-04 15:13:27 +00:00
parent 9dfc23f183
commit e6fef0c510

View file

@ -22,6 +22,14 @@
flex: 2; flex: 2;
} }
#canvas-input {
width: 100%;
border: 1px solid grey;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
#body-input { #body-input {
width: calc(100% - 6px); width: calc(100% - 6px);
height: 150px; height: 150px;
@ -91,9 +99,9 @@
<div class="post" style="border-top-left-radius: 0; border-top-right-radius: 0;"> <div class="post" style="border-top-left-radius: 0; border-top-right-radius: 0;">
<h1 style="margin-bottom: 4px;"><span style="color: var(--accent);">furp</span>social</h1> <h1 style="margin-bottom: 4px;"><span style="color: var(--accent);">furp</span>social</h1>
<canvas id="input-canvas" width="128" height="64"></canvas>
<form method="post" action="farp.php"> <form method="post" action="farp.php">
<textarea id="body-input" name="body"></textarea> <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"> Signature (optional): <input id="signature-input" onchange="logSignature();" type="text" name="signature">
<input type="submit" value="Farp it"> <input type="submit" value="Farp it">
</form> </form>
@ -102,7 +110,7 @@
</div> </div>
<script> <script>
const canvas = document.getElementById("inputCanvas"); const canvas = document.getElementById("canvas-input");
const crect = canvas.getBoundingClientRect(); const crect = canvas.getBoundingClientRect();
const ctx = canvas.getContext("2d"); const ctx = canvas.getContext("2d");