html5 canvas animation does not work properly

Question

All the javascript is in style.js - http://html5canvas.hoangminhdat.com

You can see that the blue line appears when the page load and quickly disappear after a certain amount of time. I've spent hours and, have done everything I can to debug it but nothing I change fixed it.

This is what I did:

1. I use global variables to create the red line.

2. I get rid of the global variables and create a class (Circle). I store the objects in an array (circles) and use those objects' properties instead of the variables.

3. I successfully apply for the first element of the "circles" array (circles[0]). I added circles[1]. And the blue line actually appears in the canvas for roughly 1 second, and then it disappears...

I can't find any mistake in my code. Since the circles[0] works, and the circles[1] works for a little while when the page load. I believe that my code is fully functioning.

Well, I hope someone can help me.

Answer 1

You have some error in your loop

 //use the position to make dots for (var i in points[j]) { ... } 

It is throwing lots of errors.

I haven't gone into detail, but it is looking for some extra item in the array. You can see your example working here with this change

 //use the position to make dots var numPoints = points[j].length-1, i; for (i = 0;i<numPoints;i++) { 

Maybe you can go from there to identify what was exactly wrong in all your code...