How to draw a fraction of a bezier curve with canvas?

user_962155 0
Viewed 176

Let's say I have a bezier curve produced from the following code:

const ctx = document.querySelector('canvas').getContext('2d');

ctx.beginPath();
ctx.moveTo(50, 20);
ctx.quadraticCurveTo(230, 30, 50, 100);
ctx.stroke();
<canvas></canvas>

Is there a way to only draw, say, the last 90% of it?

For my application I want to "consume" the curve, and create an animation where a circle moves along the line path, eating the curve along the way.

The only thing I could think of was to instead of drawing the curve using the quadraticCurveTo function, to instead calculate a huge list of points manually through the following function:

t = 0.5; // given example value
x = (1 - t) * (1 - t) * p[0].x + 2 * (1 - t) * t * p[1].x + t * t * p[2].x;
y = (1 - t) * (1 - t) * p[0].y + 2 * (1 - t) * t * p[1].y + t * t * p[2].y;

And then just do moveTo and lineTo for each of the 300 or so points.

But that has three issues:

  1. It is computationally expensive
  2. How do you determine how many points to calculate?
  3. Won't it still be jagged unless you calculate thousands of points?

Is there a better way?

spline html5-canvas bezier canvas javascript
1 Answers

You can use ctx.setLineDash([]) with ctx.lineDashOffset, that's the common way to simulate partial drawing of paths.

const ctx = document.querySelector('canvas').getContext('2d');

animate();

function animate(){
    let i = 0;
    
    drawCurve(i);
    
    function drawCurve(start){
        ctx.clearRect(0,0,300,150); // initial width and height of canvas

        const line_len = 204; // to let the last part of curve stay

        ctx.setLineDash([1000]); // bigger than curve length    
        ctx.lineDashOffset = -start; // changing parameter
        
        ctx.beginPath();
        ctx.moveTo(50, 20);
        ctx.quadraticCurveTo(230, 30, 50, 100);
        ctx.stroke();
        
        const anim_id = requestAnimationFrame(() => drawCurve(++start));
        if(start > line_len) cancelAnimationFrame(anim_id);
    }
}
<canvas></canvas>

It can be tricky to get length of the path in canvas. So I prefer to calculate it using hidden SVG. The <path> of it has empty d attribute. So I can assign our path string to it and getTotalLength() of it. Now we have length of your path and we can use those data to define setLineDash array properly, so the path_len (where to stop).

Also we can get the current position of path start by using path.getPointAtLength() method.

animate();

function animate(){
    
    const path = document.querySelector('svg > path');
    const path_string = 'M 50 20 Q 230 30 50 100';
    path.setAttribute('d', path_string);

    const path_len = path.getTotalLength();

    const ctx = document.querySelector('canvas').getContext('2d');
    
    drawCurve(0);
    
    function drawCurve(start){
        ctx.clearRect(0,0,300,150); // initial width and height of canvas
        
        ctx.save();
        ctx.setLineDash([path_len + 1]); // bigger than curve length    
        ctx.lineDashOffset = -start; // changing parameter
        
        ctx.stroke(new Path2D(path_string));
        ctx.restore();
        
        const cur_pos = path.getPointAtLength(start - 7); // current position - (radius + 2)

        ctx.beginPath();
        ctx.arc(cur_pos.x, cur_pos.y, 5, 0, 2*Math.PI, false); // radius = 5 (should be a constant)
        ctx.fill();
        
        const anim_id = requestAnimationFrame(() => drawCurve(++start));
        if(start > path_len) cancelAnimationFrame(anim_id);
    }
}
<svg style="display:none">
    <path d=""></path>
</svg>
<canvas></canvas>

user_126563880
Related