title: HTML5 Canvas vs. SVG vs. div
body: <p>What is the best approach for creating elements on the fly and being able to move them around? For example, let's say I want to create a rectangle, circle and polygon and then select those objects and move them around.</p>
  
  <p>I understand that HTML5 provides three elements that can make this possible: <a href="http://www.w3.org/TR/2014/REC-html5-20141028/embedded-content-0.html#svg" rel="noreferrer">svg</a>, <a href="http://www.w3.org/TR/2014/REC-html5-20141028/scripting-1.html#the-canvas-element" rel="noreferrer">canvas</a> and <a href="http://www.w3.org/TR/2014/REC-html5-20141028/grouping-content.html#the-div-element" rel="noreferrer">div</a>. For what I want to do, which one of those elements will provide the best performance?</p>
  
  <p>To compare these approaches, I was thinking of creating three visually identical web pages that each have a header, footer, widget and text content in them. The widget in the first page would be created entirely with the <code>canvas</code> element, the second entirely with the <code>svg</code> element, and the third with the plain <code>div</code> element, HTML and CSS.</p>