kiwiheretic
Coder
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.
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.
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.
Here is a screenshot of what I mean.
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.