Drawing Good Looking (like In Flash) Lines On Canvas (html5) - Possible?

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 w

Solution 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.

Solution 2:

Leeching off Marius's answer:

<?xml version="1.0" standalone="no"?><!DOCTYPE svgPUBLIC"-//W3C//DTD SVG 1.1//EN""http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svgwidth="100%"height="100%"version="1.1"xmlns="http://www.w3.org/2000/svg"><rectwidth="100"height="50"y="37"style="fill:none;stroke-width:1;
stroke:rgb(0,0,0)"/><rectwidth="100"height="50"x="200"style="fill:none;stroke-width:1;
   stroke:rgb(0,0,0)"/><linex1="50"y1="67"x2="250"y2="25"style="stroke:rgb(0,0,255);stroke-width:2"/><textx="2"y="50" >Beta</text><textx="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.

Solution 3:

I doubt you are going to find anything that will make it look truly good that isn't too slow to be useful. One thing that you can try that won't hurt performance too much is to draw 4 lines overlaid on one another, each offset by a fraction of a pixel in x and y. The downside is it will look a bit blurry.