title: Showing image inside hexagon with html5 and kineticjs
body: <p>I want to draw a hexagon and show an image inside that using html5.
  I have tried it out but I am not getting image as the result.
  I want to use <a href="http://kineticjs.com/" rel="nofollow">kineticjs</a> only for this.</p>
  
  <p>Here is the code:</p>
  
  <pre><code>function hexagon(){
      var stage = new Kinetic.Stage({
        container: "container"
      });
  
      var layer = new Kinetic.Layer();
  
      var hexagon = new Kinetic.RegularPolygon({
        x: 100,
        y: 100,
        sides: 6,
        radius: 100,
        fill: {image: "css/images/logo.png"},
  
        stroke: "royalblue",
        strokeWidth: 2
      });
  
      // add the shape to the layer
      layer.add(hexagon);
     // add the layer to the stage
      stage.add(layer);
  }
  </code></pre>