Masking Using Kinetic.js

Question

I draw two draggable bezier curve and circle using kinetic js.my problem is that i want to find the mask area.is there any way to find intersection point of bezier and circle.Or suggest me best way of masking canvas.i want to draw image on masked(visible) region.

Answer 1

Compositing can quickly and easily mask intersections, but KineticJS does not offer compositing as a built-in method.

In particular, 'source-in' compositing will reveal the intersection of existing shapes and a newly drawn shape. So when you draw your new circle over your existing curves, only the intersection of the circle & curves will remain.

A workaround is to use an in-memory html5 canvas to do the compositing and then use that canvas as a source for a Kinetic.Image.

Here's an outline of how to do it:

1. Create an in-memory canvas:

   var compositingCanvas=document.createElement('canvas');
   var context=compositingCanvas.getContext('2d');
   

2. Draw your Bezier curves using context.moveTo and context.bezierCurveTo

3. Set compositing to source-in: context.globalCompositeOperation='source-in';

4. Draw your Circle using context.arc

5. Create a Kinetic.Image using compositingCanvas as the source:

   var myMaskedShape=new Kinetic.Image({
       image:compositingCanvas,
       ....
   });
   

[ Add Demo Code showing compositing in html5 canvas ]

Here's an example of how to use compositing in html5 Canvas to limit your lens image to the intersection of the eye-beziers and the retina-circle. You can use this html5 Canvas as an image source for your Kinetic.Image (Yes...An html5 canvas can be the source of your Kinetic.Image!).

Good luck with your 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 with image using compositing</h4>
<canvas id="canvas" width=300 height=300></canvas>