title: Clearing a Polygon on mouseout
body: <p>I have the following to draw a polygon on a canvas when the mouseover event fires:</p>
  
  <pre><code>      $(document).ready(function() {
  
          $('#flam').mouseover(function() {
  
          context.fillStyle = '#f00';
          context.beginPath();
          context.moveTo(98,265);
          context.lineTo(197,240);
          context.lineTo(197,235);
          context.lineTo(227,220);
          context.lineTo(242,220);
          context.lineTo(245,209);
          context.lineTo(252,208);
          context.lineTo(252,200);
          context.lineTo(274,179);
          context.lineTo(277,179);
          context.lineTo(290,166);
          context.lineTo(191,72);
          context.lineTo(164,97);
          context.lineTo(166,112);
          context.lineTo(94,129);
          context.lineTo(105,170);
          context.lineTo(72,177);
          context.closePath();
          context.fill();
  
              $('#flam').mouseout(function() {
                 //What do I need to do here to clear this on mouseout
  
              ;})
          ;})
  </code></pre>
  
  <p>Or is there another more efficient way to do this </p>