Run a circle through the points of a quadric curve with JavaScript and Canvas

Question

I want to run a circle through every point of a quadric curve because I'm making a circle-throw game. This is an example code of my problem:

canvas.width = 200;
canvas.height = 200;
ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.moveTo(20,20);
ctx.quadraticCurveTo(20,200,200,200);
ctx.stroke();
ctx.closePath();
ctx.beginPath();
ctx.fillStyle = "orange";
ctx.arc(20,20,20,Math.PI*2,0);
ctx.fill();
function loop(){
  //Code to move circle through the quadric curve
  //???
  //???
  ctx.beginPath();
  ctx.fillStyle = "orange";
  ctx.arc(20,20,20,Math.PI*2,0);
  ctx.fill();
  requestAnimationFrame(loop);
}

*{
  margin: 0;
  padding: 0;
}

   <canvas id="canvas"></canvas> Run that circle through the curve

How can I solve this?
Sorry for my English and thanks for the answers!

Hi, I found this tutorial that seems similar to what you want: http://www.html5code.nl/canvas-tutorial/tutorial-canvas-animation-movement-along-bezier-curve/ — Saar, Sep 19 '15 at 09:34

Rodrigo5244 · Answer 1 · 2015-09-20T03:44:09.147

You need to code the parametric formula for the quadratic curve given below to get the points of the curve.

quadratic Bezier formula

This formula gives the points of the curve in terms of three other points and t.

The first point is where the path begins before the call to quadraticCurveTo, the other two points are the points passed to quadraticCurveTo.

You change the value of t to get different points of the curve, when t is 0 you get the first point and when t is 1 you get the last point, values between 0 and 1 are going to give you points in the middle of the curve.

You can also get the points of the curve by drawing the curve using quadraticCurveTo and check the colours of the pixels with getImageData.

Run a circle through the points of a quadric curve with JavaScript and Canvas

1 Answers1