Hello everyone
I created one canvas and draw one line on it I want to move this line using mouse on the canvas
How to move line on canvas because using draggable function it cant move so pls help me.

Member Avatar
diafol

Show your code.

` <script>
function writeMessage(messageLayer, message)
{
var context = messageLayer.getContext();
messageLayer.clear();
context.font = "18pt Calibri";
context.fillStyle = "black";
context.fillText(message, 5, 15);
}

    window.onload = function() 
    { 
        var stage = new Kinetic.Stage({ 
            container: "container", 
            width: 578, 
            height: 200 
        }); 
        var boxLayer = new Kinetic.Layer(); 
        var messageLayer = new Kinetic.Layer(); 
        var rectX = stage.getWidth() / 2 - 50; 
        var rectY = stage.getHeight() / 2 - 25; 

        var box = new Kinetic.Rect({ 
            x: rectX, 
            y: rectY, 
            width: 100, 
            height: 50, 
            fill: "#00FFD2", 
            stroke: "black", 
            strokeWidth: 4, 
            draggable: true 
        }); 

    // write out drag and drop events 
    box.on("dragstart", function() { 
        writeMessage(messageLayer, "dragstart"); 
    }); 
    box.on("dragend", function() { 
        writeMessage(messageLayer, "dragend"); 
    }); 

        boxLayer.add(box); 
        stage.add(messageLayer); 
        stage.add(boxLayer);

}; 

</script> `
this is my code .In this code the rectangle can move but how to drag or move line using mouse