Javascript floating point is getting complicated



I got inspiration from the “Animating Many Things on a Canvas” tutorial of this website and wanted to create a canvas animation of similar sorts but which looks like a single line tracing the path of the fibonacci arc.

This is the actual code i used-

function drawCircle() {
    //mainContext.clearRect(0, 0, canvasWidth, canvasHeight);
    // color in the background
    mainContext.fillStyle = "#EEEEEE";
    mainContext.fillRect(0, 0, canvasWidth, canvasHeight);
    // draw the circle
    xPos += radius*Math.cos(angle);
    yPos += radius*Math.sin(angle);
    mainContext.arc(xPos, yPos, 2, 0, Math.PI*2, true);
    // color in the circle
    mainContext.fillStyle = "#006699";
    angle += Math.PI/128;
    //console.log(angle % (Math.PI/2) === 0);
    if(angle % (Math.PI/2) === 0){  // This is where i am having a problem
      radius = 2 * radius;

i actually got this code by manipulating the code from ‘Creating a Simple HTML5 Canvas Animation’ tutorial… I am extremely grateful to you for that!
This code tries to multiply the radius(of the Fibonacci arc) by 2 everytime the angle becomes a multiple of Math.PI/2 but since everything is a floating point in JS that if statement always returns false and the radius remains the same. Hence instead of a fibonacci arc i just got this -

Is there any way to handle floating point manipulation.
I tried Math.floor() but that rounds off to the nearest integer and it will not be useful for this animation.
Is there any simple way to handle this? Please help.


remove the Math.PI and multiply by 2

angle += 1/64
if (Number.isInteger(angle))


You can also consider rounding your numbers to whatever level of precision you want: :slight_smile:


thanks for the quick reply.
will implement this and get back


Wow missed this tutorial.
will check this out.
thanks for the quick reply