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:
Is there a better way?
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>