Why does each of these splines start at its ending point?

Question

For PC: https://code.sololearn.com/W8O208gFgpW7/#html
For Mobile: https://code.sololearn.com/W8O208gFgpW7/?ref=app

We have to build a cubic hermite spline running through some given data points (x, y) on a canvas element. In the end the splines should give a smooth continous curve. At the moment these demand is not given, because strangely a spline starts and ends at the same y-value.

We have four properties given for our splines
1. +2.) A spline hast to start at the point where its previous spline ends and it has to end at the point where the next spline starts.
3. + 4.) The gradient at the starting and ending point are created with the position of the previous and next data point.

We thought about two different ways to solve this problem:
At firs we did not know about numeric functions in Javascript, so we decided to solve our linear system build with the four conditions analytically on an paper by ourselves. (This means, we calculated equations for our coefficients a, b, c, d). By this way we got the spline shown in our code. Unfortunately there is this big mistake, that the spline starts at the point where it ends and not in the ending point of its previous spline. Of course we can not be completely sure, that our equations are right, but we checked it several times by different persons.
So it could also be a problem in our code instead of the mathematics.
Maybe there is somebody, who realises a mistake.

The second way was, that we read about a numeric function to solve a matrix. We downloaded the library numeric.-1.2.6.js from "http://www.numericjs.com/" and tried to import it, to use the function "solve". But since we are all bloody beginners in JS, we were not able to import it correctly. (We tried it with "require", "import", "import from" or copy the text out of the file.) Every time we got a message in our console: "solve is not defined". Does anybody know, what we have to write in our code or what we could install?

It would be very nice and helpful if somebody has an idea.

Answer 1

you could try to use SVG instead of the canvas, style and the javascript codes