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 ..

var scope = this;
this.on('painted', function(){
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;

//ctx.fillRect(0,0,canvas.width,canvas.height) //fill the background. color is default black
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
//canvas.onmousemove = scope.drag;
//canvas.onmouseup = scope.stopDrag;

},scope )

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

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.drawImage(pImg,0,0) //this=image object of onload function