var canvas, context;

var color = ['#bab86c', '#45161c', 'red', 'black', '#4c5866', '#00a550', 'purple'];

var i = 0;

var j = 0;



function mrBlack() {

  if (i < 1) {

  color = ['black', 'black', 'black', 'black', 'black', 'black', 'black'];

  human();

  } else {

    color = ['black', 'black', 'black', 'black', 'black', 'black', 'black'];

  human();

    alert("You can't return back! Now you are blackman...");

  }  

  i++;

}



function returnColor() {

  if (j == 0) {

    color = ['#bab86c', '#45161c', 'green', 'green', '#4c5866', '#00a550', 'blue'];

    human();

    alert('Ok. But only once...');

    j++;

  } else {

    alert('No!')

  }

}



window.onload = init;



function init() {

  canvas = document.querySelector('#canvas');

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

  human();

}



function human() {

  head();

  body();

  arms();

  legs();

  foots();

}



function head() {

  context.save();

  

  // Head

  context.fillStyle = color[0];

  context.fillRect(200, 50, 100, 100);

  

  // Eyes

  context.clearRect(215, 65, 15, 15);

  context.clearRect(270, 65, 15, 15);

  context.fillStyle = color[3];

  context.fillRect(220, 70, 5, 5);

  context.fillRect(275, 70, 5, 5);

  

  // Nose

  context.fillStyle = color[1];

  context.fillRect(245, 100, 10, 10);

  

  // Mouth

  context.fillStyle = color[3];

  context.fillRect(230, 120, 40, 15);

  

  // Neck

  context.fillStyle = color[5];

  context.fillRect(220, 150, 60, 30);

  

  context.restore();

}



function body() {

  context.save();

  

  // Main top

  context.fillStyle = color[2];

  context.fillRect(150, 180, 200, 100);

  

  // Middle

  context.fillStyle = color[5];

  context.fillRect(200, 280, 100, 50);

  

  // Bottom

  context.fillRect(150, 320, 200, 50);

  

  

  context.restore();

}



function arms() {

  context.save();

  

  // Shoulders

  context.fillStyle = color[5];

  context.fillRect(100, 180, 50, 30);

  context.fillRect(350, 180, 50, 30);

  

  // Arms

  context.fillStyle = color[2];

  context.fillRect(100, 210, 30, 100);

  context.fillRect(370, 210, 30, 100);

  

  // Hands

  context.fillStyle = color[3];

  context.rotate(Math.PI/9);

  context.fillRect(200, 240, 30, 30);

  context.fillRect(450, 140, 30, 30);

  

  context.restore();

}



function legs() {

  context.save();

  

  // Pant 1

  context.fillStyle = color[2];

  context.rotate(Math.PI/9);

  context.fillRect(260, 280, 60, 100);

  

  // Pant 2

  context.rotate(-0.7);

  context.fillRect(150, 450, 60, 100);

  

  context.restore();

}



function foots() {

  context.save();

  

  // Foots

  context.fillStyle = color[3];

  context.fillRect(120, 440, 60, 40);

  context.fillRect(320, 440, 60, 40);

  

  context.restore();

}