title: Kineticjs - Fixed fill pattern of shape being rotated
body: <p>I use <a href="http://kineticjs.com" rel="nofollow">kineticjs</a> to work with shapes and transitions. For now I have made next code example: </p>
  
  <p><a href="http://jsfiddle.net/z6LaH/2/" rel="nofollow">http://jsfiddle.net/z6LaH/2/</a></p>
  
  <pre><code>hexagon = new Kinetic.RegularPolygon({
      x: stage.getWidth() / 2,
      y: stage.getHeight() / 2,
      sides: 6,
      radius: hexRadius,
      cornerRadius: 0,
      fillPatternImage: img,
      fillPatternOffset: [150, -150],
      //fill: 'white',
      stroke: 'black',
      strokeWidth: 0
  });
  
  hexagon.on('mouseover touchstart', function() {
      this.transitionTo({
          cornerRadius: transRadius,
          rotation: Math.PI / 2,
          scale: {x: 0.75, y: 0.75},
          easing: 'ease-in',
          duration: duration,
  
          callback: function() {
              hexagon.transitionTo({
                  scale: {x: 1.1, y: 1.1},
                  duration: duration * 7,
                  easing: 'elastic-ease-out'
              });
          }
      });
  });
  </code></pre>
  
  <p>As you can see, fill pattern is rotating with shape. I need it to be fixed. So my question is: </p>
  
  <p><strong>Is it posible to make fixed fill pattern, while shape is rotating, and how?</strong></p>
  
  <hr>
  
  <p>UPDATE:</p>
  
  <p>I got next approach: rotate fill pattern in opposite direction.</p>
  
  <p><a href="http://jsfiddle.net/z6LaH/3/" rel="nofollow">http://jsfiddle.net/z6LaH/3/</a></p>
  
  <p>Is there any more elegant way to do the same?</p>