Canvas Profile Picture Edit

[Megabyte512]

I built a web based canvas Profile Picture Editor. It has zooming and panning capabilities. After that I am trying to take a portion of the context and export it via toDataUrl((). There by allowing users to save the image. What I get is the same part of the picture exported to the img regardless of any zooming or panning.
Please comment. Thank you.

$(document).ready( function() {
var myEditCanvas = document.getElementById("myEditCanvas");
var context = myEditCanvas.getContext("2d");
var scale = 2;
var originx = 0;
var originy = 0;
var imageObj = new Image();
imageObj.src = document.getElementById("photoId").src;

var mouse={x:0,y:0}; //make an object to hold mouse position
var isDown = false;
var startCoords = [];
var last = [0, 0];



function draw(){
// Store the current transformation matrix
context.save();

// Use the identity matrix while clearing the canvas
context.setTransform(1, 0, 0, 1, 0, 0);
context.clearRect(0, 0, myEditCanvas.width, myEditCanvas.height);

// Restore the transform
context.restore();

// Draw on transformed context
context.drawImage(imageObj, mouse.x, mouse.y, 300, 300);
}
setInterval(draw,100);


var mousewheelevt=(/Firefox/i.test(navigator.userAgent))? "DOMMouseScroll" : "mousewheel" //FF doesn't recognize mousewheel as of FF3.x

if (myEditCanvas.attachEvent) //if IE (and Opera depending on user setting)


myEditCanvas.attachEvent("on"+mousewheelevt, scrollOnYou)


else if (myEditCanvas.addEventListener) //WC3 browsers


myEditCanvas.addEventListener(mousewheelevt, scrollOnYou, false)


function scrollOnYou(event){

var mousex = event.clientX - myEditCanvas.offsetLeft;
var mousey = event.clientY - myEditCanvas.offsetTop;
var wheel = event.detail? event.detail / 120 : event.wheelDelta


//according to Chris comment
var zoom = Math.pow(1 + Math.abs(wheel)/2 , wheel > 0 ? 1 : -1);

context.translate(
originx,
originy
);
context.scale(zoom,zoom);
context.translate(
-( mousex / scale + originx - mousex / ( scale * zoom ) ),
-( mousey / scale + originy - mousey / ( scale * zoom ) )
);

originx = ( mousex / scale + originx - mousex / ( scale * zoom ) );
originy = ( mousey / scale + originy - mousey / ( scale * zoom ) );
scale *= zoom;
}

myEditCanvas.onmousedown=function(e){
isDown = true;
}

myEditCanvas.onmousemove=function(e){
if(isDown == true){
mouse={x:e.pageX-this.offsetLeft - (myEditCanvas.width / 2) , y:e.pageY-this.offsetTop - (myEditCanvas.height / 2)};
}
}

myEditCanvas.onmouseup=function(e){
isDown = false;
//alert("mouse up");
getResults();
}


function getResults() {

var temp_ctx, temp_canvas;
temp_canvas = document.createElement('canvas');
temp_ctx = temp_canvas.getContext('2d');
temp_ctx.drawImage(imageObj, 200, 200, 300, 300, 0, 0, 100, 100);
var vData = temp_canvas.toDataURL();
document.getElementById("saveimg").src = vData;
}
} );


<div id="map">
<canvas id="myEditCanvas" width="300" height="300"></canvas>
</div>
<div style="display:none">
<img src="" id="photoId"></img > <!-- sorry cant give out path info security reasons -->
</div>
<img src="" id="saveimg"></img>