# print dynamic coordinates from draggable image
**URL:** https://forum.kirupa.com/t/print-dynamic-coordinates-from-draggable-image/663575
**Category:** programming
**Created:** [December 10, 2023, 6:49pm UTC](https://forum.kirupa.com/t/print-dynamic-coordinates-from-draggable-image/663575 "2023-12-10T18:49:23Z")
**Posts on this page:** 16
**Page:** 1
### Author:  [@chrsyl](https://forum.kirupa.com/u/chrsyl)
#### Post date: [December 10, 2023, 6:49pm UTC](https://forum.kirupa.com/t/print-dynamic-coordinates-from-draggable-image/663575/1 "2023-12-10T18:49:23Z")
Using kirupas follow\_mouse\_cursor.htm, how to print mouse coordinates dynamically on the screen below the dynamic image?
---
### Author:  [@kirupa](https://forum.kirupa.com/u/kirupa)
#### Post date: [December 10, 2023, 7:19pm UTC](https://forum.kirupa.com/t/print-dynamic-coordinates-from-draggable-image/663575/2 "2023-12-10T19:19:53Z")
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?
> **[Follow the Mouse Cursor](https://www.kirupa.com/canvas/follow_mouse_cursor.htm)**
>
> Learn how to draw something on the canvas that follows your mouse around.
Cheers,
Kirupa
---
### Author:  [@chrsyl](https://forum.kirupa.com/u/chrsyl)
#### Post date: [December 11, 2023, 1:13am UTC](https://forum.kirupa.com/t/print-dynamic-coordinates-from-draggable-image/663575/3 "2023-12-11T01:13:21Z")
Correct and Thank you! My question is how to code so that the coordinates are dynamically shown below the dynamic image.
---
### Author:  [@kirupa](https://forum.kirupa.com/u/kirupa)
#### Post date: [December 11, 2023, 2:05am UTC](https://forum.kirupa.com/t/print-dynamic-coordinates-from-draggable-image/663575/4 "2023-12-11T02:05:51Z")
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
---
### Author:  [@chrsyl](https://forum.kirupa.com/u/chrsyl)
#### Post date: [December 11, 2023, 8:50am UTC](https://forum.kirupa.com/t/print-dynamic-coordinates-from-draggable-image/663575/5 "2023-12-11T08:50:57Z")
I mean the changing x & y coordinates for the dragged object. Best
---
### Author:  [@kirupa](https://forum.kirupa.com/u/kirupa)
#### Post date: [December 11, 2023, 7:34pm UTC](https://forum.kirupa.com/t/print-dynamic-coordinates-from-draggable-image/663575/6 "2023-12-11T19:34:35Z")
Take a look at this example where I added the coordinates of the moving element below the canvas:
```auto
Canvas Follow Mouse
Coordinates go here
```
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! 🙂
---
### Author:  [@chrsyl](https://forum.kirupa.com/u/chrsyl)
#### Post date: [December 11, 2023, 8:08pm UTC](https://forum.kirupa.com/t/print-dynamic-coordinates-from-draggable-image/663575/7 "2023-12-11T20:08:25Z")
Thanks a lot! Yes, that’s what I asked about! Will try to proceed from there …
---
### Author:  [@chrsyl](https://forum.kirupa.com/u/chrsyl)
#### Post date: [December 12, 2023, 6:35pm UTC](https://forum.kirupa.com/t/print-dynamic-coordinates-from-draggable-image/663575/8 "2023-12-12T18:35:35Z")
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”;
---
### Author:  [@kirupa](https://forum.kirupa.com/u/kirupa)
#### Post date: [December 13, 2023, 6:51pm UTC](https://forum.kirupa.com/t/print-dynamic-coordinates-from-draggable-image/663575/9 "2023-12-13T18:51:31Z")
Try using the approach outlined here:
> **[Drawing Images on the Canvas](https://www.kirupa.com/canvas/drawing_images.htm)**
>
> Learn how to take your image content and use the drawImage method to turn it into pixels to display on the canvas!
Without seeing your full code it will be difficult to debug exactly what the cause is 🙂
---
### Author:  [@chrsyl](https://forum.kirupa.com/u/chrsyl)
#### Post date: [December 17, 2023, 8:31pm UTC](https://forum.kirupa.com/t/print-dynamic-coordinates-from-draggable-image/663575/10 "2023-12-17T20:31:43Z")
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
---
### Author:  [@kirupa](https://forum.kirupa.com/u/kirupa)
#### Post date: [December 18, 2023, 3:30am UTC](https://forum.kirupa.com/t/print-dynamic-coordinates-from-draggable-image/663575/11 "2023-12-18T03:30:22Z")
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 🙂
---
### Author:  [@chrsyl](https://forum.kirupa.com/u/chrsyl)
#### Post date: [December 18, 2023, 4:15pm UTC](https://forum.kirupa.com/t/print-dynamic-coordinates-from-draggable-image/663575/12 "2023-12-18T16:15:52Z")
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(). 🙂
…
```auto
Drag/Drop/Bounce
Coordinates go here
```
---
### Author:  [@chrsyl](https://forum.kirupa.com/u/chrsyl)
#### Post date: [December 18, 2023, 7:00pm UTC](https://forum.kirupa.com/t/print-dynamic-coordinates-from-draggable-image/663575/13 "2023-12-18T19:00:26Z")
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 …
---
### Author:  [@chrsyl](https://forum.kirupa.com/u/chrsyl)
#### Post date: [January 24, 2024, 10:45am UTC](https://forum.kirupa.com/t/print-dynamic-coordinates-from-draggable-image/663575/14 "2024-01-24T10:45:55Z")
Helo,
how do I get the canvas element (red) to fill the screen with coordinates as the blue rectangle?
Best
Christer
…
\
```
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;
}
```
Latitude: '.$LAT.' Longitude: '.$LON;?>
```
---
### Author:  [@kirupa](https://forum.kirupa.com/u/kirupa)
#### Post date: [January 25, 2024, 8:27pm UTC](https://forum.kirupa.com/t/print-dynamic-coordinates-from-draggable-image/663575/15 "2024-01-25T20:27:35Z")
I’m assuming the blue rectangle’s size changes depending on your browser size, correct?
---
### Author:  [@chrsyl](https://forum.kirupa.com/u/chrsyl)
#### Post date: [January 26, 2024, 8:05am UTC](https://forum.kirupa.com/t/print-dynamic-coordinates-from-draggable-image/663575/16 "2024-01-26T08:05:49Z")
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.innerWidth_0.9;
canvas.height = window.innerHeight_0.9;
But height does not project as anticipated (as the blue rectangle)
