title: Applying rounded corners to paths/polygons
body: <p>I'm gathering some info for a project that has to start within a few weeks.
  This project contains a browser-based drawing tool where users can add predefined shapes or forming shapes themselves. Shapes must be selectable, freely scalable and rotatable with a Illustrator-like transformtool (handles).
  Predefined shapes that we have in mind are: rectangles, ellipses, half ellipses and (isosceles) triangles.</p>
  
  <p>So far so good, to achieve this I was thinking of RaphaelJS or FabricJS but... Every shape (polygon/path) must be drawn with a certain cornerradius. And the cornerradius must be maintained while scaling, so no distortion occurs. The user can specify the rounding by input.</p>
  
  <p>There's a few obstacles/questions:</p>
  
  <ul>
  <li>Is there some uniform mathemetical formula to apply a cornerradius to the shapes I mentioned? Or must every shape be treated as a mini-project itself? I want to return it as a path or poly, so it can be drawn with SVG or canvas.</li>
  <li>Every scale or rotate operation, by dragging the transformhandles, will result in (massive) calculations to retrieve an updated shape I think. Rectangles are the easiest to achieve and except ellipses, all the other shapes will be a lot harder to compute. Is there some way to speed up the process?</li>
  </ul>
  
  <p>I found a site where users can draw flowcharts and apply a cornerradius on almost all shapes the are offered. It works so smoothly, I can't nail how they did it.
  Link: <a href="https://www.lucidchart.com/">https://www.lucidchart.com/</a> (try button)</p>
  
  <p>For now, I'm a bit clueless, I guess to mediocre in mathematics. Perhaps someone can push me in the right direction and share some experiences?</p>
  
  <p>Thanks in advance.</p>
  
  <p>BTW. Performance is key in this project. The ouput of the drawing must be SVG format.</p>