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:

alt text

and 3px:

alt text

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.

You know that people hear SHOUTING when you use all caps, right? Use judicious amounts of bold and italics where necessary, but ALL CAPS is just a turn-off. Ugly, you might say. — T.J. Crowder
FWIW, from your drawing, I wonder if you really want to be using Canvas at all. It looks like vectors might be more appropriate. RaphaelJS seems to provide lovely-looking lines via SVG and VML on Firefox 3.0+, Safari 3.0+, Chrome 5.0+, Opera 9.5+ and Internet Explorer 6.0+. That's a good set of rendering engines supported there. You could then use a canvas (overlaid in the z-order) where/when/if you really need a bitmap. — T.J. Crowder
thanks! I'm looking into RaphaelJS right now to see if it fits my app and it's acceptable performance-wise... — NeuronQ
@T.J. Crowder: Figure out how to add bolding or italics to a stackoverflow title - then you can criticize — Ian Boyd
@Ian Boyd: The version of the question I commented on was using the all caps in the text. As for titles: Maybe there's a reason that emphasis isn't allowed? And using ALL CAPS isn't the answer? — T.J. Crowder

Ian Boyd Ian Boyd · Accepted Answer · 2010-11-14T22:04:23

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>

alt text

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

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

3 Answers