canvas - Masking Using Kinetic.js -

i draw 2 draggable bezier curve , circle using kinetic js.my problem want find mask area.is there way find intersection point of bezier , circle.or suggest me best way of masking canvas.i want draw image on masked(visible) region.

compositing can , mask intersections, kineticjs not offer compositing built-in method.

in particular, 'source-in' compositing reveal intersection of existing shapes , newly drawn shape. when draw new circle on existing curves, intersection of circle & curves remain.

a workaround use in-memory html5 canvas compositing , use canvas source kinetic.image.

here's outline of how it:

1. create in-memory canvas:

   var compositingcanvas=document.createelement('canvas'); var context=compositingcanvas.getcontext('2d'); 

2. draw bezier curves using context.moveto , context.beziercurveto

3. set compositing source-in: context.globalcompositeoperation='source-in';

4. draw circle using context.arc

5. create kinetic.image using compositingcanvas source:

   var mymaskedshape=new kinetic.image({     image:compositingcanvas,     .... }); 

[ add demo code showing compositing in html5 canvas ]

here's example of how use compositing in html5 canvas limit lens image intersection of eye-beziers , retina-circle. can use html5 canvas image source kinetic.image (yes...an html5 canvas can source of kinetic.image!).

good luck project!

var canvas=document.createelement("canvas");  var canvas=document.getelementbyid("canvas");  var ctx=canvas.getcontext("2d");  var cw=canvas.width=300;  var ch=canvas.height=300;  ctx.linewidth=2;    var img=new image();  img.onload=function(){      draweye(null,'black');    ctx.globalcompositeoperation='source-in';    drawretina(null,'black');    ctx.drawimage(img,173-38,150-38,img.width,img.height);    ctx.globalcompositeoperation='source-over';         draweye('black',null);    }  img.src='https://dl.dropboxusercontent.com/u/139992952/multple/stars.png';      function draweye(stroke,fill){    ctx.beginpath();    ctx.moveto(225,150);    ctx.beziercurveto( 189,135, 83,75, 75,150);    ctx.beziercurveto( 83,225,  189,165, 225,150);    ctx.closepath();    if(fill){ ctx.fill(); }    if(stroke){ ctx.stroke(); }  }    function drawretina(stroke,fill){    ctx.beginpath();    ctx.arc(173,150,38,0,math.pi*2);    ctx.closepath();    if(fill){ ctx.fill(); }    if(stroke){ ctx.stroke(); }  }      function draweye1(stroke,fill){    ctx.beginpath();    ctx.moveto(150,100);    ctx.beziercurveto( 125,90, 55,50, 50,100);    ctx.beziercurveto( 55,150,  125,110, 150,100);    ctx.closepath();    if(fill){ ctx.fill(); }    if(stroke){ ctx.stroke(); }  }

var canvas=document.createelement("canvas");  var canvas=document.getelementbyid("canvas");  var ctx=canvas.getcontext("2d");  var cw=canvas.width=300;  var ch=canvas.height=300;  ctx.linewidth=2;    var img=new image();  img.onload=function(){      draweye(null,'black');    ctx.globalcompositeoperation='source-in';    drawretina(null,'black');    ctx.drawimage(img,173-38,150-38,img.width,img.height);    ctx.globalcompositeoperation='source-over';         draweye('black',null);    }  img.src='https://dl.dropboxusercontent.com/u/139992952/multple/stars.png';      function draweye(stroke,fill){    ctx.beginpath();    ctx.moveto(225,150);    ctx.beziercurveto( 189,135, 83,75, 75,150);    ctx.beziercurveto( 83,225,  189,165, 225,150);    ctx.closepath();    if(fill){ ctx.fill(); }    if(stroke){ ctx.stroke(); }  }    function drawretina(stroke,fill){    ctx.beginpath();    ctx.arc(173,150,38,0,math.pi*2);    ctx.closepath();    if(fill){ ctx.fill(); }    if(stroke){ ctx.stroke(); }  }      function draweye1(stroke,fill){    ctx.beginpath();    ctx.moveto(150,100);    ctx.beziercurveto( 125,90, 55,50, 50,100);    ctx.beziercurveto( 55,150,  125,110, 150,100);    ctx.closepath();    if(fill){ ctx.fill(); }    if(stroke){ ctx.stroke(); }  }

<h4>intersection of eye & retina filled image using compositing</h4>  <canvas id="canvas" width=300 height=300></canvas>