var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

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


var angle = 0;

var requestAnimationFrame = window.requestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.msRequestAnimationFrame;

function drawBG(){
    ctx.beginPath();
    ctx.moveTo(30,75);
    ctx.lineTo(100,25);
    ctx.lineTo(100,75);
    ctx.fillStyle = 'rgb(255,100,0)';
    ctx.fill();
    ctx.closePath();

    ctx.beginPath();
    ctx.moveTo(100,25);
    ctx.lineTo(175,75);
    ctx.lineTo(100,75);
    ctx.closePath();
    ctx.fillStyle = 'rgb(255,120,0)';
    ctx.fill();

    ctx.beginPath();
    ctx.arc(100,75,40,0,Math.PI, false);
    ctx.closePath();
    ctx.fillStyle = 'rgb(255,190,0)';
    ctx.fill();

    ctx.beginPath();
    ctx.arc(100,75,50,0,Math.PI, false);
    ctx.stroke();
    ctx.closePath();


    ctx.beginPath();
    ctx.moveTo(95,110);
    ctx.lineTo(105,110);
    ctx.lineTo(100,145);
    ctx.fillStyle = "black";
    ctx.fill();

    ctx.beginPath();
    ctx.arc(80,85,5,0,Math.PI, true);
    ctx.stroke();
    ctx.closePath();

    ctx.beginPath();
    ctx.arc(120,85,5,0,Math.PI, true);
    ctx.stroke();
    ctx.closePath();
    requestAnimationFrame(drawBG);
}
var mouthHeight=6,mouthWidth=6;

function drawCircle(){
    ctx.beginPath();
    var radius = 3 +Math.abs(Math.cos(angle));
    ctx.arc(100, 100, radius, 0, Math.PI * 2, false);
    ctx.closePath();

    ctx.fillStyle = "red";
    ctx.fill();

    angle +=2*Math.PI/180;
    if(angle>180)
        angle=-180;

    requestAnimationFrame(drawCircle);
}

drawBG(); drawCircle();

// var mouth = document.getElementById('mouth');
// var ctx = mouth.getContext('2d');



drawCircle();