var canvas, ctx;

// Try other values!

var numberOfSegments = 60;

// Length of each segment of the snake

var segLength = 7;

​

// Arrays of w,y positions of each coordinate system 

// one for each segment

// Trick to create arrays filled with zero values

var x = Array.apply(null, Array(numberOfSegments)).map(Number.prototype.valueOf,0);

​

var y = Array.apply(null, Array(numberOfSegments)).map(Number.prototype.valueOf,0);var mousePos;

​

​

​

function init() {

  canvas = document.getElementById("myCanvas");

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

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

    mousePos = getMousePos(canvas, evt);

  }, false);

  // starts animation

  requestAnimationFrame(animate);

}

​

function getMousePos(canvas, evt) {

   // necessary to take into account CSS boundaries

   var rect = canvas.getBoundingClientRect();

   return {

      x: evt.clientX - rect.left,

      y: evt.clientY - rect.top

   };

}

​

function animate() {

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

  // ADD A NICE BACKGROUND HERE?

  ctx.fillStyle="black";

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

  ctx.strokeStyle="dotted";

  ctx.font = "14pt Calibri";

ctx.fillStyle = "white";

ctx.fillText("My little astronaut spider! A real sleuth…", 10, 390);

​

  // draw the snake, only when the mouse entered at

  // least once the canvas surface

  if(mousePos !== undefined) {

     drawSnake(mousePos.x, mousePos.y);

  }

  // DRAW EXTRA THINGS HERE?

​

  requestAnimationFrame(animate);

}

​

function drawSnake(posX, posY) {

      // DRAW BETTER HEAD HERE?

  ctx.beginPath();

​

                // Add to the path a full circle (from 0 to 2PI)

                ctx.arc(posX, posY, 25, 0, 2*Math.PI, false);

​

                // With path drawing you can change the context

                // properties until a call to stroke() or fill() is performed

                ctx.fillStyle = "white";

                // Draws the filled circle in light blue

                ctx.fill();

  ctx.beginPath();

  ctx.arc(posX+7, posY+7, 10, 0, 2*Math.PI, false);

  ctx.fillStyle = "black";

                ctx.fill();

 //EYEBRUSH

  ctx.beginPath();

// we ommited the last parameter

ctx.arc(posX+1, posY+1, 20, 150, Math.PI/0.5, false);

ctx.lineWidth = 3;

  ctx.strokeStyle = "black";

ctx.stroke();

  //HELMET

  ctx.beginPath();

ctx.arc(posX, posY, 50, 0, 2*Math.PI, false);

   ctx.fillStyle = grd = ctx.createRadialGradient(posX, posY, 0, 100, 5, 50);

   grd.addColorStop(0, "white");

​

   grd.addColorStop(0.27, "black");

   grd.addColorStop(0.366, "white");

   grd.addColorStop(1, "black");

ctx.fill();

ctx.lineWidth = 1;

  ctx.strokeStyle = "white";

ctx.stroke();

      dragSegment(0, posX - 5, posY - 5);

      for(var i=0; i < x.length-1; i++) {

         dragSegment(i+1, x[i], y[i]);

      }  

      // DRAW BETTER TAIL HERE ?

       //HOW CAN I KNOW THOSE COORDINATES?

}

​

function dragSegment(i,  xin,  yin) {

   dx = xin - x[i];

   dy = yin - y[i];

   angle = Math.atan2(dy, dx);

   x[i] = xin - Math.cos(angle) * segLength;

   y[i] = yin - Math.sin(angle) * segLength;

  ctx.save();

  ctx.translate(x[i], y[i]);

  ctx.rotate(angle);

  var segColor;

  // Generate funny colors, CHANGE THIS IF YOU LIKE

  if (i % 3 == 1)

    segColor = "rgba(0, 0, 0, 0.5)";

  else if (i % 3 == 2)

    segColor = "rgba(255, 0, 0, 0.7)";

  else

    segColor = "rgba(255, 255, 255, 255)";

​

  drawLine(0, 0, segLength, 0, segColor, 30);

  ctx.restore();

}

​

function drawLine(x1, y1, x2, y2, color, width) {

  ctx.save();

  ctx.lineCap = "round";

  ctx.strokeStyle = color;

  ctx.lineWidth = width;

  ctx.beginPath();

  ctx.moveTo(x1, y1);

  ctx.lineTo(x2, y2);

  ctx.stroke();

  ctx.restore();

}