在画布上拖动点并获取坐标

Question

I need to drag any point inside the canvas and I need to get the coordinate it occupies. I am new to canvas, I do not know how to do it. I would also like to get the coordinates of all points.

http://jsfiddle.net/bfe8160h/

$("#canvas").click(function(e){
     getPosition(e); 
});

var pointSize = 3;

function getPosition(event){
     var rect = canvas.getBoundingClientRect();
     var x = event.clientX - rect.left;
     var y = event.clientY - rect.top;

     drawCoordinates(x,y);
}

function drawCoordinates(x,y){  
    var ctx = document.getElementById("canvas").getContext("2d");


    ctx.fillStyle = "#ff2626"; // Red color

    ctx.beginPath();
    ctx.arc(x, y, pointSize, 0, Math.PI * 2, true);
    ctx.fill();
}

I need to get the position of the new points. For example if I move a point that is in (1,2) to (4,6) I need to get 4.6 when I finish moving the point

Answer 1

If you want to get the coordinates x,y when you move the cursor, add the following to your code:

var allPoints = [];//contains the coordinates of all the position
var points; // contains the coordinates of the recent position

canvas = document.getElementById('canvas');

canvas.addEventListener("mousemove",function() {
    var rect = canvas.getBoundingClientRect();
    var x = event.clientX - rect.left;
    var y = event.clientY - rect.top;
    points = x+","+y;
    alert(points);
    allPoints.push(x+":"+y);//pushes the new coordinates
    alert(allPoints);
});