Drawing GOOD LOOKING (like in Flash) lines on canvas (HTML5) - possible?

Question

Is there any way to draw a line using javascript and the canvas with "better" antialiasing, like Flash does?

I know the Math.floor(coord)+0.5 trick to get an exactly 1 pixel line when you need it, but that's not what I mean. The following blue lines drawed using canvas look _ugly in all browsers supporting html5 and cavas, so they are probably using the same bad antialiasing algorithm (probably coded for speed, not for the best visual impression). It's the same no matter what the line width is (actually the thicker, the uglier):

1px blue lines screenshot crop:

and 3px:

As you can see, this is not the most beautiful way to draw good antialiased lines, and only the lower line looks good. The client is demanding that the graph manipulation app I work on must "look good" and is very demanding from the aesthetics pov and I will probably ditch the HTML5/Canvas solution and go the Flash way if I can't solve this problem. Or maybe I could code a good antialiased lines drawing algorith in javascript (can anyone give me some resources for that?) Sorry for not adding a picture with lines drawn in Flash, but the point is that they just look good, the antialiasing is done right.

Answer 1

Instead of using the 2D drawing API, you can use the SVG vector elements. You would have to implement your own api to do it, but that way you will get beautiful lines, like those in flash. The SVG-edit is an example of what you can do with SVN in browser.

Answer 2

Leeching off Marius's answer:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
   "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="100%" height="100%" version="1.1"
      xmlns="http://www.w3.org/2000/svg">

<rect width="100" height="50" y="37"
style="fill:none;stroke-width:1;
stroke:rgb(0,0,0)"/>

<rect width="100" height="50" x="200"
   style="fill:none;stroke-width:1;
   stroke:rgb(0,0,0)"/>

<line x1="50" y1="67" x2="250" y2="25"
   style="stroke:rgb(0,0,255);stroke-width:2"/>

<text x="2" y="50" >Beta</text>
<text x="201" y="13" >Omega</text>

</svg>

SVG can be drawn client side with javascript, since it's just DOM elements. And, going forward, it is hardware accelerated.