title: JavaScript canvas draw circle one by one using function
body: <p>My goal is to detect where does my function crosses first the Axes X on the negative side. For that, I check from all the range at first, then I divide by two in one of the sides, depending the result.
  I'd like to draw 1 by 1 all my circles. First time i got something like this:</p>
  
  <p><a href="https://i.stack.imgur.com/p0AWN.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/p0AWN.png" alt="enter image description here"></a></p>
  
  <p>and then i searched and tried this : </p>
  
  <pre><code>window.requestAnimationFrame(drawDicho(a,b));
  </code></pre>
  
  <p>And i thought it would draw each circle individually. But instead, it only draws the circle on coordinates (0,0). If i click again, it draws on it again.</p>
  
  <p><a href="https://i.stack.imgur.com/YsLwK.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/YsLwK.png" alt="enter image description here"></a></p>
  
  <p>¨</p>
  
  <p>I've tried window.setInterval(...) but nothing happened as well.</p>
  
  <p>I can recover the correct value, but I'd like to show the circles one by one and not all at the same time.
  Does anyone have an idea ? Maybe I'm placing the code in the wrong place, i don't know..</p>
  
  <p>@UPDATE FULL CODE:</p>
  
  <pre><code>    &lt;script type="text/javascript"&gt;
        window.onload = function(){
          var canvas = $('myCanvas');
          if(!canvas){
            alert("Impossible to recover canvas");
            return;
          }
  
          var context = canvas.getContext('2d');
          if(!context){
            alert("Impossible dto recover canvas context");
            return;
          }
  
          context.fillStyle = 'rgba(255, 255, 255, 1)';
          context.fillRect(0, 0, 500, 500);
          context.strokeStyle = 'rgba(0, 0, 0, 1)';
  
          var width = canvas.width;
          var height = canvas.height;
  
          //draw axis Y
          context.beginPath();
          context.moveTo(width/2, 0);
          context.lineTo(width/2, height);
          context.closePath();
          context.stroke();
  
          //draw axis X
          context.beginPath();
          context.moveTo(0, height/2);
          context.lineTo(width, height/2);
          context.closePath();
          context.stroke();
  
  
        }
  
  
        function function1(x){
          return Math.sin(x)-(x/13);
        }
  
        function function2(x){
          return x/(1-Math.pow(x, 2));
        }
  
        function draw(func){
          var canvas = $('myCanvas');
          var context = canvas.getContext('2d');
          var dx = canvas.width;
          var dy = canvas.height;
          var scale = dx/40; // echelle (nb pixels between x=0 et x=1)
          var x0 = dx/2;
          var y0 = dy/2;
          var iMax = 20;
          var x, y;
          var iMin = -20;
              context.translate(x0,y0);
        context.scale(1, -1);
              context.strokeStyle = 'rgba(255, 0, 0, 1)';
        context.beginPath();
        context.arc(-100, 0, 5, 0, 2*Math.PI, false);
        context.arc(100, 0, 5, 0, 2*Math.PI, false);
  
        for(i = -100; i&lt;=100; i=i+0.01){
                  x=i*4;
                  y = scale * func(x/scale);
          context.lineTo(x, y);
  
            }
            context.closePath();
            context.stroke();
        }
  
        function drawF1(){
          draw(function1);
        }
  
        function drawF2(){
          draw(function2);
        }
  
        function drawDicho(a, b){
          var canvas = $('myCanvas');
          var context = canvas.getContext('2d');
          context.beginPath();
          context.arc(a, 0, 5, 0, 2*Math.PI, false);
          context.arc(b, 0, 5, 0, 2*Math.PI, false);
          context.closePath();
          context.stroke();
        }
  
        function dichotomie(func){
          var a = -100;
          var b = 100;
          var fa = func(a);
          var fb = func(b);
          var delta = 0.01;
  
          while(Math.abs(b-a) &gt; delta){
          //drawDicho(a,b);
            var m = (a+b)/2;
            var fm = func(m);
            if(fm * fa &lt;= 0){
              b = m;
              fb = fm;
            }
            else{
              a = m;
              fa = fm;
            }
            window.requestAnimationFrame(drawDicho(a,b));
          }
          if(fa * fb &lt;= 0){
            return m.toFixed(3);
  
          }
          else{
            return 'no 0';
          }
  
        }
  
        function $(id){
          return document.getElementById(id);
        }
  
        function solvef1()
        {
          var result = dichotomie(function1);
          alert(result);
        }
  
        function solvef2(){
          var result = dichotomie(function2);
          alert(result);
        }
  
      &lt;/script&gt;
  &lt;/head&gt;
  &lt;body style="background-color:grey"&gt;
    &lt;p&gt;
      &lt;label&gt;draw fonction: &lt;/label&gt;
      &lt;input type="button" name="function1" value="fonction 1" id="drawF1" onclick="drawF1()"&gt;
      &lt;input type="button" name="function2" value="fonction 2" id="drawF2" onclick="drawF2()"&gt;
      &lt;input type="button" name="solvef1" value="solvef1" id="solvef1" onclick="solvef1()"&gt;
      &lt;input type="button" name="solvef2" value="solvef2" id="solvef2" onclick="solvef2()"&gt;
    &lt;/p&gt;
      &lt;br&gt;
      &lt;canvas id="myCanvas" width="500" height="500"&gt;
        Message bla bla bla
      &lt;/canvas&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p></p>
  
  <p>(the <code>dichotomie</code> function which calc and draw circles is used when i click on button "solve f1")</p>
  
  <p>Thank you.</p>