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.