Untitled

<!doctype html>
<html>
  <head>
    <title>something</title>
        <script>
           var x=20, y=20, r=10;
           var ySpeed=1, yAcceleration=1;
           var t, g;

           function begin(){
             t=document.getElementById("canvas");
             g=t.getContext("2d");
           }
           function draw(){
                 g.clearRect(0, 0, t.width, t.height);
                 g.strokeStyle="red";
                 g.fillRect(x, y, r, r);
           }
           function move(){
		   	 ySpeed+=yAcceleration;
             y+=ySpeed;
             draw();
           }
		   function Start(){
		   ySpeed=document.getElementById('speed').value;
		   yAcceleration=document.getElementById('acceleration').value;
		   setInterval("move", 50);
		   }
        </script>
  </head>
  <body onload="begin()">
      <canvas id="canvas" width="300" height="500" style="background-color:yellow"></canvas><br />

		Speed:<br /><input type="text" id="speed" value="1"/><br />
		Acceleration:<br /><input type="text" id="acceleration" value="1"/><br />
		<input type="button" value="Start it" onclick="Start()"/>
  </body>
</html>