How to create a circular clip using kineticjs?

1
2
3
4
5
6
7

var stage = new Kinetic.Stage({
  container: 'container',
  width: 500,
  height: 500
});

var layer = new Kinetic.Layer();

1
2
3
4
5
6

var clipCircle = new Kinetic.Circle({
  x: stage.getWidth() / 2,
  y: stage.getHeight() / 2,
  radius: 100,
  fill: 'white'
});

1
2
3
4
5
6
7

var image = new Kinetic.Image({
  x: stage.getWidth() / 2,
  y: stage.getHeight() / 2,
  width: 200,
  height: 200,
  image: yourImage
});

1
2
3

image.setClipFunc(function(ctx) {
  clipCircle.drawScene();
});

1
2
3
4

layer.add(clipCircle);
layer.add(image);
stage.add(layer);
layer.draw();