1

I'm using the algorithm posted by the author of the question in the below thread to draw an N point bezier curve defined by some array of points.

how to draw smooth curve through N points using javascript HTML5 canvas?

Here's a fiddle of the project: http://jsfiddle.net/lee2808/2YVx4/

If you copy and paste that into a js file and replace "AddImage.png" in the Curve's Ctor call on line 15 with an image file, all should work fine! You need to click on the canvas three times for the curve to begin to draw.

I'm dynamically adding points on a mousedown + mouseup event.

Anyway my implementation half works (if that's a thing lol). Once I have placed the first 3 points on the canvas a bezier is drawn as expected. However when I add further points the start point for the next curve is not at the end point of the previous curve.

It seems it's starting from the previous point.

Anyway here's my implementation :

Curve.prototype.drawCurve = function(pContext){
    pContext.save();
    if(this.getPoints().length >2){

        pContext.moveTo(this.getPoints()[0].getX(),this.getPoints()[0].getY());
        var i = 1;
        for(i; i < this.getPoints().length-2; i++){

            var modX = (this.getPoints()[i].getX() + this.getPoints()[i+1].getX()) /2;
            var modY = (this.getPoints()[i].getY() + this.getPoints()[i+1].getY()) /2;
            pContext.quadraticCurveTo(this.getPoints()[i].getX(), this.getPoints()[i].getY(),modX,modY);

        }

        if(this.getPoints().length > 2){

            pContext.quadraticCurveTo(this.getPoints()[i].getX(),this.getPoints()[i].getY(), //last control point
                                        this.getPoints()[i+1].getX(),this.getPoints()[i+1].getY());//end point
        }

        pContext.stroke();
    }
    pContext.restore();
};

Pretty much identical. Can anyone see the flaw in my logic? I'm trying to produce a chain of bezier curves so that I can then animate an object to follow that path incase anyones interested as to why I want to do this.

Thanks in advance!

Community
  • 1
  • 1
Lee Brindley
  • 6,242
  • 5
  • 41
  • 62

0 Answers0