Q:

Adding controls to manipulate Animation in Javascript Canvas

I am learning to work with Html5 Canvas. How can I add two buttons that will decrease or increase the speed of the animated square in the canvas? I am a beginner at programming so I am trying to keep it simple. 
<!DOCTYPE HTML>
<html>
  <head>
    <style>
      body {
      margin: 0px;
      padding: 0px;
      }
     </style>
  </head>
  <body>
  <canvas id="ex1" width="525" height="200" style = "border: 5px solid black;"</canvas>
  <script>

    var x =  0;
    var y = 15;
    var speed = 10;

    function animate() {

    reqAnimFrame = window.mozRequestAnimationFrame    ||
            window.webkitRequestAnimationFrame ||
            window.msRequestAnimationFrame     ||
            window.oRequestAnimationFrame
            ;

    reqAnimFrame(animate);

    x += speed;

    if(x <= 0 || x >= 475)
      {
       speed = -speed;
       }

    draw();
   }

function draw() {
var canvas  = document.getElementById("ex1");
var context = canvas.getContext("2d");

context.clearRect(0, 0, 600, 170);
context.fillStyle = "#ff00ff";
context.fillRect(x, y, 40, 40);
}

animate();
 </script>
 <p></p>
 <audio controls>
  <source src="fortworth.ogg" type="audio/ogg">
  <source src="fortworth.mp3" type="audio/mpeg">
   Your browser does not support the audio element.
 </audio>

</body>
</html>

A:

You can add 2 button in html like this:
<input type="button" value="+" id="btnAdd">

and in javascript, bind the button to the click event like this:
document.getElementById('btnAdd').addEventListener('click', function(event) {
//Here you do your logic
speed++;
});

You do the same thing for the speed--;
Edit: Working FIDDLE

