Q:

Animating an emoticon to wink with animation in HTML5 canvas

I am attempting to animate an emoticon that was previously drawn in canvas. I am attempting to do a draw and clear using frames following a tutorial but am not getting results. I have 6 frames of the emoticon coded and am unsure how to include this within the code. This is what I have so far:
<!DOCTYPE html>
<html>

<head>
  <title>Adding Animation</title>
<style>
  canvas {
    border: 3px #CCC solid;
  }
</style>
</head>

<body>
  <div id="container">
    <canvas id="myCanvas" height="1200" width="900"></canvas>
  </div>
  <script>
     var mainCanvas = document.querySelector("#myCanvas");
     var mainContext = mainCanvas.getContext("2d");

var canvasWidth = mainCanvas.width;
var canvasHeight = mainCanvas.height;

function drawCircle() {
    mainContext.clearRect(0, 0, canvasWidth, canvasHeight);

    // color in the background
    mainContext.fillStyle = "#EEEEEE";
    mainContext.fillRect(0, 0, canvasWidth, canvasHeight);

    // draw the circle
        ctx.beginPath(); 
        ctx.strokeStyle = "000000";
        ctx.lineWidth = 5;
        ctx.fillStyle = "yellow";
        ctx.arc(600, 450, 150, 0, Math.PI * 2, true);
        ctx.stroke();
        ctx.closePath();
        ctx.fill();

        //The smile
        ctx.beginPath();
        ctxstrokeStyle = "black";
        ctx.lineWidth = 2;
        ctx.arc(600, 475, 75, .1 * Math.PI, Math.PI * .9, false)
        ctx.stroke();
        ctx.closePath();

        //The eyes
        //Left
        ctx.save();
        ctx.scale(0.65, 1);
        ctx.beginPath();
        ctx.arc(850, 405, 40, 0 * Math.PI, Math.PI * 2, false);
        ctx.fillStyle="black";
        ctx.fill();
        ctx.stroke();
        ctx.closePath();
        ctx.restore();

        //Right
        ctx.save();
        ctx.scale(0.65, 1);
        ctx.beginPath();
        ctx.arc(1000,405,40, 0*Math.PI, Math.PI*2, false);
        ctx.fillStyle="black";
        ctx.fill();
        ctx.stroke();
        ctx.closePath();
        ctx.restore()
  }
drawCircle();
</script>
</body>
</html>

I am unsure if I am even on the right track as I have a difficult time with animation. Does anyone have any suggestions they can give me guidance on?

A:

You have 2 names for the context: mainContext & ctx.
Change it to a single name and your face is "smiley" ! :-)
 ... 
To animate: 
Use a requestAnimationFrame loop to change the scaleY value in scale(scaleX,scaleY) over time.
Here's annotated code and a Demo:

var mainCanvas = document.querySelector("#myCanvas");
var ctx = mainCanvas.getContext("2d");

var canvasWidth = mainCanvas.width;
var canvasHeight = mainCanvas.height;

ctx.translate(-425,-275);

drawCircle(1);

// global var to hold pct the left eye is open
// 1==fully open, 0==fully closed
var scaley=1;
var direction=-1;
// request 1 animate() loop 
requestAnimationFrame(animate);
function animate(time){
  // draw smiley with the specified eye openness
  drawCircle(scaley);
  scaley+=.02*direction;
  if(scaley<0){
    scaley=0;
    direction=1;
  }
  if(scaley>1){
    scaley=1;
    direction=-1;
  }
  requestAnimationFrame(animate);
}


function drawCircle(scaleY) {
  ctx.clearRect(0, 0, canvasWidth, canvasHeight);

  // color in the background
  ctx.fillStyle = "#EEEEEE";
  ctx.fillRect(0, 0, canvasWidth, canvasHeight);

  // draw the circle
  ctx.beginPath(); 
  ctx.strokeStyle = "000000";
  ctx.lineWidth = 5;
  ctx.fillStyle = "yellow";
  ctx.arc(600, 450, 150, 0, Math.PI * 2, true);
  ctx.stroke();
  ctx.closePath();
  ctx.fill();

  //The smile
  ctx.beginPath();
  ctxstrokeStyle = "black";
  ctx.lineWidth = 2;
  ctx.arc(600, 475, 75, .1 * Math.PI, Math.PI * .9, false)
  ctx.stroke();

  //The eyes
  //Left
  ctx.save();
  // move the [0,0] origin to the left eye's centerpoint
  ctx.translate(550,405);
  // close the left eye by the specified scaleY
  ctx.scale(0.65, scaleY);
  ctx.beginPath();
  // draw the left eye (arc) at 0,0 because
  // we translated the origin to [550,405] earlier
  ctx.arc(0, 0, 40, 0 * Math.PI, Math.PI * 2, false);
  ctx.fillStyle="black";
  ctx.fill();
  ctx.stroke();
  ctx.closePath();
  ctx.restore();

  //Right
  ctx.save();
  ctx.scale(0.65, 1);
  ctx.beginPath();
  ctx.arc(1000,405,40, 0*Math.PI, Math.PI*2, false);
  ctx.fillStyle="black";
  ctx.fill();
  ctx.stroke();
  ctx.closePath();
  ctx.restore()
}
<canvas id="myCanvas" height="1200" width="900"></canvas>

