SOURCE

window.onload = drawSmileyFace;
function drawSmileyFace() {
  var canvas = document.getElementById("smiley");
  var context = canvas.getContext("2d");
  context.beginPath();
  context.arc(300, 300, 200, 0, degreesToRadius(360), true);
  context.fillStyle = "#ffffcc";
  context.fill();
  context.stroke();

  context.beginPath();
  context.arc(200, 250, 25, 0, degreesToRadius(360), true);
  context.stroke();
  context.beginPath();
  context.arc(400, 250, 25, 0, degreesToRadius(360), true);
  context.stroke();
  context.beginPath();
  context.moveTo(300, 300);
  context.lineTo(300, 350);
  context.stroke();
  
  context.beginPath();
  context.arc(300, 350, 75, degreesToRadius(20), degreesToRadius(180-20), false);
  context.stroke();
}

function degreesToRadius(degrees) {
  return degrees / 180 * Math.PI;
}

<canvas id="smiley" width="600" height="600" style="border: 1px solid;display: blotck;">
  Hey you, yes you, upgrade your browser!
</canvas>