How to apply pattern on transparent layer in kineticjs?

1
2
3

var transparentLayer = new Kinetic.Layer({
  opacity: 0.5
});

1
2
3
4
5
6
7
8

var patternImage = new Image();
patternImage.onload = function() {
  var pattern = new Kinetic.Pattern({
    image: patternImage,
    repeat: 'repeat'
  });
};
patternImage.src = 'path_to_your_pattern_image.png';

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

var shape = new Kinetic.Rect({
  x: 0,
  y: 0,
  width: stage.width(),
  height: stage.height(),
  fillPatternImage: pattern,
  fillPatternX: 0,
  fillPatternY: 0
});

transparentLayer.add(shape);

1
2

stage.add(transparentLayer);
stage.draw();