Using kirupas follow_mouse_cursor.htm, how to print mouse coordinates dynamically on the screen below the dynamic image?
Hi @chrsyl - welcome to the forums! There are several variations of this code floating around on the site. Are you referring to this Canvas-based implementation?
Cheers,
Kirupa
Correct and Thank you! My question is how to code so that the coordinates are dynamically shown below the dynamic image.
1 Like
Last question! When you mention “dynamic image”, do you mean the canvas region? Or do you mean the item that is being dragged?
The reason I ask is that the approach will be very different if we are going to be drawing the numbers in the canvas vs. having it appear below the canvas
I mean the changing x & y coordinates for the dragged object. Best
Take a look at this example where I added the coordinates of the moving element below the canvas:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Canvas Follow Mouse</title>
<style>
canvas {
border: #333 10px solid;
}
body {
padding: 50px;
}
#coordinates {
font-family: monospace;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="550px" height="350px"></canvas>
<p id="coordinates">Coordinates go here</p>
<script>
var canvas = document.querySelector("#myCanvas");
var context = canvas.getContext("2d");
var coordinates = document.querySelector("#coordinates");
function getPosition(el) {
var xPosition = 0;
var yPosition = 0;
while (el) {
xPosition += (el.offsetLeft - el.scrollLeft + el.clientLeft);
yPosition += (el.offsetTop - el.scrollTop + el.clientTop);
el = el.offsetParent;
}
return {
x: xPosition,
y: yPosition
};
}
var canvasPos = getPosition(canvas);
var mouseX = 0;
var mouseY = 0;
canvas.addEventListener("mousemove", setMousePosition, false);
function setMousePosition(e) {
mouseX = e.clientX - canvasPos.x;
mouseY = e.clientY - canvasPos.y;
}
function update() {
context.clearRect(0, 0, canvas.width, canvas.height);
context.beginPath();
context.arc(mouseX, mouseY, 50, 0, 2 * Math.PI, true);
context.fillStyle = "#FF6A6A";
context.fill();
requestAnimationFrame(update);
coordinates.innerHTML = "Mouse position: (" + mouseX + ", " + mouseY + ")";
}
update();
</script>
</body>
</html>
Here is a screenshot:
Let me know if this is what you were looking for. I’d be happy to make any updates if I misunderstood what you wanted! 
Thanks a lot! Yes, that’s what I asked about! Will try to proceed from there …
1 Like
It is a neat script! I failed to change the ball to a png image. I tried with the code below in the update function. Can I improve it?
Best
Christer
…
newImage.onload = () => {
// Draw the image onto the context
context.drawImage(newImage, xPos, yPos, 100, 100);
context.fillRect(newImage, xPos, yPos, 100, 100);
}
newImage.src = “extras/Time.png”;
Try using the approach outlined here:
Without seeing your full code it will be difficult to debug exactly what the cause is
Helo, I found your html5/drag.htm where both mouse and touch and hence mobile is working nice and I could print out the coordinates as well. But with this code I failed to include an image that worked well in the previous code where I succeeded to animate with: context.drawImage(myImage, xPos-4000/2, yPos,4000,30); requestAnimationFrame(animate);
How in the drag.htm could I animate the image?
Best Christer
Can you share a link to your drag.htm implementation? The drag implementation uses regular DOM elements. This means you can replace the div element with an img element in the HTML, and that should accomplish what you are trying to do
Helo, I could not figure out how to send the link. What I want to achieve is a draggable timeline so at start the middle point of the timeline should be in the middle of the container. Then I will calculate changes in time based on the change in the x coordinate with mouse/touch. Later I will try to implement so that at start the timeline is adjusted to now().
…
<!DOCTYPE html>
<html>
<head>
<meta name="viewport"
content="width=device-width, initial-scale=1.0, user-scalable=no" />
<title>Drag/Drop/Bounce</title>
<style>
#container {
width: 100%;
height: 400px;
background-color: #333;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
border-radius: 7px;
touch-action: none;
}
/*
#item {
width: 100px;
height: 100px;
background-color: rgb(245, 230, 99);
border: 10px solid rgba(136, 136, 136, .5);
border-radius: 50%;
touch-action: none;
user-select: none;
}
}
#item:active {
background-color: rgba(168, 218, 220, 1.00);
}
#item:hover {
cursor: pointer;
border-width: 20px;
}
*/
#img {
width: 4000px;
height: 30px;
touch-action: none;
user-select: none;
}
#img:hover {
cursor: pointer;
border-width: 20px;
}
#coordinates {
font-family: monospace;
}
</style>
</head>
<body>
<div id="outerContainer">
<div id="container">
<div id="img">
<img src="extras/Time4000.png" width="4000" height="30">
</div>
</div>
</div>
<p id="coordinates">Coordinates go here</p>
<script>
var dragItem = document.querySelector("#img");
var container = document.querySelector("#container");
var coordinates = document.querySelector("#coordinates");
var active = false;
var currentX;
var currentY;
var initialX;
var initialY;
var xOffset = 0;
var yOffset = 0;
container.addEventListener("touchstart", dragStart, false);
container.addEventListener("touchend", dragEnd, false);
container.addEventListener("touchmove", drag, false);
container.addEventListener("mousedown", dragStart, false);
container.addEventListener("mouseup", dragEnd, false);
container.addEventListener("mousemove", drag, false);
function dragStart(e) {
if (e.type === "touchstart") {
initialX = e.touches[0].clientX - xOffset;
initialY = e.touches[0].clientY - yOffset;
} else {
initialX = e.clientX - xOffset;
initialY = e.clientY - yOffset;
}
if (e.target === dragItem) {
active = true;
}
}
function dragEnd(e) {
initialX = currentX;
initialY = currentY;
active = false;
}
function drag(e) {
if (active) {
e.preventDefault();
if (e.type === "touchmove") {
currentX = e.touches[0].clientX - initialX;
currentY = e.touches[0].clientY - initialY;
} else {
currentX = e.clientX - initialX;
currentY = e.clientY - initialY;
}
xOffset = currentX;
yOffset = currentY;
setTranslate(currentX, currentY, dragItem);
}
}
function setTranslate(xPos, yPos, el) {
el.style.transform = "translate3d(" + xPos + "px, " + yPos + "px, 0)";
coordinates.innerHTML = "Mouse position: (" + xPos + ", " + yPos + ")";
}
</script>
</body>
</html>
In fact, while the mouse on the computer does not move the image, touch on the mobile sometimes but not always drags and gives changing coordinates …
Helo,
how do I get the canvas element (red) to fill the screen with coordinates as the blue rectangle?
Best
Christer
…
<?php $latitude = 59.003; $longitude = 17.993; $LAT=ipart(100*$latitude)/100; $LON=ipart(100*$longitude)/100; ?>html,
body {
background-color: black;
width: 100%;
height: 100%;
margin: 0;
}
canvas {
border: #333 2px solid;
background-color: #ccc;
display: block;
position: absolute;
top: 20;
left: 20;
right: 20;
bottom: 20;
width: 90%;
height: 50%;
}
input[type=range] {
-webkit-appearance: none;
margin: 18px 0;
width: 100%;
}
input[type=range]:focus {
outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
width: 100%;
height: 8.4px;
cursor: pointer;
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
background: #3071a9;
border-radius: 1.3px;
border: 0.2px solid #010101;
}
input[type=range]::-webkit-slider-thumb {
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
border: 1px solid #000000;
height: 36px;
width: 16px;
border-radius: 3px;
background: #ffffff;
cursor: pointer;
-webkit-appearance: none;
margin-top: -14px;
}
input[type=range]:focus::-webkit-slider-runnable-track {
background: #367ebd;
}
input[type=range]::-moz-range-track {
width: 100%;
height: 8.4px;
cursor: pointer;
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
background: #3071a9;
border-radius: 1.3px;
border: 0.2px solid #010101;
}
input[type=range]::-moz-range-thumb {
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
border: 1px solid #000000;
height: 36px;
width: 16px;
border-radius: 3px;
background: #ffffff;
cursor: pointer;
}
input[type=range]::-ms-track {
width: 100%;
height: 8.4px;
cursor: pointer;
background: transparent;
border-color: transparent;
border-width: 16px 0;
color: transparent;
}
input[type=range]::-ms-fill-lower {
background: #2a6495;
border: 0.2px solid #010101;
border-radius: 2.6px;
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
}
input[type=range]::-ms-fill-upper {
background: #3071a9;
border: 0.2px solid #010101;
border-radius: 2.6px;
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
}
input[type=range]::-ms-thumb {
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
border: 1px solid #000000;
height: 36px;
width: 16px;
border-radius: 3px;
background: #ffffff;
cursor: pointer;
}
input[type=range]:focus::-ms-fill-lower {
background: #3071a9;
}
input[type=range]:focus::-ms-fill-upper {
background: #367ebd;
}
h2 {
font-size: 30px;
top: 10px;
color: white;
}
h1 {
position: absolute;
width: 100%;
top: 50px;
font-size: 20px;
color: lightgreen;
}
div.absolute {
position: absolute;
width: 100%;
bottom: 10px;
}
<h2><p style = "text-align: center"><output name="amount" id="amount" for="rangeInput">0</output></p></h2>
<h1><p style = "text-align: center"><?php echo'<br><br>Latitude: '.$LAT.' Longitude: '.$LON;?></p></h1>
I’m assuming the blue rectangle’s size changes depending on your browser size, correct?
The blue rectangle I have superimposed with ppt. The code for the red canvas is: var canvas = document.getElementById(‘the-canvas’),
ctx = canvas.getContext(‘2d’);
canvas.width = window.innerWidth0.9;
canvas.height = window.innerHeight0.9;
But height does not project as anticipated (as the blue rectangle)