need help adding a drag and drop event (with either javascript or jquery)

[geekmonster]

Hello

I'm trying to add a drag and drop event to my js/jquery code in which after my shape is rendered to the canvas I need to move the shape around by selecting it then dragging it into position. I'm not sure if I need to use jquery or just plain old javascript. I've been tinkering around with it but its not working for me. Can somebody give me a hint please?

function drawCircle(){
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");

    ctx.beginPath();
    ctx.arc(100, 75, 25, 0, 2 * Math.PI);
    ctx.stroke();
}

function clearArea() {
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    return false;
}

function drawEllipse(){
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");

    ctx.beginPath();
    ctx.ellipse(100, 100, 50, 80, 90 * Math.PI/180, 0, 2 * Math.PI);
    ctx.stroke();

}

function drawP(){
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");

    ctx.font = "12px serif";
    ctx.fillText("p", 50, 100);
}

function drawQ(){
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");

    ctx.font = "12px serif";
    ctx.fillText("q", 50, 100);
}
function OnClickDraw() {
    var drawtype = $('#drawType').val().toLowerCase();
    switch(drawtype) {
        case 'c':
            drawCircle();
            break;
        case 'e':
            drawEllipse();
            break;
        case 'p':
            drawP();
            break;
        case 'q':
            drawQ();
            break;
    }
    return false;
}

As you can see I'm using jquery already in my switch statement...

[justsomeguy]

Canvas elements don't really have support for drawing shapes around, the "shape" is just a collection of pixels instead of a formal object. When you call functions like beginPath, arc, and stroke, for example, you don't save a reference to that new circle because there is no reference. All it did was color in some pixels on the canvas. I think you would have to keep track yourself of which things are on the canvas and when you click you need to determine what they clicked on and then re-draw the canvas as they move the mouse.

[Ingolme]

Once something is printed onto the canvas it stops being a real entity and just becomes a mass of pixels. It cannot be moved, only drawn over.

 

What you would need to do is create what's referred to as a "scene graph". A Javascript data structure with information about the objects that are supposed to be drawn on the canvas, such as shape, position, radius and other things.

 

Then you could continually redraw the canvas using the data in the scene graph. It is a complicated system to implement, not something you could do in one afternoon if you intend to include clicking, dragging, resizing or other features.