title: Drawing shapes and lines with HTML5 Canvas and jQuery
body: <p>I have an upcoming project that I would like to use the HTML5 canvas element to accomplish what would have had to be done in the past with either images and absolutely paced div's or Flash. Here is a basic example of the concept </p>
  
  <p><img src="https://i.stack.imgur.com/SVPO9.jpg" alt="enter image description here"></p>
  
  <p>Here are my concerns:</p>
  
  <ol>
  <li>I am ok with using div's with corner radius to create the circles as they will be styled, and I'm not sure if I can do that with a mix of svg and the canvas element.</li>
  <li>My main concern is the stroke that joins the outer circles to the inner, I would like to do this with canvas but am not sure A) How to get multiple canvas elements on one page in one containing element (a wrapper div) and B) how to figure out the starting points, I would assume the ending point would just be the center of the wrapper div (IE if its 600x600 = x=300, y=300) </li>
  </ol>
  
  <p>Can anyone shed some light on this and offer any suggestions? Is there an advantage to using any of the jQuery canvas plugiins over vanilla JS?</p>
  
  <p>thank you!</p>