Hola espero que alguien pueda ayudarme estoy haciendo una sección de una web en la que tengo que arrastar imagenes a un canvas esto para que el usuario pueda hacer una especie de plano de una habitación, y lo pueda enviar via web, pude hacer esto de esta forma.

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
</head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script language="JavaScript">
var mouseDown = false;
var mouseDownX = -1;
var mouseDownY = -1;
var clonedElm = null;

$().ready(function(){
$(document).mousedown(onMouseDown);
$(document).mousemove(onMouseMove);
$(document).mouseup(onMouseUp);
});

function onMouseDown (event)
{
if (event.srcElement == undefined && event.target != undefined)
event.srcElement = event.target;

if (!$(event.srcElement).hasClass("draggable"))
return;

mouseDown = true;

if ($(event.srcElement).hasClass("clonable"))
{
//clone the element
clonedElm = $(event.srcElement).clone();
$(clonedElm).removeClass("clonable");
$(clonedElm).addClass("thumbnail");
var offset = $(event.srcElement).offset();
$(event.srcElement).parent().append($(clonedElm));
$(clonedElm).offset(offset);
}
else
{
clonedElm = $(event.srcElement);
}

mouseDownX = event.pageX;
mouseDownY = event.pageY;

return false;
}

function onMouseMove (event)
{
if (clonedElm == null)
return;

var cloneOffset = $(clonedElm).offset();
var x = cloneOffset.left + (event.pageX - mouseDownX);
var y = cloneOffset.top + (event.pageY - mouseDownY);
$(clonedElm).offset({left:x, top:y});
mouseDownX = event.pageX;
mouseDownY = event.pageY;
return false;
}

function onMouseUp (event)
{
//check if object is dropped on droppable element
var droppableElements = $(".droppable");
if (droppableElements.length == 0)
{
cancelDrop(event);
}
else
{
var droppableElm = null;
for (var i = droppableElements.length-1; i >= 0; i--)
{
if (isLocationInElement(droppableElements[i], event.pageX, event.pageY))
{
droppableElm = droppableElements[i];
break;
}
}

if (droppableElm == null)
cancelDrop(event);
else
performDrop (event, droppableElm);
}

mouseDown = false;
clonedElm = null;
mouseDownX = -1;
mouseDownY = -1;
}

function cancelDrop (event)
{
if (clonedElm == null)
return;
if (!$(clonedElm).hasClass("clonable"))
{
$(clonedElm).remove();
}
clonedElm = null;
}

function performDrop (event, droppableElm)
{
if (event.srcElement == undefined && event.target != undefined)
event.srcElement = event.target;

//check element has source attribute
var src = $(event.srcElement).attr("src");

if (src != undefined && $(event.srcElement).hasClass("thumbnail"))
{
var newImage = "<img src='" + src + "' class='draggable'>";
var newImageElm = $(newImage).appendTo($(droppableElm));
//remove thumbnail
$(clonedElm).remove();
}

clonedElm = null;
}

function isLocationInElement (element, x, y)
{
var elmOffset = $(element).offset();
if (x >= elmOffset.left && x <= (elmOffset.left + $(element).width()) &&
y >= elmOffset.top && y <= (elmOffset.top + $(element).height()))
return true;
return false;
}


function showCorners () {
this.cornersvisible = (this.cornersvisible) ? false : true;
this.modifyImages(function(image) {
image.setCornersVisibility(this.cornersvisible);
});
}
function modifyImages (fn) {
for (var i = 0, l = canvas._aImages.length; i < l; i += 1) {
fn.call(this, canvas._aImages[i]);
}
canvas.renderAll();
}
</script>
<body>
<div id="imagesDiv1">
<img src="images/image1.jpg" height="60" class="draggable clonable">
<img src="images/image2.jpg" height="60" class="draggable clonable">
</div>
Drag & Drop images below
<div id="imagesDiv2" style="height:600px; border:solid" class="droppable">
</div>
</body>
</html>

pero necesito redimensionar las imagenes una vez que son agregadas al canvas o mejor dicho a mi div "imagenesDiv1" e buscado la forma pero no encuentro como hacerlo

si no es muy claro es algo como esto
una vez que se cargan las img dando clic en las miniaturas se carga la img y lo que me gustaria saber es que cuando pone el mause y hacer clic en una esquina de la imagen se puede redimensionar incluso rotar alguien sabe como ??? porfa XD

http://imagine-it.org/canvas/photodemo/canvas.html