add measurement check shortcut ctrl+left mouse button. when you press ctrl+ left mouse button, a status bar displays the number inbetween any number of points selected distance. actual line shouldn't be drawn on grid when a measurement tool shortcut is activated through ctrl+left mouse button. if adding shortcut is impossible, then add some button near grid ui adjustment control elements to trigger that measurement tool on/off to show the numbers of points in distance mesured in status bar. output only full page code. don't use any backticks in templat literals, use normal method through +.: const canvas = document.getElementById('canvas');
const statusBar = document.getElementById('distanceText');
const ctx = canvas.getContext('2d');

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

let grid = [];
let gridSize = 120;
let gridSpacing = 10;

function updateGrid() {
grid = [];
for (let x = -gridSize; x <= gridSize; x += gridSpacing) {
for (let y = -gridSize; y <= gridSize; y += gridSpacing) {
grid.push({ x, y });
}
}
}

function updateCanvasSize() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
}

function updateUI() {
const gridSizeInput = document.getElementById('gridSize');
const gridSpacingInput = document.getElementById('gridSpacing');

gridSizeInput.value = gridSize;
gridSpacingInput.value = gridSpacing;
}

function drawLine(line) {
ctx.beginPath();
for (let i = 0; i < line.length - 1; i++) {
const projectedStart = project(line[i]);
const projectedEnd = project(line[i + 1]);

ctx.moveTo(projectedStart.x, projectedStart.y);
ctx.lineTo(projectedEnd.x, projectedEnd.y);
}

ctx.strokeStyle = 'rgba(25,200,25,0.2)';
ctx.lineWidth = 2;
ctx.stroke();
}

function calculateGridCenter(grid) {
let totalX = 0;
let totalY = 0;
const pointsCount = grid.length;

for (const point of grid) {
totalX += point.x;
totalY += point.y;
}

return {
x: totalX / pointsCount,
y: totalY / pointsCount
};
}

const clickedPoints = [];
let lastClickedPoint = null;
let activeLine = null;
const lines = [];

function project(point) {
const { x, y } = point;

const scale = 1;
const newX = x * scale + canvas.width / 2;
const newY = y * scale + canvas.height / 2;

return { x: newX, y: newY, scale };
}

function findClosestPoint(point) {
const threshold = 20;
let minDist = Infinity;
let minIndex = -1;

for (let i = 0; i < grid.length; i++) {
const projected = project(grid[i]);
const dx = point.x - projected.x;
const dy = point.y - projected.y;
const dist = Math.sqrt(dx * dx + dy * dy);

if (dist < minDist && dist <= threshold) {
minDist = dist;
minIndex = i;
}
}

return minIndex !== -1 ? grid[minIndex] : null;
}

let mouseDown = false;
let dragStart = null;
let startPoint = null;

canvas.addEventListener('mousedown', (e) => {
dragStart = { x: e.clientX, y: e.clientY };

const canvasRect = canvas.getBoundingClientRect();
const mouseX = e.clientX - canvasRect.left;
const mouseY = e.clientY - canvasRect.top;
const clickedPoint = findClosestPoint({ x: mouseX, y: mouseY });

if (clickedPoint !== null) {
if (startPoint === null) {
startPoint = clickedPoint;
activeLine = [clickedPoint];
} else {
if (startPoint !== clickedPoint) {
activeLine.push(clickedPoint);
lines.push(activeLine);
startPoint = clickedPoint;
activeLine = [clickedPoint];
}
}
}
});

canvas.addEventListener('mousemove', (e) => {
if (dragStart) {
const deltaX = e.clientX - dragStart.x;
const deltaY = e.clientY - dragStart.y;
dragStart = { x: e.clientX, y: e.clientY };
}
});

canvas.addEventListener('mouseup', (e) => {
mouseDown = false;
dragStart = null;
if (activeLine !== null) {
const canvasRect = canvas.getBoundingClientRect();
const mouseX = e.clientX - canvasRect.left;
const mouseY = e.clientY - canvasRect.top;
const endPoint = findClosestPoint({ x: mouseX, y: mouseY });

if (endPoint !== activeLine[activeLine.length - 1]) {
activeLine.push(endPoint);
lines.push(activeLine);
}
activeLine = null;
startPoint = null;

const startGridPoint = project(lines[lines.length - 1][0]);
const endGridPoint = project(lines[lines.length - 1][lines[lines.length - 1].length - 1]);
const deltaX = Math.abs(startGridPoint.x - endGridPoint.x) / gridSpacing;
const deltaY = Math.abs(startGridPoint.y - endGridPoint.y) / gridSpacing;
const distance = Math.sqrt(deltaX * deltaX + deltaY * deltaY);
statusBar.textContent = Distance: ${distance} points;
}
});

function draw() {
ctx.fillStyle = 'rgba(1,2,1,0.8)';
ctx.fillRect(0, 0, canvas.width, canvas.height);

for (const point of grid) {
const projected = project(point);

ctx.beginPath();
if (projected.scale > 0) {
ctx.arc(projected.x, projected.y, 2 * projected.scale, 0, Math.PI * 2);
ctx.closePath();
const gradient = ctx.createRadialGradient(projected.x, projected.y, 0, projected.x, projected.y, 2 * projected.scale);
gradient.addColorStop(0, 'rgba(255,155,255,0.5)');
gradient.addColorStop(0.5, 'rgba(55,255,25,0.8)');
gradient.addColorStop(1, 'rgba(55,25,255,0.2)');
ctx.fillStyle = gradient;
ctx.fill();
}
}

// Drawing clicked points in green
ctx.fillStyle = 'rgba(255,200,50,0.5)';
for (const clickedPoint of clickedPoints) {
const projected = project(clickedPoint);

ctx.beginPath();
if (projected.scale > 0) {
ctx.arc(projected.x, projected.y, 4 * projected.scale, 0, Math.PI * 2);
ctx.closePath();
ctx.fill();
}
}

for (const line of lines) {
drawLine(line);
}

if (activeLine !== null) {
drawLine(activeLine);
}

requestAnimationFrame(draw);
}

window.addEventListener('resize', () => {
updateCanvasSize();
updateUI();
});

const gridSizeInput = document.getElementById('gridSize');
gridSizeInput.addEventListener('change', (e) => {
gridSize = parseInt(e.target.value);
updateGrid();
});

const gridSpacingInput = document.getElementById('gridSpacing');
gridSpacingInput.addEventListener('change', (e) => {
gridSpacing = parseInt(e.target.value);
updateGrid();
});

updateUI();
updateGrid();
draw();