Welcome!

By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!
  • Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • You can also use markdown to share your code. When using markdown your code will be automatically converted to BBCode. For help with markdown check out the markdown guide.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.


    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

HTML Does anyone know how to get the coordinates right in a drag drop image to canvas?

I am trying to implement drag an image of a rock on to the canvas and at the moment I am just drawing circles where the event object tells me where the drop point is so I am not (yet) concerning myself about the dimensions of the image or where I grab on to it with the mouse. I am only concerned with the final drop point.

Here is a screenshot of what I mean.

dragdroprock.png

The problem is that when I drop the image of the rock on to the canvas the circle is drawn no where near the drop point. Here is the code concerning the drop action which is where I think I am going wrong.

JavaScript:
this.canvas.addEventListener( 'drop', function(evt) {
      console.log(evt);
      this.evt = evt;
      this.objects.forEach( function(e) {
        if (e == this.dragged ) {
          console.log(e.element);
          var ctx = this.canvas.getContext("2d");
          ctx.strokeStyle = "#FFFFFF";
          ctx.lineWidth = 1;
          ctx.beginPath();
          ctx.arc(this.evt.offsetX, this.evt.offsetY, 5, 0, 2 * Math.PI);
          ctx.stroke();
        }
      }.bind(this));
    }.bind(this) );

The entire code base is on https://github.com/kiwiheretic/gravity and it's not very big. It should be very easy to download it from GitHub and just open the index.html file in your browser if you need visual proof of what I am claiming.

Thanks.
 
I downloaded your code base but it does not work. Following errors occur :

a.jpg
I would assume the second is a corollary of the first. And I guess I can ignore the last two.
 
Thanks, now it works. Yes I see what your issue is. What I notice is that the closer you drop to the upper left corner, the more accurate the position becomes. If you drag all the way to that corner, the circle is actually positioned correctly ! There must be some error in computing the coordinates I guess.
BTW I still have the picture of the rock, not the large O.
 
Got it. Now I was excited to do some debugging, only to find that the drag-and-drop no longer works at all once I bring up the debugger :rolleyes: Did you find this out as well ? Any idea why this should be ? I could use the console.log output, but it's a real pain in the bottom to have to close and open the debugger all the time. Hmmm...
 
Last edited by a moderator:
I am not sure I ever managed to put breakpoints in the middle of a drag drop process. I was relying mainly on console.log but if I logged an object I could still drill down to all its properties in the console pane of Chrome Development Tools window. I usually put breakpoints in the canvas-utils.js file in the "drop" event handler which seemed to be ok as that was in the final part of the drop. As you point out that its getting further and further out the more you drop from the left hand corner makes me think I should be using a coordinate transform for the canvas but I have no idea how to calculate that anyway.

Incidentally before I was using the Canvas I was trying to get this working with SVG elements and no canvas but from what I recall I had the same problem and I scrapped all of that because I thought canvas might be easier but alas no. So I am really baffled why a coordinate transformation might even be needed.
 
I can appreciate that debugging a drag/drop process might be difficult. But I can't fathom why drag and drop totally stops working once you bring up the debugger. Ah well. Logging objects is probably the best we can do.

I've no idea either why a transformation might be needed, unless offsetX and offsetY are not actually the offsets within the canvas element ? Anyway, I started experimenting and after some iterations found one that makes it work reasonably well :

JavaScript:
ctx.arc(this.evt.offsetX / 1.35, this.evt.offsetY / 1.35, 5, 0, 2 * Math.PI);

You can probably find a better value near 1.35 that makes it more accurate. But this is very ad-hoc, unscientific and unsatisfying ... we need to understand why this is apparently necessary.
 
Here is a hunch and I don't know if I am barking up the wrong tree or not.

The canvas html element accepts a width and height attribute but I am styling with CSS. I wonder if that is causing the canvas element to be compressed rather then cropped and some how messing with the drag and drop coordinates. It's just a wild guess but I am wondering.
 
Here is a hunch and I don't know if I am barking up the wrong tree or not.

The canvas html element accepts a width and height attribute but I am styling with CSS. I wonder if that is causing the canvas element to be compressed rather then cropped and some how messing with the drag and drop coordinates. It's just a wild guess but I am wondering.
That hypothesis would be easy to test out, just leave out the css sizing. Would be weird though, if css styling would interfere with attributes set in html....
 

New Threads

Latest posts

Buy us a coffee!

Back
Top Bottom