title: A simple program to display a rolling ball
body: <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;script type="text/javascript"&gt;
  var canvas_variable;
  var init_x = 200;
  var init_y = 300;
  var x_move = 1;
  function initialize_canvas()
  {setInterval(draw_ball, 10);
   canvas_variable = bouncing_ball_canvas.getContext('2d');
    }
    function draw_ball()
     {
     canvas_variable.clearRect(0,0, 1000, 500);
     canvas_variable.beginPath();
     canvas_variable.fillStyle="#FF0000";
     canvas_variable.arc(init_x, init_y, 50, 0+init_x/50, Math.PI*2+init_x/50, true);
     canvas_variable.lineTo(init_x, init_y);
     canvas_variable.stroke();
     if( init_x&lt;0 || init_x&gt;1000) x_move = -x_move;
     init_x += x_move;
     }
    &lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
    &lt;canvas id="bouncing_ball_canvas" width="1000" height="500"&gt;
    &lt;/canvas&gt;
    &lt;body onLoad="initialize_canvas();"&gt;
    &lt;/body&gt;
    &lt;/html&gt;
  </code></pre>
  
  <p>This is a program of a rolling ball. The function draw_ball is called after every 10 milliseconds.The ball blinks during its motion. What is the solution for this problem? </p>