CODEWITHSUNDEEP
canvaskineticjs
Mike Deck
Mike Deck

Reputation: 18397

How can I create a circular clip using KineticJS?

I would like to clip a group using a circular path, but the clipFunc for the group doesn't seem to be executing and the documentation on how to use the clipFunc property is a little spotty.

Here is a jsfiddle with my current attempt.

Here is the relevant code:

var stage = new Kinetic.Stage({
  container: 'container',
  width: 500,
  height: 500
});
var layer = new Kinetic.Layer();
var group = new Kinetic.Group({
   clipFunc: function(canvas) {
      var context = canvas.getContext();
      context.beginPath();
      context.arc(250, 250, 50, 0, 2 * Math.PI, false);
      context.clip();
   }
});

var rect = new Kinetic.Rect({
   x: 150,
   y: 225,
   width: 200,
   height: 200,
   fill: 'blue',
   stroke: 'black',
   strokeWidth: 2
});

group.add(rect);
layer.add(group);
stage.add(layer);

Currently if I put a break point in the clipFunc function it never gets hit.

Upvotes: 3

Views: 809

Answers (1)

Eric Rowell
Eric Rowell

Reputation: 5219

Support for the clipFunc was dropped in favor of clip, which is just a rectangular clipping region. If you'd like to simulate a circular clip, you can convert the group to an image using toImage(), and then draw a circle with an image fill pattern.

The clipFunc property was dropped because the canvas clip functionality doesn't play very well with non rectangular clipping regions because the edges are non-antialiased (this is particularly noticeable for circular paths)

Upvotes: 3

Related Questions