title: Drawing lines with continuously varying line width on HTML canvas
body: <p>I'm trying to draw a line that starts as a thin line and then gadually widens until the end. I need to draw semi-smooth curves (composite out of several straight lines) and I'm having problems finding a way to solve this task.</p>
  
  <p>This fiddle shows my problem:</p>
  
  <p><a href="http://jsfiddle.net/ZvuQG/1/">http://jsfiddle.net/ZvuQG/1/</a></p>
  
  <p>When you call stroke(), the currently set lineWidth is used to stroke the entire line. My first thought was to draw each line piece individually, but of course, this leaves noticeable gaps in the line at the corners.</p>
  
  <p>What is my best option here? Should I resort to drawing polygons (trapezoids) to get the corners right? </p>
  
  <p>Is there an easier way?</p>
  
  <p>(Edit: Note that I am not trying to actually draw ellipses or any other basic shapes; I'm trying to plot mathematical functions, using line thickness to represent velocity)</p>