I can mask an image with an html canvas, but it there a way to move the image within the mask on mouse down event and even better on: mousedown, drag, then mouse up? FYI: T .I am unable to even get the masked image to move on mousedown. The addStartDragHandler() is where I'm trying to move the masked image on mouse down. Here is what I have so far ..

initialize:function(){
var scope = this;
this.on('painted', function(){
//debugger;
var canvas = document.getElementById('mycanvas');

//canvas.onmousedown = scope.startDrag;
//canvas.onmousemove = scope.drag;
//canvas.onmouseup = scope.stopDrag;



var ctx = canvas.getContext("2d");

var pImg = new Image();
pImg.src= 'app/view/1-5/images/tiger@2x.png';
pImg.height = 589;
pImg.width = 662;
pImg.id = 'etl_masked_img';

var scope2 = scope;

pImg.onload=function(scope){
//debugger;
//ctx.fillRect(0,0,canvas.width,canvas.height) //fill the background. color is default black
//ctx.beginPath();
ctx.arc(200,200,150,0,2 * Math.PI,false)//draw the circle
ctx.clip()//call the clip method so the next render is clipped in last path
ctx.drawImage(this,0,0) //this=image object of onload function
}
scope.addStartDragHandler(canvas,ctx,pImg);
//canvas.onmousemove = scope.drag;
//canvas.onmouseup = scope.stopDrag;



},scope )


},
addStartDragHandler :function(canvas,ctx, pImg) {
debugger;
canvas.onmousedown = function(e) {
debugger;

ctx.clearRect(0, 0, canvas.width, canvas.height);



pImg.style.left = 500 + 'px';
pImg.style.top = 500 + 'px';

ctx.arc(400,400,150,0,2 * Math.PI,false)//draw the circle
ctx.clip();
ctx.drawImage(pImg,0,0) //this=image object of onload function


}
}