title: Canvas Avoid jagged edges
body: <p>Good day with all:</p>
  
  <p>I'm building an application for a dentist. I've used illustrator to draw the odontogram and export it with a well known plugin. The result was awesome. Then I start to explore the code generated by the plugin (about 3000 lines).</p>
  
  <p>This is a portion of the code generated by the plugin</p>
  
  <pre><code>ctx.save();
  ctx.beginPath();
  ctx.moveTo(67.9, 113.9);
  ctx.bezierCurveTo(67.9, 113.9, 69.9, 89.8, 67.9, 78.8);
  ctx.bezierCurveTo(65.9, 67.8, 61.1, 58.8, 58.9, 55.4);
  ctx.bezierCurveTo(56.7, 52.0, 54.3, 50.4, 53.6, 49.8);
  ctx.bezierCurveTo(52.9, 49.2, 51.1, 48.2, 50.7, 49.8);
  ctx.bezierCurveTo(50.3, 51.4, 50.7, 54.8, 50.7, 54.8);
  ctx.bezierCurveTo(50.7, 54.8, 47.7, 54.0, 47.5, 55.2);
  ctx.bezierCurveTo(47.3, 56.4, 47.1, 57.6, 47.5, 65.6);
  ctx.bezierCurveTo(47.9, 73.6, 48.0, 81.4, 47.3, 86.4);
  ctx.bezierCurveTo(46.5, 91.4, 42.6, 102.5, 42.6, 102.5);
  ctx.lineTo(41.3, 108.1);
  ctx.lineTo(47.7, 111.3);
  ctx.lineTo(55.0, 113.9);
  ctx.lineTo(61.9, 113.9);
  ctx.lineTo(67.1, 113.9);
  gradient = ctx.createLinearGradient(63.4, 65.4, 53.9, 97.3);
  gradient.addColorStop(0.00, "rgb(255, 255, 255)");
  gradient.addColorStop(1.00, "rgb(172, 171, 148)");
  ctx.fillStyle = gradient;
  ctx.fill();
  </code></pre>
  
  <p><a href="http://jsfiddle.net/Artynok/qL79Y/4/" rel="nofollow">http://jsfiddle.net/Artynok/qL79Y/4/</a></p>
  
  <p>My idea was to colour every tooth as DB stored data was coming with the pertinent information (sick => red, healed => blue, external treatment => purple). I made a JSON obj to store all the coordinates of the gradients from this entire code, using some php code i could obtain all the gradient data (the ctx.createLinearGradient and RadialGradient ones).</p>
  
  <p>After many tries to affect the code before the draw was made, I decidd to write the storing operation on my JSON, while the draw is happening. So when canvas ends to draw a part of the tooth, I grab the gradient coordinates, go for my OBJ that comes with the color states and match with it:</p>
  
  <p><a href="http://jsfiddle.net/Artynok/qL79Y/3/" rel="nofollow">http://jsfiddle.net/Artynok/qL79Y/3/</a></p>
  
  <p>Until here everything is ok except because the graph get the gradient but with jagged lines. I know that I'm redrawing over the tooth, even if the tooth have clinical state or not, because if I don't command to paint in the normal color, the rest of the teeth start to get the last color I've used.</p>
  
  <p>So is there a way to "erase" the old Gradient to place the new one or change the color instead to redraw over it?</p>