Unanswered: HTML5 canvas: move a masked image on touchmove?
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;
var canvas = document.getElementById('mycanvas');
var pImg = new Image();
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;