USER
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 code.: 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();ASSISTANT
const canvas = document.getElementById('canvas');
const statusBar = document.getElementById('distanceText');
const ctx = canvas.getContext('2d');
let measurementToolActive = false;
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 calculateDistance(start, end) {
const deltaX = Math.abs(start.x - end.x) / gridSpacing;
const deltaY = Math.abs(start.y - end.y) / gridSpacing;
return Math.sqrt(deltaX * deltaX + deltaY * deltaY);
}
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) => {
if (!measurementToolActive) {
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);
const distance = calculateDistance(startPoint, clickedPoint);
statusBar.textContent = `Distance: ${distance} points`;
startPoint = clickedPoint;
}
}
}
});
canvas.addEventListener('mousemove', (e) => {
if (dragStart && !measurementToolActive) {
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);
const distance = calculateDistance(startPoint, endPoint);
statusBar.textContent = `Distance: ${distance} points`;
}
activeLine = null;
startPoint = null;
}
});
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();
});
document.addEventListener('keydown', (e) => {
if (e.ctrlKey && e.button === 0) {
measurementToolActive = true;
}
});
document.addEventListener('keyup', (e) => {
if (!e.ctrlKey && e.button === 0) {
measurementToolActive = false;
statusBar.textContent = '';
}
});
updateUI();
updateGrid();
draw();