title: How to do animation in Javascript?
body: <p>
  Hi guys,</p>
  
  <p>My assignment requires me to draw faces using JavaScript and then press buttons to change the face on the canvas. It also requires me to do an animation between the faces. I looked around and noticed that I need to use requestAnimationFrame but don't understand how to do also. Also, how do I do it in such a way that the code is not messy? Thanks in advance guys.</p>
  
  
  
  <pre><code>        //Neutral/Smiling Face
          context.beginPath();
              context.fillStyle = "rgb(255,255,0)" //Drawing the face in yellow colour
              context.lineWidth = 3;
              context.arc(300,300,200,0,Math.PI*4,true);
              context.fill();
          context.stroke();
          //Left Eyebrow
          context.save();
          context.translate(240,180);
          context.rotate(20*Math.PI/180);
          context.beginPath();
              context.fillStyle = "rgb(0,0,0)";
              context.rect(-45,-8,90,16);
              context.fill();
              context.restore();
          context.stroke();
          //Right Eyebrow
          context.save();
          context.translate(360,180)
          context.rotate(-20*Math.PI/180);
          context.beginPath();
              context.fillStyle = "rgb(0,0,0)";
              context.rect(-45,-8,90,16);
              context.fill();
              context.restore();
          context.stroke();
          //Black Pupils of the Eyes
          context.beginPath();
              context.fillStyle = "rgb(0,0,0)";
              context.moveTo(255,250); //LeftEye
              context.arc(220,250,40,0,Math.PI*4,true);
              context.moveTo(415,250);//RightEye
              context.arc(380,250,40,0,Math.PI*4,true);
              context.fill();
          context.stroke();
          //White Inner Eyes
          context.beginPath();
              context.fillStyle = "rgb(255,255,255)";
                  context.moveTo(240,250); //LeftPupil
                  context.arc(220,250,15,0,Math.PI*4,true);
                  context.moveTo(400,250);//RightPupil
                  context.arc(380,250,15,0,Math.PI*4,true);
              context.fill();
          context.stroke();
          //Nose
          context.beginPath();
          context.fillStyle = "rgb(0,0,0)";
              context.moveTo(300,275);
              context.lineTo(275,325);
              context.lineTo(325,325);
          context.fill();
          context.closePath();
          context.stroke();
          //Mouth
          context.beginPath();
              context.fillStyle = "rgb(0,0,0)";
              context.lineWidth = 1;
              context.moveTo(300,350);
              context.arc(300,350,100,0,Math.PI,false);
              context.fill();
          context.stroke();
  
  
          function sadFace() {
          //Drawing the sad face
          context.beginPath();
              context.fillStyle = "rgb(255,255,0)" //Drawing the face in yellow colour
              context.lineWidth = 3;
              context.arc(300,300,200,0,Math.PI*4,true);
              context.fill();
          context.stroke();
          //Left Eyebrow
          context.save();
          context.translate(200,180);
          context.rotate(-20*Math.PI/180);
          context.beginPath();
              context.fillStyle = "rgb(0,0,0)";
              context.rect(-45,-8,90,16);
              context.fill();
              context.restore();
          context.stroke();
          //Right Eyebrow
          context.save();
          context.translate(400,180)
          context.rotate(20*Math.PI/180);
          context.beginPath();
              context.fillStyle = "rgb(0,0,0)";
              context.rect(-45,-8,90,16);
              context.fill();
              context.restore();
          context.stroke();
          //Black Pupils of the Eyes
          context.beginPath();
              context.fillStyle = "rgb(0,0,0)";
              context.moveTo(255,250); //LeftEye
              context.arc(220,250,40,0,Math.PI*4,true);
              context.moveTo(415,250);//RightEye
              context.arc(380,250,40,0,Math.PI*4,true);
              context.fill();
          context.stroke();
          //White Inner Eyes
          context.beginPath();
              context.fillStyle = "rgb(255,255,255)";
              context.moveTo(240,250); //LeftPupil
              context.arc(220,250,15,0,Math.PI*4,true);
              context.moveTo(400,250);//RightPupil
              context.arc(380,250,15,0,Math.PI*4,true);
              context.fill();
          context.stroke();
          //Nose
          context.beginPath();
          context.fillStyle = "rgb(0,0,0)";
              context.moveTo(300,275);
              context.lineTo(275,325);
              context.lineTo(325,325);
          context.fill();
          context.closePath();
          context.stroke();
          //Mouth
          context.beginPath();
              context.fillStyle = "rgb(0,0,0)";
              context.lineWidth = 1;
              context.moveTo(305,427);
              context.arc(305,427,80,0,Math.PI,true);
              context.fill();
          context.stroke();
          }
  
  
          var angryButton = document.getElementById("angryFace");
          var sadButton = document.getElementById("sadFace");
          var surprisedButton = document.getElementById("surprisedFace");
          var neutralButton = document.getElementById("neutralFace");
  
          sadButton.addEventListener("click", sadFace);
          angryButton.addEventListener("click", angryFace);
          surprisedButton.addEventListener("click", surprisedFace);
          neutralButton.addEventListener("click", neutralFace);
  </code></pre>