Search code examples
javascriptkineticjs

in kinetic js fill element(shape) with image

I am making different shapes inside canvas using Kinetic js. I inserted image into shape but not able to resize image inside shape. User will give input x,y,height and width of image. Then image of given size will be inserted into shape.

I can not insert images here because of less reputation. You will understand my question easily by viewing js fiidle

Here is my code sample

$(img).load(function() {
    blueCircle.fillPatternImage(img);
    blueCircle.fillPatternOffset({x:100, y:105});
    layer.draw();
});
img.src = "";
img.src = "http://www.fusemobile.com.au/wp-content/uploads/2011/11/mobile-social-network-300x225.jpg";
Solution

  • You can use fillPatternScale(scale) to scale the image, for example:

    $(img).load(function() {
    blueCircle.fillPatternImage(img);
    blueCircle.fillPatternOffset({x:150, y:105});
    blueCircle.fillPatternScale({ x: 0.4, y: 0.4 });
    layer.draw();
});

    JS Fiddle