CODEWITHSUNDEEP
htmlcanvasline
vuvu
vuvu

Reputation: 5328

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

I want to make lines but they have sharp edges, e.g. if you use the line to write a word. In Photoshop you can use brushes that are less sharp or you can take a high resolution and zoom out. Is there a nice trick for 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);

Upvotes: 1

Views: 707

Answers (1)

markE
markE

Reputation: 105015

As you’ve discovered, when you let the user draw a polyline with mousemove you end up with a list of points that draws a very jagged line.

What you need to do is:

  • Reduce the number of points
  • Keep the resulting path true to the user’s intended shape.

So you want to go from "before" to "after":

enter image description here

The Ramer-Douglas-Peucker Polygon Simplification Algorithm

You can do this by using the Ramer-Douglas-Peucker (RDP) Polygon Simplification Algorithm. It reduces the “jaggedness” of a polyline while keeping the essence of the intended path.

Here is an overview of how RDP works and what it’s capable of achieving: http://ianqvist.blogspot.com/2010/05/ramer-douglas-peucker-polygon.html

And here is a javascript implimentation of the RDP algorithm thanks to Matthew Taylor: https://gist.github.com/rhyolight/2846020

In Matthew’s implimentation “epsilon” is a number indicating how closely you want to be true to the original “jaggedness”.

Upvotes: 1

Related Questions