Smoothing a Jagged Path

Smooth jagged lines drawn by user in HTML5 canvas app?

Here's an example of a quick way using quadratic curves and 'round' lineJoin:

http://jsfiddle.net/NWBV4/10/

How to Draw a Smoother Path

Try using

g2.setStroke(new BasicStroke(50, BasicStroke.CAP_ROUND, BasicStroke.JOIN_ROUND));

instead of g2.setStroke(new BasicStroke(50));

css transform, jagged edges in chrome

In case anyone's searching for this later on, a nice trick to get rid of those jagged edges on CSS transformations in Chrome is to add the CSS property -webkit-backface-visibility with a value of hidden. In my own tests, this has completely smoothed them out. Hope that helps.

-webkit-backface-visibility: hidden;

---

Related Topics