HOW TO GET YOUR OWN DRAW BOX

Originally written by someone else.

HOW TO SET UP

you need 2 things: a google account, and 2 files that i will provide you.
[[Xenon has added his own copied files in text boxes below, save the text as the indicated file name.]]

drawbox.html - this is where the actual drawbox itself is.
<!DOCTYPE html> <html lang="en"> <head> <link rel="shortcut icon" href=""> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title></title> <style> * {box-sizing: border-box;} canvas { border: 1px solid black; cursor: crosshair; } #gallery { display: flex; flex-wrap: wrap; gap: 10px; } .image-container { border: 1px solid #ccc; padding: 5px; max-width: 200px; text-align: center; } .image-container img { max-width: 100%; height: auto; display: block; } </style> <link href="dstyle.css" rel="stylesheet" type="text/css" media="all"> </head> <body> <center> <div id="container"> <div id="headernav"></div> <div id="flex"> <main> <canvas id="drawboxcanvas" width="500" height="500"></canvas> <br> <div onclick="change_color(this)" style="background:red" class="stroke-color"></div> <div onclick="change_color(this)" style="background:blue" class="stroke-color"></div> <button onclick="Restore()">Undo</button> <button onclick="Clear()">Clear</button> <input type="color" oninput="stroke_color = this.value"> <input type="range" min="1" max="100" oninput="stroke_width = this.value"> <button id="submit">Submit drawing</button> <p id="status"></p> <br><img src="assetsother/linetesa.gif"><br> <h1>Submitted Drawings ☻</h1> <div id="gallery">Loading images...</div> <script src="drawbox.js"></script> </main></div></div> </center> </body> </html>

drawbox.js - this is the code that saves the image
/* FILL IN THESE VARIABLES BASED ON THE GUIDE AT https://drawbox.nekoweb.org IF YOU HAVE ANY QUESTION, SUGGESTIONS, OR NEED HELP, PLEASE EMAIL ME AT [REDACTED] OR [REDACTED] on DISCORD /`·.¸ /¸...¸`:· ¸.·´ ¸ `·.¸.·´) : © ):´; ¸ { `·.¸ `· ¸.·´\`·¸) `\\´´\¸.·´ */ const GOOGLE_FORM_ID = " "; const ENTRY_ID = " "; const GOOGLE_SHEET_ID = " "; const DISPLAY_IMAGES = true; /* DONT EDIT BELOW THIS POINT IF YOU DONT KNOW WHAT YOU ARE DOING. */ const CLIENT_ID = "b4fb95e0edc434c"; const GOOGLE_SHEET_URL = "https://docs.google.com/spreadsheets/d/" + GOOGLE_SHEET_ID + "/export?format=csv"; const GOOGLE_FORM_URL = "https://docs.google.com/forms/d/e/" + GOOGLE_FORM_ID + "/formResponse"; let canvas = document.getElementById("drawboxcanvas"); let context = canvas.getContext("2d"); context.fillStyle = "white"; context.fillRect(0, 0, canvas.width, canvas.height); let restore_array = []; let start_index = -1; let stroke_color = "black"; let stroke_width = "2"; let is_drawing = false; function change_color(element) { stroke_color = element.style.background; } function start(event) { is_drawing = true; context.beginPath(); context.moveTo(getX(event), getY(event)); event.preventDefault(); } function draw(event) { if (!is_drawing) return; context.lineTo(getX(event), getY(event)); context.strokeStyle = stroke_color; context.lineWidth = stroke_width; context.lineCap = "round"; context.lineJoin = "round"; context.stroke(); event.preventDefault(); } function stop(event) { if (!is_drawing) return; context.stroke(); context.closePath(); is_drawing = false; restore_array.push(context.getImageData(0, 0, canvas.width, canvas.height)); start_index++; event.preventDefault(); } function getX(event) { return event.pageX ? event.pageX - canvas.offsetLeft : event.targetTouches[0].pageX - canvas.offsetLeft; } function getY(event) { return event.pageY ? event.pageY - canvas.offsetTop : event.targetTouches[0].pageY - canvas.offsetTop; } canvas.addEventListener("touchstart", start, false); canvas.addEventListener("touchmove", draw, false); canvas.addEventListener("touchend", stop, false); canvas.addEventListener("mousedown", start, false); canvas.addEventListener("mousemove", draw, false); canvas.addEventListener("mouseup", stop, false); canvas.addEventListener("mouseout", stop, false); function Restore() { if (start_index <= 0) { Clear(); } else { start_index--; restore_array.pop(); context.putImageData(restore_array[start_index], 0, 0); } } function Clear() { context.fillStyle = "white"; context.clearRect(0, 0, canvas.width, canvas.height); context.fillRect(0, 0, canvas.width, canvas.height); restore_array = []; start_index = -1; } context.drawImage = function() { console.warn("noo >:("); }; document.getElementById("submit").addEventListener("click", async function () { const submitButton = document.getElementById("submit"); const statusText = document.getElementById("status"); submitButton.disabled = true; statusText.textContent = "Uploading..."; const imageData = canvas.toDataURL("image/png"); const blob = await (await fetch(imageData)).blob(); const formData = new FormData(); formData.append("image", blob, "drawing.png"); try { const response = await fetch("https://api.imgur.com/3/image", { method: "POST", headers: { Authorization: `Client-ID ${CLIENT_ID}` }, body: formData, }); const data = await response.json(); if (!data.success) throw new Error("Imgur upload failed"); const imageUrl = data.data.link; console.log("Uploaded image URL:", imageUrl); const googleFormData = new FormData(); googleFormData.append(ENTRY_ID, imageUrl); await fetch(GOOGLE_FORM_URL, { method: "POST", body: googleFormData, mode: "no-cors", }); statusText.textContent = "Upload successful!"; alert("Image uploaded and submitted successfully ☻"); location.reload(); } catch (error) { console.error(error); statusText.textContent = "Error uploading image."; alert("Error uploading image or submitting to Google Form."); } finally { submitButton.disabled = false; } }); async function fetchImages() { if (!DISPLAY_IMAGES) { console.log("Image display is disabled."); return; } try { const response = await fetch(GOOGLE_SHEET_URL); const csvText = await response.text(); const rows = csvText.split("\n").slice(1); const gallery = document.getElementById("gallery"); gallery.innerHTML = ""; rows.reverse().forEach((row) => { const columns = row.split(","); if (columns.length < 2) return; const timestamp = columns[0].trim(); const imgUrl = columns[1].trim().replace(/"/g, ""); if (imgUrl.startsWith("http")) { const div = document.createElement("div"); div.classList.add("image-container"); div.innerHTML = ` <img src="${imgUrl}" alt="drawing"> <p>${timestamp}</p> `; gallery.appendChild(div); } }); } catch (error) { console.error("Error fetching images:", error); document.getElementById("gallery").textContent = "Failed to load images."; } } fetchImages();

in the drawbox.js file you need to provide 4 variables.

create a google forms. you can call it whatever you like. add a "short answer" question. i called mine "imgur link". press the 3 dots up next to your pfp. press "pre-fill form". it will open a new tab in which your blank google form will be presented to you. input something into the form and tap "get link". copy the link and open it up in a notes app, this is mine:

https://docs.google.com/forms/d/e/1FAIpQLScbzFT1pxeIkp8yNB3fB7VD9V89Jbitr4h30Q3jXYjy54SlMQ/viewform?usp=pp_url&entry.258336726=imgur

you then want to go back to the edit page of your form and click "responses". click "link to sheets" and create a sheet.

GOOGLE_FORM_ID

the long string of text is your google form URL. i highlighted mine in yellow. 1FAIpQLScbzFT1pxeIkp8yNB3fB7VD9V89Jbitr4h30Q3jXYjy54SlMQ

ENTRY_ID

your entry id will be formatted along the lines of this; i highlighted mine in blue entry.258336726

DISPLAY_IMAGES

simply set this to true or false depending if you wish to display your images on your page or not.

GOOGLE_SHEET_ID

navigate to your responses on your google form and press "view in sheets". once on your sheet, press "share" and change General access to "anyone with link", and copy you should get something similar to the below:

https://docs.google.com/spreadsheets/d/16jUCXXinqztl3sFdtpWur9yFCAiASDsvmIsF3xHv-BU/edit?usp=sharing

copy your ID (my one is highlighted in green) and paste it into the GOOGLE_SHEET_ID variable

thats it! if youve set up everything correctly, it should work.

[[DISCLAIMER: Personal information for the original author has been removed from my page and from the shared codes. Credit is linked at the top of the page, where all original information is kept intact. I did not write this tutorial, I am only rehosting as the original has been down down for a while and the author has not responded to emails. If this is yours and you want me to remove it, please put yours back up. Thanks.]]