pablomolina.me

When debugging a drag and drop interface, sometimes is easier to find out bugs by visualizing computed coordinates on screen instead of logging them to the console. I frame created this small tool to do so.

window.ctx = window.ctx || (() => {
    const canvas = document.createElement('canvas');
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    canvas.style.position = 'fixed';
    canvas.style.left = '0';
    canvas.style.top = '0';
    canvas.style.zIndex = '99999';
    canvas.style.opacity = '0.9';
    canvas.style.pointerEvents = 'none';
    const ctx = canvas.getContext('2d');
    document.body.appendChild(canvas);

    const getColor = (str) => {
        const h = str.split('').map(c => c.charCodeAt(0)).reduce((a, b) => a + b, 0) % 360;
        const s = (str.split(' ').map(w => w.length * 2).reduce((a, b) => a > b ? a : b, 0) + 50) % 100;
        const l = 100 - s;
        return `hsl(${h}, ${s}%, ${l}%)`;
    };

    const setColor = (color) => {
        ctx.strokeStyle = color;
        ctx.fillStyle = color;
    };

    const drawLine = (fromX, fromY, toX, toY) => {
        ctx.beginPath();
        ctx.moveTo(fromX, fromY);
        ctx.lineTo(toX, toY);
        ctx.closePath();
        ctx.stroke();
    };
    
    const i = {
        c: () => {
            ctx.clearRect(
                0, 0, window.innerWidth, window.innerHeight
            );
        },
        vl: (x, label = '', color = '') => {
            setColor(color || getColor(label));
            drawLine(x, 0, x, window.innerHeight);
            label && ctx.fillText(label, x + 10, 10);
        },
        hl: (y, label = '', color = '') => {
            setColor(color || getColor(label));
            drawLine(0, y, window.innerWidth, y);
            label && ctx.fillText(label, 10, y - 10);
        },
        p: (x, y, label = '', color = '') => {
            setColor(color || getColor(label));
            i.vl(x, '', c);
            i.hl(y, '', c);
            label && ctx.fillText(label, x + 10, y - 10);
        },
    };

    return i;
})();

It creates a global ctx variable, which contains the following methods. All lines can receive an optional label and color parameters. If no color is specified a random one is computed based on the label.

ctx.c(); // Clear the canvas.
ctx.vl(x); // Draw a vertical line in the given position.
ctx.hl(y); // Draw an horizontal line in the given position.
ctx.p(x, y); // Draw a cross in the given coordinates.