Search code examples
javascriptjqueryhtmlcanvaskineticjs

Mask/Clip an Image using a Polygon in KineticJS

Is it possible to mask/clip an Image using a Polygon in KineticJS?

JSfiddle: http://jsfiddle.net/LNeML/

In the jsfiddle, the Polygon should clip the Image of Yoda.

I did not see any clipping function in the docs for KineticJS objects. I was looking for a simple way to clip an Image, something similar to EaselJS:

star = new createjs.Shape(); 
star.graphics.beginStroke("#FF0").setStrokeStyle(5).drawPolyStar(0,0,50, 15,5,0.6).closePath();
bitmap.mask = star;
stage.addChild(bitmap);
Solution

  • well, looking at your fiddle, I updated it: FIDDLE

    basically you need the newer version of kineticJS included in your project, this way you could do:

      fillPatternImage: ImageObject

    as one of the polygon attributes. This fillPatternImage works for any shape and allows you to do what you want, but not in exactly the same way as EaselJS, I would say it is pretty easy though.