title: Create a polygon around a line
body: <p>I have a line represented as an array of X,Y coordinates.  I am displaying this on screen via a HTML5 canvas and want to provide user interactions.  To this end I need to see if a users mouse is on the line to provide visual feedback and allow them to move it etc.</p>
  
  <p>The line is displayed as a "line" with stroke giving it a thickness so just checking that the mouse is "on" the line wouldn't work very well as it would be hard for the user to be exactly over the line.</p>
  
  <p>For this reason I want to create a polygon around the line (essentially adding padding).  This would mean a user didnt have to be directly on the line, just very close to it.  I would then use this polygon for hit-tests.</p>
  
  <p>How do I go about turning a list of points (my line) into a polygon that represents that line with padding? (say 10px).</p>
  
  <pre><code>points: [
      { x: -200, y: 150 },
      { x: -100, y: 50 },
      { x: 100, y: 50 },
      { x: 200, y: 150 }
  ]
  </code></pre>