BUG: A Kinetic.Image that has both a crop and filter does not draw correctly

Try the following snippet (you should see a grayscale cat, but nothing is displayed).

This pull request should fix it, but might need code review.

```html
<!DOCTYPE HTML>
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
    	#container {
			background-color:dimgray;
    	}
    </style>
  </head>
  <body>
    <div id="container"></div>
    <script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.5.4.min.js"></script>
    <script defer="defer">
    	var stage = new Kinetic.Stage({
    		container: 'container',
    		width: 800,
    		height: 600
    	});

    	var layer = new Kinetic.Layer();

    	var imageObj = new Image();
    	imageObj.crossOrigin = "";

    	imageObj.onload = function () {
    		var yoda = new Kinetic.Image({
    			image: imageObj,
    			width: 320,
    			height: 480,
				crop: {x:160, y:0, width:320, height:480},
				filter: Kinetic.Filters.Grayscale
    		});

    		layer.add(yoda);

    		stage.add(layer);
    	};
    	imageObj.src = 'http://lorempixel.com/output/cats-q-c-640-480-5.jpg';

    </script>
  </body>
</html>

```