Altering one shape using another shape is called compositing.
In your case subtracting the new circle from the existing rectangle would be a compositing operation called "destination-out".
KineticJS does not offer composite operations on its objects.
This how to composite your rectangle minus circle using non-Kinetic html canvas:
// draw the rectangle
ctx.fillStyle="lightblue";
ctx.fillRect(20,20,80,160);
// save the context state
ctx.save();
// set compositing to destination-out
// all new drawings will "cut-out" existing
// drawings where they both overlap
ctx.globalCompositeOperation="destination-out";
// draw the circle
ctx.beginPath();
ctx.arc(100,90,30,0,Math.PI*2);
ctx.closePath();
ctx.fill();
// restore the context state
// This also turns off compositing
ctx.restore();
What you can do to achieve your effect in KineticJS
A Demo: http://jsfiddle.net/m1erickson/m34tn/
- Create an off-screen canvas
- Draw your rectangle-minus-circle on that canvas
- Use that canvas as the source for a Kinetic.Image
The result is that you will have a Kinetic image object with the shape you desire.