рисовать перетаскиваемую линию с изменяемым размером на холсте

пожалуйста, я хочу знать, как нарисовать линию между двумя значками на холсте, которую можно будет перетаскивать и изменять размер при движении значков ?? У меня есть список иконок и я сделаю схему с этими иконками. Когда я буду перетаскивать эти значки из списка в другой div, я хочу соединить их линией, размер которой должен изменяться и перетаскиваться при перемещении значков. вот полный код для рисования линии с холстом, но он упускает из виду, как эта линия будет изменять размер и перетаскиваться

jsbin.com/hasuqehupo/1/edit?html, js, вывод

<!DOCTYPE html>
<html>
<head>
<title>test Line</title>
<style type="text/css">
canvas {
    border: 5px dashed rgb(205, 200, 200);
}
</style>
</head>
<body>
<canvas id="canvas" width="1000" height="500"></canvas>
<!--ScriptDrawLine-->
<script type="text/javascript" id="Line">
var clicks = 0;
var lastClick = [0, 0];

document.getElementById('canvas').addEventListener('click', drawLine, false);

function getCursorPosition(e) {
    var x;
    var y;

    if (e.pageX != undefined && e.pageY != undefined) {
        x = e.pageX;
        y = e.pageY;
    } else {
        x = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
        y = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
    }

    return [x, y];
    }

function drawLine(e) {
    context = this.getContext('2d');

    x = getCursorPosition(e)[0] - this.offsetLeft;
    y = getCursorPosition(e)[1] - this.offsetTop;

    if (clicks != 1) {
        clicks++;
    } 
    else {
        context.beginPath();
        context.moveTo(lastClick[0], lastClick[1]);
        context.lineTo(x, y, 6);
        context.strokeStyle = '#000000';
        context.stroke();
        clicks = 0;
    }

        lastClick = [x, y];
    };
</script>
<!--ScriptDrawLine-->

</body>
</html>

canvas drag-and-drop jquery html2canvas resizable
person Radhi BRIK    schedule 30.05.2016    source источник
comment
Можете ли вы предоставить рабочий код, такой как фрагмент или bin?   -  person Mosh Feu    schedule 30.05.2016
comment
Извините, я не понимаю вашего запроса   -  person Radhi BRIK    schedule 30.05.2016
comment
Я имею в виду, что вы можете использовать эти инструменты для создания рабочей демонстрации вашего кода, чтобы мы могли лучше понять проблему и то, что вы уже сделали. См. ссылки: фрагмент, bin   -  person Mosh Feu    schedule 30.05.2016
comment
jsbin.com/hasuqehupo/1/edit?html,js,output   -  person Radhi BRIK    schedule 30.05.2016
comment
Моя цель - соединить два значка линией, но, поскольку значки можно перетаскивать, я хочу знать, как линия будет нарисована с изменением размера и перетаскиванием значков.   -  person Radhi BRIK    schedule 30.05.2016