Making custom shapes with image fill Kineticjs

Question

I am working on a project using Kinetic.js. I am using the current version. I want to draw a custom shape and fill that custom shape with an image pattern. Can someone please tell me that can be done?

Answer 1

See the KineticJS tutorials:

Draw a Custom Shape: http://www.html5canvastutorials.com/kineticjs/html5-canvas-kineticjs-shape-tutorial/

Fill Shape with Image Pattern: http://www.html5canvastutorials.com/kineticjs/html5-canvas-set-fill-with-kineticjs/

var imageObj = new Image();
imageObj.onload = function() {
  drawImage(this);
};
imageObj.src = 'http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg';

var custom_shape_triangle = new Kinetic.Shape({
  drawFunc: function(canvas) {
    var context = canvas.getContext();
    context.beginPath();
    context.moveTo(200, 50);
    context.lineTo(420, 80);
    context.quadraticCurveTo(300, 100, 260, 170);
    context.closePath();
    canvas.fillStroke(this);
  },
  fillPatternImage: imageObj,
  stroke: 'black',
  strokeWidth: 4
});

The fillPatternImage property is what you are looking for, there are also many other options available to fillPattern, see the KineticJS docs for more: http://kineticjs.com/docs/Kinetic.Shape.html