0
171
ViewsAdd dot on canvas grid
This is a canvas grid with the coordinates labelled when you click on the grid at here May I ask how to place a red dot on the grid as shown in the picture? Please provide a demo for understanding:)
function showCoords(event) {
var x = event.clientX - 10;
var y = event.clientY - 10;
var coords = "X coordinates: " + x + ", Y coordinates: " + y;
document.getElementById('showCoords').innerHTML = coords;
}
·
Juan Pablo Isaza
1 answers
Answer question0
OK so first you may create a CSS class for the red dots:
<style>
.red-dot {
position:absolute;
width:5px;
height:5px;
background:red;
}
</style>
Then try to modify the showCoords() method:
function showCoords(event) {
// Calculate the position of the nearest grid intersection:
var x = (Math.floor(event.clientX/10) * 10) - 2;
var y = (Math.floor(event.clientY/10) * 10) - 2;
var coords = "X coordinates: " + x + ", Y coordinates: " + y;
document.getElementById('showCoords').innerHTML = coords;
// Create a new red dot:
let newDot = document.createElement('span');
// Add the CSS class:
newDot.className = 'red-dot';
// Set coordinates:
newDot.style.top = y + 'px';
newDot.style.left = x + 'px';
// Add the new element to the end of the body:
document.body.appendChild(newDot);
}
·
Juan Pablo Isaza
Report
Answer question