Write text on the Drawaria canvas using WebSockets
This userscript, named **Drawaria Canvas Text Writer**, is designed to enhance the functionality of the website **Drawaria Online** (a multiplayer drawing game) by allowing users to write text directly onto the canvas using WebSockets. Below is a detailed explanation of how to use this script:
---
### **How to Use the Script**
1. **Install a Userscript Manager**:
- To use this script, you need a userscript manager like **Tampermonkey** (available for Chrome, Firefox, Edge, and other browsers).
- Install Tampermonkey from your browser's extension store.
2. **Install the Script**:
- Copy the entire script provided above.
- Open Tampermonkey and click on the **"Create a new script"** option.
- Replace the default template with the copied script.
- Save the script.
3. **Navigate to Drawaria Online**:
- Go to the website: [https://drawaria.online](https://drawaria.online).
- The script will automatically run when you visit the site.
4. **Using the Text Writer Interface**:
- Once the script is active, you will see a new **floating panel** on the screen with the title **"Canvas Text Writer"**.
- This panel contains several controls to customize and write text on the canvas.
---
### **Features of the Text Writer Panel**
1. **Text Input**:
- Enter the text you want to draw on the canvas in the input field labeled **"Enter text to draw"**.
- The maximum allowed characters are **7**.
2. **Font Selection**:
- Use the dropdown menu to select a font for your text. Available fonts include:
- Arial
- Ravie
- Courier
- Magneto
- Papyrus
- Script MT Bold
- Algerian
- Segoe Print
3. **Pixel Size**:
- Adjust the size of the text using the **Pixel Size slider**.
- The range is from **10 to 30 pixels**.
4. **Positioning**:
- Use the **Horizontal Position** and **Vertical Position sliders** to place the text on the canvas.
- The sliders range from **0 to 100**, representing percentages of the canvas width and height.
5. **Color Picker**:
- Click the color input to choose a color for your text.
6. **Send Text**:
- Click the **"Send Text"** button to draw the text on the canvas with the selected font, size, position, and color.
7. **Clear Canvas**:
- Use the **"Clear Canvas"** button to erase the entire canvas.
8. **Join Room**:
- The **"Join"** button allows you to join a specific room by entering the room's invite link.
9. **Draggable Panel**:
- The entire panel is draggable. Click and drag the title bar to move the panel around the screen.
10. **Collapsible Panel**:
- Click the arrow (▲ or ▼) at the top of the panel to collapse or expand it.
---
### **How It Works**
- The script intercepts WebSocket connections used by Drawaria Online to send drawing commands.
- When you click **"Send Text"**, the script:
1. Creates a temporary canvas element to render the text.
2. Converts the text into pixel data.
3. Sends the pixel data as drawing commands to the Drawaria canvas via WebSocket.
- The **"Clear Canvas"** button sends a special command to erase the canvas.
---
### **Important Notes**
- **Character Limit**: The script limits text input to **7 characters** to avoid overloading the WebSocket with too many drawing commands.
- **WebSocket Override**: The script overrides the WebSocket's `send` method to capture and manage WebSocket connections.
- **Bot Functionality**: The script includes a basic bot framework for joining rooms and sending drawing commands.
---
### **Troubleshooting**
- If the panel does not appear:
- Ensure the script is enabled in Tampermonkey.
- Refresh the Drawaria Online page.
- Check the browser console for errors (press `F12` and go to the **Console** tab).
- If the text does not appear on the canvas:
- Ensure you are in a valid Drawaria room.
- Check your internet connection and WebSocket status.
---
This script is a powerful tool for adding text to Drawaria Online's canvas, making it easier to create custom drawings or communicate with other players. Enjoy using it!
