# Javascript floating point is getting complicated

**URL:** <https://forum.kirupa.com/t/javascript-floating-point-is-getting-complicated/637655>\
**Category:** programming\
**Created:** [December 23, 2017, 4:37pm UTC](https://forum.kirupa.com/t/javascript-floating-point-is-getting-complicated/637655 "2017-12-23T16:37:13Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![preethamRaja](https://avatars.discourse-cdn.com/v4/letter/p/8c91f0/32.png) [@preethamRaja](https://forum.kirupa.com/u/preethamRaja)\
**Post date:** [December 23, 2017, 4:37pm UTC](https://forum.kirupa.com/t/javascript-floating-point-is-getting-complicated/637655/1 "2017-12-23T16:37:13Z")

</div>

Hello,

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
    //mainContext.beginPath();  
    xPos += radius*Math.cos(angle);
    yPos += radius*Math.sin(angle);
  
    mainContext.arc(xPos, yPos, 2, 0, Math.PI*2, true);
    mainContext.closePath();
     
    // color in the circle
    mainContext.fillStyle = "#006699";
    mainContext.fill();
  
    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;
      console.log(radius);
    }
    
  
    requestAnimationFrame(drawCircle);
}
drawCircle();

```

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 -

> **[EoymmG](https://codepen.io/thamRaja/pen/EoymmG?editors=0010)**
>
> ...

  
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.

---

<div class="post-metadata">

**Author:** ![flvegat](https://avatars.discourse-cdn.com/v4/letter/f/bbe5ce/32.png) [@flvegat](https://forum.kirupa.com/u/flvegat)\
**Post date:** [December 25, 2017, 2:36pm UTC](https://forum.kirupa.com/t/javascript-floating-point-is-getting-complicated/637655/2 "2017-12-25T14:36:06Z")

</div>

remove the Math.PI and multiply by 2

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

```

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [December 26, 2017, 3:25am UTC](https://forum.kirupa.com/t/javascript-floating-point-is-getting-complicated/637655/3 "2017-12-26T03:25:05Z")

</div>

You can also consider rounding your numbers to whatever level of precision you want: [https://www.kirupa.com/html5/rounding\_numbers\_in\_javascript.htm](https://www.kirupa.com/html5/rounding_numbers_in_javascript.htm) 🙂

---

<div class="post-metadata">

**Author:** ![preethamRaja](https://avatars.discourse-cdn.com/v4/letter/p/8c91f0/32.png) [@preethamRaja](https://forum.kirupa.com/u/preethamRaja)\
**Post date:** [December 26, 2017, 11:44am UTC](https://forum.kirupa.com/t/javascript-floating-point-is-getting-complicated/637655/4 "2017-12-26T11:44:10Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![preethamRaja](https://avatars.discourse-cdn.com/v4/letter/p/8c91f0/32.png) [@preethamRaja](https://forum.kirupa.com/u/preethamRaja)\
**Post date:** [December 26, 2017, 11:44am UTC](https://forum.kirupa.com/t/javascript-floating-point-is-getting-complicated/637655/5 "2017-12-26T11:44:43Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![flvegat](https://avatars.discourse-cdn.com/v4/letter/f/bbe5ce/32.png) [@flvegat](https://forum.kirupa.com/u/flvegat)\
**Post date:** [May 31, 2018, 4:06am UTC](https://forum.kirupa.com/t/javascript-floating-point-is-getting-complicated/637655/6 "2018-05-31T04:06:55Z")

</div>

catches up a little with Python]([https://developers.google.com/web/updates/2018/05/bigint](https://developers.google.com/web/updates/2018/05/bigint))

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [May 31, 2018, 5:16pm UTC](https://forum.kirupa.com/t/javascript-floating-point-is-getting-complicated/637655/7 "2018-05-31T17:16:20Z")

</div>

Indeed! It is surprising to see how long it took JavaScript to get this far on this area 😛

---

<div class="post-metadata">

**Author:** ![flvegat](https://avatars.discourse-cdn.com/v4/letter/f/bbe5ce/32.png) [@flvegat](https://forum.kirupa.com/u/flvegat)\
**Post date:** [May 31, 2018, 7:11pm UTC](https://forum.kirupa.com/t/javascript-floating-point-is-getting-complicated/637655/8 "2018-05-31T19:11:06Z")

</div>

Python automatically makes all integers as big as they need to be, JavaScript couldn’t go that route and stay compatible with older versions.