Fill png non transparent part of the image using kineticjs

Question

I am trying to fill a png image with red color using kineticjs. But when I am trying to apply fill:"red", it fill transparent part of the image. I want to fill non transparent part of the image.

Here it is:

 [demo]:http://jsfiddle.net/9wwL2z5L/1/

Answer 1

Here's one way using an in-memory html5 canvas element.

• create a canvas element and size it to the image size

• draw the image onto the canvas

• set compositing to 'source-in'. This will cause any new drawings to appear only on currently non-transparent pixels.

• draw a red rectangle covering the entire canvas. Only the pixels inside the cat will be red

• set the image source of the Kinetic.Image to the in-memory canvas.

Here's example code and a Demo:

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

        var imageObj = new Image();
        imageObj.onload = function() {
            
          var canvas=document.createElement('canvas');
          var ctx=canvas.getContext('2d');
          canvas.width=imageObj.width;
          canvas.height=imageObj.height;
          ctx.drawImage(imageObj,0,0);
          ctx.globalCompositeOperation='source-in';
          ctx.fillStyle='red';
        ctx.fillRect( 0,0, canvas.width,  canvas.height);
          
            
          var cat = new Kinetic.Image({
            image: canvas
          });

          // add the shape to the layer
          layer.add(cat);

          // add the layer to the stage
          stage.add(layer);
        };
        imageObj.src = 'http://xiontechnologies.in/images/cat_1.png';

<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v5.1.0.min.js"></script>
<div id="container"></div>