title: KineticJS: Image does not have a Stroke after applying a Filter
body: <p>Using KineticJS 5.1.0</p>
  
  <p>I have a KineticJS image with a stroke. To this image I want to apply a filter. After caching and applying the filter the stroke has gone.</p>
  
  <p><a href="http://jsfiddle.net/confile/qgrjjjq9/" rel="nofollow noreferrer">Here is a JSFiddle</a> and my demo code:</p>
  
  <pre><code>var imageObj = new Image();
        imageObj.onload = function() {
          var stage = new Kinetic.Stage({
            container: 'container',
            width: 600,
            height: 700
          });
          var layer = new Kinetic.Layer();
          img = new Kinetic.Image({
            x: 250,
            y: 200,
            image: imageObj,
            draggable: true
          });
          var strokeWidthValue = 10;
          img.setOffsetX(img.getWidth() / 2); 
          img.setOffsetY(img.getHeight() / 2); 
          img.stroke("green");  
          img.strokeWidth(strokeWidthValue);
          img.strokeScaleEnabled(false);  
          img.strokeEnabled(true);  
  
          layer.add(img);
          stage.add(layer);
  
          img.cache();
          img.filters([Kinetic.Filters.Invert]);
          layer.draw();
        };
         imageObj.crossOrigin = "anonymous";
        imageObj.src =
    "https://dl.dropboxusercontent.com/u/47067729/darth-vader.jpg";
  </code></pre>
  
  <p>Here is the image before I apply the filter: </p>
  
  <p><img src="https://i.stack.imgur.com/FZ1ql.jpg" alt="enter image description here"></p>
  
  <p>And here after I apply the filter:</p>
  
  <p><img src="https://i.stack.imgur.com/DZOfx.jpg" alt="enter image description here">      </p>
  
  <p><strong>How do I get the stroke back after applying the filter?</strong></p>
  
  <p>Edit: I also tried to add extra space for the border but the result shows a pink border, where my one should be green. Here is the cache function I tried: </p>
  
  <pre><code>    img.cache({
          x: -(img.getWidth() / 2) - strokeWidthValue,
          y: -(img.getHeight() / 2) - strokeWidthValue,
          width: img.getWidth() + (strokeWidthValue * 2),
          height: img.getHeight() + (strokeWidthValue * 2)
      });
  </code></pre>
  
  <p>here is the result:</p>
  
  <p><img src="https://i.stack.imgur.com/yuUR8.jpg" alt="enter image description here"></p>
  
  <p>The complete example can be found in <a href="http://jsfiddle.net/confile/o73ur6pf/" rel="nofollow noreferrer">this JSFiddle</a>.</p>