Thank you raam86, never imagined it would have been this simple.
This is how i solved it in case someone comes down this road:
$( "[id^=home]" ).draggable({
// options...
start: function(event,ui){
context.strokeStyle = 'Blue';
$( this ).addClass("dragging");
if (drawWhenDragging){
context.beginPath();
context.moveTo(ui.position.left+$(this).width()/2, ui.position.top+$(this).width()/2);
}
},
drag: function(event,ui){
$( this ).addClass("dragging");
if (drawWhenDragging){
context.lineTo(ui.position.left+$(this).width()/2, ui.position.top+$(this).width()/2);
context.stroke();
}
},
stop: function(event,ui){
$( this ).removeClass("dragging");
if (drawWhenDragging){
context.closePath();
}
}
});