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.