Connect canvas with lines

Question

I need to connect two canvas with a line to create a dynamic workflow.

I\'ll generate the canvas rectangle dynamic (amount of steps I have at DB) but I need to conne

Answer 1

Here’s how to automatically connect 2 draggable canvas rectangles with a line

First, define some boxes and connectors:

    // define any boxes that will be drawn
    var boxes=[];
    boxes.push({x:50,y:25,w:75,h:50});    // x,y,width,height
    boxes.push({x:200,y:100,w:50,h:50});

    // define any connectors between any boxes
    var connectors=[];
    connectors.push({box1:0,box2:1});

Draw the boxes and automatically draw their connectors:

    function draw(){

        // clear the canvas
        ctx.clearRect(0,0,canvas.width,canvas.height);

        for(var i=0;i

The code below allows any box to be dragged and remain connected.

Here is code and a Fiddle: http://jsfiddle.net/m1erickson/GX6HS/

 









    
Drag boxes--they remain connected