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, '', color);
        i.hl(y, '', color);
        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.