var canvas, ctx, mousePos = {x:0, y:0};

var angle = 0;

// pos du monstre

var x=0, y=0;

var speed = 1;

​

function init() {

  canvas = document.getElementById("myCanvas");

  ctx = canvas.getContext('2d');

  // mouse listener

   canvas.addEventListener('mousemove', function (evt) {

        mousePos = getMousePos(canvas, evt);     

   }, false); 

  canvas.addEventListener('mousedown', function (evt) { 

    speed = 10;

  });

   canvas.addEventListener('mouseup', function (evt) { 

    speed = 1;

  });

  animate();

}

​

function animate() {

  // 1 clear screen

   ctx.clearRect(0, 0, canvas.width, canvas.height);

  // 2 move monster in the direction of the mouse,

  // advance by speed pixels

    var dx = x - mousePos.x;

    var dy = y - mousePos.y;

    var angle = Math.atan2(dy, dx);

    // some basic trigonometry

    x -= speed*Math.cos(angle);   

    y -= speed*Math.sin(angle); 

    // pos and scale, angle

    drawMonster(x, y, 0.5, 0.5, angle+Math.PI/2);

​

    requestAnimationFrame(animate);

}

​

​

function drawMonster(x, y, sx, sy, angle) {

  ctx.save();

​

  // Move the monster to x, y, center and rotate the coordinate system

  ctx.translate(x, y);

  ctx.rotate(angle);

  ctx.scale(sx, sy);

  // This one is for repositionning the coordinate system at 

  // the center of the rectangle instead of top left corner

  ctx.translate(-250, -250);

​

  drawHead();

  drawEyes();

  drawMouth();

  ctx.restore();

}

​

function drawHead() {

  // always save context at the beginning of a drawing function

  ctx.save();

   ctx.shadowColor = "#bbbbbb";

    ctx.shadowBlur = 5;

    ctx.shadowOffsetX = 15;

    ctx.shadowOffsetY = 15;

​

  ctx.lineWidth = 10;

  ctx.strokeStyle = "red";

  ctx.beginPath();

  ctx.arc(250, 250, 200, 0, 2*Math.PI);

  ctx.stroke();

  // restore context at the end

  ctx.restore();

}

​

function drawEyes() {

   ctx.save();

  // black rectangles

  ctx.save();

   ctx.shadowColor = "#bbbbbb";

    ctx.shadowBlur = 5;

    ctx.shadowOffsetX = 15;

    ctx.shadowOffsetY = 15;

  ctx.fillRect(100, 140, 100, 100);

   ctx.fillRect(250, 140, 100, 100);

ctx.restore();  

  ctx.fillStyle = "yellow";

  // yellow circles

  ctx.beginPath();

  ctx.arc(130, 210, 25, 0, 2*Math.PI);

  ctx.arc(280, 210, 25, 0, 2*Math.PI);

  ctx.fill();

  // small black circles

  ctx.beginPath();

  ctx.fillStyle = "black";

  ctx.arc(130, 220, 10, 0, 2*Math.PI);

  ctx.arc(280, 220, 10, 0, 2*Math.PI);

  ctx.fill();

  ctx.beginPath();

  ctx.restore();

}

​

function drawMouth() {

  ctx.save();

   ctx.shadowColor = "#bbbbbb";

    ctx.shadowBlur = 5;

    ctx.shadowOffsetX = 15;

    ctx.shadowOffsetY = 15;

  ctx.lineWidth=10;

  ctx.beginPath();

  ctx.moveTo(160, 340);

  ctx.lineTo(310, 330);

  ctx.stroke();

  // left tooth

  ctx.beginPath();

  ctx.moveTo(170, 340);

  ctx.lineTo(190, 370);

  ctx.lineTo(210, 335);

  // right tooth

  ctx.moveTo(300, 330);

  ctx.lineTo(290,363);

  ctx.lineTo(265, 335);

  ctx.fill();

  ctx.restore();

​

}

​

 function getMousePos(canvas, evt) {

            // get canvas position

            var obj = canvas;

            var top = 0;

            var left = 0;

            while (obj && obj.tagName != 'BODY') {

                top += obj.offsetTop;

                left += obj.offsetLeft;

                obj = obj.offsetParent;

            }

​

            // return relative mouse position

            var mouseX = evt.clientX - left + window.pageXOffset;

            var mouseY = evt.clientY - top + window.pageYOffset;

            return {

                x:mouseX,

                y:mouseY

            };

        }