Drag controls from container and drop/draw them on canvas

See more:

jQuery

Canvas

I want to allow user to drag icons from one div container and drop and draw them on canvas keeping the original icon intact. The icons are added dynamically on table. I also want to give effect of icon dragging with cursor when i drag the icon.When i use " helper: 'clone'" property i get the effect but the dropped position is incorrect and when i remove this property the original icon is removed.
My parent container for icons

<div id="dvEquipmentTool" style="removed: absolute; border: 1px solid rgb(173, 201, 247);
       display: block; background-color: white; height: 400px; z-index: 50000; padding: 3px;
       removed 100px; removed 50px; width: 200px !important;" class="ui-draggable">
       <table id="tbEquipmentTool" border="0" style="background-color: White; padding-left: 10px;
           max-height: 400px !important;">
           <tbody>
               <tr id="tRow1">
                   <td>
                       <img src="" id="imgEquipIcon1" class="ui-draggable" style="position: relative; left: 473px;
                           top: 183px;">
                   </td>
                   <td>
                       <span id="lblImgEquipName1" class="label">10-FL-105-A20</span><span id="lblImgEquipID1"
                           class="label" style="display: none;">100200</span>
                   </td>
                   <td width="10px">
                   </td>
               </tr>
               <tr id="tRow2">
                   <td>
                       <img src="" id="imgEquipIcon2" class="ui-draggable" style="position: relative;">
                   </td>
                   <td>
                       <span id="lblImgEquipName2" class="label">10-FL-3111-A20</span><span id="lblImgEquipID2"
                           class="label" style="display: none;">100199</span>
                   </td>
                   <td width="10px">
                   </td>
               </tr>
           </tbody>
       </table>
   </div>

Javascript function to make images draggable

$("img[id^=imgEquipIcon]").each(function () {


    $(this).draggable({ containment: "#dvContainer", scroll: false,//helper: 'clone',
        stop: function (event, ui) {
            var stoppos = $(this).position();
            alert(stoppos.left+","+ stoppos.top);

            var img = new Image();
            img.src = this.src;
            createEquipIcon(img, stoppos.left, stoppos.top);

        }

    });

});

function createEquipIcon(img, X, Y) {
    var dv = document.createElement('div');

    $(dv).css('top', Y);
    $(dv).css('left', X);
    $(dv).css('cursor', 'move');
    $(dv).css('position', 'absolute');
    $(dv).css('background-color', 'red');

    dv.appendChild(img);
    var index = img.id.replace('imgEquipIcon', '');

    var container = document.getElementById('dvContainer');
    container.appendChild(dv);
   //code for drawing on canvas goes here

}

Canvas for drawing images

<div id="dvContainer" runat="server" style="overflow: visible; background-repeat: no-repeat">
              <canvas id="myCanvas" width="1000px" height="600px">
            <b> *Your browser doesn't support canvas. Please switch to different browser.</b>
          </canvas>