javascript - KineticJS - Patterns and Fills on Images -

i have canvas i'm creating kineticjs , adding transparent png images canvas. when stacked on top of each other, makes 1 image of outfit different parts.

what want allow user click on pattern , change specific piece of outfit pattern. need fill in non-transparent parts of 1 of images pattern. found way didn't use kineticjs , looks this:

ctx.globalcompositeoperation = 'source-in'; var ptrn = ctx.createpattern(fabrica, 'repeat'); ctx.fillstyle = ptrn; ctx.fillrect(0, 0, 375, 260); 

my question is, there way same steps outlined above kineticjs?

also, did first try without using kineticjs, when applied above code layer, filled in of images because on same layer. i'm guessing need change code either use multiple layers or add images groups in single layer. thinking right here? , better option i'm trying accomplish? multiple layers? or multiple groups on single layer?

thanks can provide.

if want custom drawing use kineticjs shape object

this kineticjs object lets control how it's drawn.

you create overlays using compositing method. put drawing code in function , give function kinetic shape's drawfunc.

here's skeleton of kinetic.shape:

var outfit1 = new kinetic.shape({     drawfunc: function(canvas) {          // passed canvas draw custom shape on         // new-up context , drawing!         var context = canvas.getcontext();          context.beginpath();          // draw stuff--including composited overlays         // can use canvas.context drawing commands      },     id:"mycustomoutfit" }); 

you can started example here: http://www.html5canvastutorials.com/kineticjs/html5-canvas-kineticjs-shape-tutorial/