KineticJS - Patterns and Fills on Images

Question

I have a canvas that I'm creating with KineticJS and I am adding transparent PNG images to that canvas. When stacked on top of each other, this makes one image of an outfit with all the different parts.

What I then want to do is allow the user to click on a pattern and then change a specific piece of that outfit with that pattern. So I need to fill in the non-transparent parts of one of the images with that pattern. I found a way to do this that didn't use KineticJS and it looks something like this:

ctx.globalCompositeOperation = 'source-in';
var ptrn = ctx.createPattern(fabricA, 'repeat');
ctx.fillStyle = ptrn;
ctx.fillRect(0, 0, 375, 260);

My question is, is there a way to do the same steps outlined above with KineticJS?

Also, I did first try to just do this without using KineticJS, but when I applied the above code to the layer, it filled in all of the images because they were all on the same layer. So I'm guessing that I will need to change my code to either use multiple layers or to add the images to groups in a single layer. Is my thinking right here? And which would be the better option for what I'm trying to accomplish? Multiple Layers? Or Multiple Groups on a single Layer?

Thanks for any help that anyone can provide.

Answer 1

If you want to do custom drawing then use the KineticJS Shape Object

This is a KineticJS object that lets you control exactly how it's drawn.

You create your overlays using your compositing method. Then put that drawing code in a function and give that function to Kinetic Shape's drawFunc.

Here's a skeleton of Kinetic.Shape:

var outfit1 = new Kinetic.Shape({
    drawFunc: function(canvas) {

        // you are passed a canvas to draw your custom shape on
        // so new-up a context and get drawing!
        var context = canvas.getContext();

        context.beginPath();

        // Draw stuff--including your composited overlays
        // You can use any canvas.context drawing commands

    },
    id:"myCustomOutfit"
});

You can get started with an example here: http://www.html5canvastutorials.com/kineticjs/html5-canvas-kineticjs-shape-tutorial/