HTML5 canvas line - how can I let them appear smoother? -

i want make lines have sharp edges, e.g. if use line write word. in photoshop can use brushes less sharp or can take high resolution , zoom out. there nice trick html5 canvas lines, too?

        canvas.addeventlistener('mousemove', function(e) {         this.style.cursor = 'pointer';         if(this.down) {              with(ctx) {                 beginpath();                 moveto(this.x, this.y);                 lineto(e.pagex , e.pagey );                 strokestyle = red;                 ctx.linewidth=1;                 stroke();              }              this.x = e.pagex ;              this.y = e.pagey ;         }     }, 0); 

as you’ve discovered, when let user draw polyline mousemove end list of points draws jagged line.

what need is:

• reduce number of points
• keep resulting path true user’s intended shape.

so want go "before" "after":

the ramer-douglas-peucker polygon simplification algorithm

you can using ramer-douglas-peucker (rdp) polygon simplification algorithm. reduces “jaggedness” of polyline while keeping essence of intended path.

here overview of how rdp works , it’s capable of achieving: http://ianqvist.blogspot.com/2010/05/ramer-douglas-peucker-polygon.html

and here javascript implimentation of rdp algorithm matthew taylor: https://gist.github.com/rhyolight/2846020

in matthew’s implimentation “epsilon” number indicating how closely want true original “jaggedness”.