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.

Recommended Answers

All 2 Replies

Member Avatar

Show your code.

` <script>
function writeMessage(messageLayer, message)
var context = messageLayer.getContext();
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"); 



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

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, learning, and sharing knowledge.