☰

Drawaria Zoom & Precise Brush

Adds mouse wheel zoom and precise brush outline in Drawaria

// ==UserScript==
// @name         Drawaria Zoom & Precise Brush
// @namespace    https://greasyfork.org/en/users/your-username
// @version      1.0
// @description  Adds mouse wheel zoom and precise brush outline in Drawaria
// @author       Lucas
// @match        https://www.drawaria.online/*
// @grant        none
// @license      MIT
// ==/UserScript==

(function() {
    'use strict';

    // Wait until the canvas exists
    const waitForCanvas = setInterval(() => {
        const canvas = document.querySelector('canvas');
        if (canvas) {
            clearInterval(waitForCanvas);
            enhanceDrawaria(canvas);
        }
    }, 500);

    function enhanceDrawaria(canvas) {
        const ctx = canvas.getContext('2d');
        let scale = 1;

        // Enable zoom with mouse wheel
        canvas.addEventListener('wheel', function(event) {
            if (!event.ctrlKey) return; // Use Ctrl + Scroll to zoom
            event.preventDefault();
            const delta = event.deltaY > 0 ? 0.9 : 1.1;
            scale *= delta;
            canvas.style.transform = `scale(${scale})`;
            canvas.style.transformOrigin = "center center";
        });

        // Draw brush outline when hovering
        const brushOutline = document.createElement('div');
        brushOutline.style.position = 'absolute';
        brushOutline.style.border = '1px dashed #ff0000';
        brushOutline.style.borderRadius = '50%';
        brushOutline.style.pointerEvents = 'none';
        brushOutline.style.zIndex = '9999';
        brushOutline.style.width = '8px';
        brushOutline.style.height = '8px';
        document.body.appendChild(brushOutline);

        canvas.addEventListener('mousemove', function(e) {
            const rect = canvas.getBoundingClientRect();
            brushOutline.style.left = `${e.clientX - 4}px`;
            brushOutline.style.top = `${e.clientY - 4}px`;
        });
    }
})();