Check out my response over here: Changing the origin of a canvas drawn image
I'll also repeat the solution below just in case someone finds this page through Google instead.
An effective method for resizing as desired is to keep one or more sides fixed while allowing another side to be adjusted by dragging a side or corner.
An added advantage of this approach is that you don't necessarily need visible anchors to resize!
This mirrors how operating system windows function.
When you resize windows on your desktop, you typically drag from the side or corner without any visible anchor points to guide you.
Here's a demonstration: http://jsfiddle.net/m1erickson/keZ82/
- Left: original image,
- Middle: resized from bottom-left corner with aspect ratio maintained (top-right corner remains unchanged)
- Right: resized from bottom only, causing vertical scaling exclusively (top edge of image remains stationary)
Please note that although this demo and example show anchors, they are purely cosmetic. You can disable the anchor display and still resize the image by dragging the sides or corners.
Sample code:
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<style>
body{ background-color: ivory; }
canvas{border:1px solid red;}
</style>
<script>
$(function(){
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var $canvas=$("#canvas");
var canvasOffset=$canvas.offset();
var offsetX=canvasOffset.left;
var offsetY=canvasOffset.top;
var isDown=false;
var iW;
var iH;
var iLeft=50;
var iTop=50;
var iRight,iBottom,iOrientation;
var img=new Image();
img.onload=function(){
iW=img.width;
iH=img.height;
iRight=iLeft+iW;
iBottom=iTop+iH;
iOrientation=(iW>=iH)?"Wide":"Tall";
draw(true);
}
img.src="facesSmall.png";
var border=10;
var isLeft=false;
var isRight=false;
var isTop=false;
var isBottom=false;
var iAnchor;
canvas.onmousedown=handleMousedown;
canvas.onmousemove=handleMousemove;
canvas.onmouseup=handleMouseup;
canvas.onmouseout=handleMouseup;
function hitResizeAnchor(x,y){
// determine which borders are under the mouse
isLeft=(x>iLeft && x<iLeft+border);
isRight=(x<iRight && x>iRight-border);
isTop=(y>iTop && y<iTop+border);
isBottom=(y<iBottom && y>iBottom-border);
// return the appropriate anchor based on position
if(isTop && isLeft){ return(iOrientation+"TL"); }
if(isTop && isRight){ return(iOrientation+"TR"); }
if(isBottom && isLeft){ return(iOrientation+"BL"); }
if(isBottom && isRight){ return(iOrientation+"BR"); }
if(isTop){ return("T"); }
if(isRight){ return("R"); }
if(isBottom){ return("B"); }
if(isLeft){ return("L"); }
return(null);
}
var resizeFunctions={
T: function(x,y){ iTop=y; },
R: function(x,y){ iRight=x; },
B: function(x,y){ iBottom=y; },
L: function(x,y){ iLeft=x; },
WideTR: function(x,y){
iRight=x;
iTop=iBottom-(iH*(iRight-iLeft)/iW);
},
TallTR: function(x,y){
iTop=y;
iRight=iLeft+(iW*(iBottom-iTop)/iH);
},
WideBR: function(x,y){
iRight=x;
iBottom=iTop+(iH*(iRight-iLeft)/iW);
},
TallBR: function(x,y){
iBottom=y;
iRight=iLeft+(iW*(iBottom-iTop)/iH);
},
WideBL: function(x,y){
iLeft=x;
iBottom=iTop+(iH*(iRight-iLeft)/iW);
},
TallBL: function(x,y){
iBottom=y;
iLeft=iRight-(iW*(iBottom-iTop)/iH);
},
WideTL: function(x,y){
iLeft=x;
iTop=iBottom-(iH*(iRight-iLeft)/iW);
},
TallTL: function(x,y){
iBottom=y;
iLeft=iRight-(iW*(iBottom-iTop)/iH);
}
};
function handleMousedown(e){
// indicate that we will handle this mousedown event
e.preventDefault();
e.stopPropagation();
var mouseX=e.clientX-offsetX;
var mouseY=e.clientY-offsetY;
iAnchor=hitResizeAnchor(mouseX,mouseY);
isDown=(iAnchor);
}
function handleMouseup(e){
// indicate that we will handle this mouseup event
e.preventDefault();
e.stopPropagation();
isDown=false;
draw(true);
}
function handleMousemove(e){
// indicate that we will handle this mousemove event
e.preventDefault();
e.stopPropagation();
// exit if not currently dragging
if(!isDown){return;}
// obtain current MouseX/Y coordinates
var mouseX=e.clientX-offsetX;
var mouseY=e.clientY-offsetY;
// update iLeft, iRight, iTop, iBottom based on drag operation
resizeFunctions[iAnchor](mouseX,mouseY);
// redraw the resized image
draw(false);
}
function draw(withAnchors){
var cx=iLeft+(iRight-iLeft)/2;
var cy=iTop+(iBottom-iTop)/2;
ctx.clearRect(0,0,canvas.width,canvas.height);
ctx.drawImage(img,iLeft,iTop,iRight-iLeft,iBottom-iTop);
if(withAnchors){
ctx.fillRect(iLeft,iTop,border,border);
ctx.fillRect(iRight-border,iTop,border,border);
ctx.fillRect(iRight-border,iBottom-border,border,border);
ctx.fillRect(iLeft,iBottom-border,border,border);
ctx.fillRect(cx,iTop,border,border);
ctx.fillRect(cx,iBottom-border,border,border);
ctx.fillRect(iLeft,cy,border,border);
ctx.fillRect(iRight-border,cy,border,border);
}
}
}); // end $(function(){});
</script>
</head>
<body>
<h4>Adjusting image dimensions</h4>
<canvas id="canvas" width=300 height=300></canvas>
</body>
</html>