title: Javascript won't draw the animation taking value from HTML input element
body: <p>I wanted to create physics simulation with dropping ball. To have more fun I wanted to give to user an access to input his values of dropping ball radius and count. If you would run this code on browser, you could click button 'CREATE' to display animation with default values and it would have worked. When I enter balls count in html input element, it recognises the count and executes the code and the animation appears. When I enter radius value in html input element, nothing appears on canvas. I find this as very strange problem. I've already tried renaming variables and element id names. When I  I would appreciate if anyone could help.</p>
  
  <p>The html file called index.html</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const canvas = document.getElementById('ball-platform');
  const createBtn = document.getElementById('createAnimation');
  const W = canvas.width;
  const H = canvas.height;
  const ctx = canvas.getContext('2d');
  const gravity = 0.15;
  const friction = 0.9;
  let balls = [];
  
  function FillCircle(x0, y0, bRadius, theColor) {
    let circle = {
      x: x0,
      y: y0,
      color: theColor
    };
    let xVel = 5,
      yVel = 1;
    this.movement = () =&gt; {
      if (Math.round(circle.x + bRadius + xVel) &gt; W || Math.round(circle.x - bRadius + xVel) &lt; 0) {
        xVel = -xVel * friction;
        yVel *= friction;
      } else if (Math.round(circle.y + bRadius + yVel) &gt; H) {
        yVel = -yVel * friction;
        xVel *= friction;
      } else {
        yVel += gravity;
      }
      circle.x += xVel;
      circle.y += yVel;
    }
    this.draw = () =&gt; {
      ctx.beginPath();
      ctx.fillStyle = circle.color;
      ctx.ellipse(circle.x, circle.y, bRadius, bRadius, -90 * Math.PI / 180, 360 * Math.PI / 180, false);
      ctx.fill();
      ctx.stroke();
    }
  }
  
  createBtn.addEventListener('mousedown', () =&gt; {
    balls = [];
    let bRadius = document.getElementById('bRadius').value;
    let count = document.getElementById('count').value;
    if (bRadius == "" || bRadius &lt;= 0) {
      bRadius = 5;
    }
    if (count == "" || count &lt; 0) {
      count = 5;
    }
    initialize(count, bRadius);
  });
  
  
  function initialize(count, bRadius) {
    for (let i = 0; i &lt; count; i++) {
      let xpos = (Math.random() * (W - bRadius - 10)) + bRadius;
      let ypos = (Math.random() * (H - bRadius - 10)) + bRadius;
      balls.push(new FillCircle(xpos, ypos, bRadius, 'red'));
    }
  }
  
  function animation() {
    requestAnimationFrame(animation);
    ctx.clearRect(0, 0, W, H);
    for (let a = 0; a &lt; balls.length; a++) {
      let circle = balls[a];
      circle.movement();
      circle.draw();
    }
  }
  animation();</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;nav style='display: block;'&gt;
    &lt;button id='createAnimation'&gt;CREATE&lt;/button&gt;
    &lt;input placeholder='Radius' , id='bRadius'&gt;
    &lt;input placeholder='Count' id='count'&gt;
  &lt;/nav&gt;
  
  &lt;canvas id="ball-platform" width="500" height="500" style="border: 1px solid black"&gt;&lt;/canvas&gt;</code></pre>
  </div>
  </div>
  </p>