title: Stop canvas flicker on re-render
body: <p>I have written a jQuery plugin that will render four polygons onto a <code>canvas</code> and fill them with an image.</p>
  
  <p>When you mouse over a <code>polygon</code> it is moved to a separate top layer and re-rendered so it expands and then contracts if you mouse out.  </p>
  
  <p>Is there any way to do this so that it doesn't flicker?</p>
  
  <p>I've had a look a <a href="https://stackoverflow.com/questions/2795269/does-html5-canvas-support-double-buffering">this question</a> but don't quite understand what the accepted answer is doing (I know it draws the image on a seperate layer but I don't know how it checks if this has finished rendering before using it) or how to include it in <a href="http://jsfiddle.net/peteng/KAkvX/7/" rel="nofollow noreferrer">my jsfiddle code</a></p>