title: HTML 5 - add Shape on mouseover
body: <p>I use KineticJS to create shape and animate them.</p>
  
  <p>I have a triangle :</p>
  
  <pre><code>var triangle1Over = new Kinetic.Polygon({
      points: [120, 10, 225, 140, 15, 140, 120, 10],
      stroke: 'red',
      strokeWidth: 2
  });
  </code></pre>
  
  <p>I would like to make it appears <strong>one time</strong> on mouseover event.</p>
  
  <pre><code>triangle1.on('mouseover', function () {
      layer.add(triangle1Over);
      layer.draw();
  });
  </code></pre>
  
  <p><strong>The issue :</strong> on every cursor move in triangle1, the shape triangle1Over is added > this is bad because it's blinking.</p>
  
  <p>I try to find something: "if the shape hasn't already been added to the layer, add it". But nothing.</p>
  
  <p>Any help would be great. Thanks :)</p>