//background
var r, g, b, a;

r = Math.round(mouseX/canvas.width*255);
g = Math.round(mouseX/canvas.width*91);
b = Math.round((r+g)/2);
a = .9;

var col;

col = "rgba("+r+","+g+","+b+","+a+")";

context.beginPath();
context.rect(0,0,canvas.width, canvas.height)
context.fillStyle = col;
context.fill();
context.closePath();

//screen door
context.beginPath();
context.rect(1,40,800,70);
context.rect(690,1,70,600);
context.rect(1,390,800,70);
context.rect(65,1,70,600);
context.fillStyle = "black";
context.fill();
context.stroke();

//hair
context.beginPath();
context.moveTo(79,600);
context.bezierCurveTo(72,240,86,359,79,300);
context.quadraticCurveTo(51,41,79,0);
context.lineTo(657,0);
context.quadraticCurveTo(742,542,749,600);
context.lineTo(693,600);
context.quadraticCurveTo(636,460,632,430);
context.quadraticCurveTo(627,541,647,600);
context.lineTo(579,600);
context.lineTo(550,417);
context.lineTo(512,600);
context.lineTo(79,600);
context.fillStyle = "black";
context.fill();
context.stroke();
context.closePath();

//hair highlights
context.beginPath();
context.moveTo(79,600);
context.bezierCurveTo(72,240,86,359,79,300);
context.quadraticCurveTo(51,41,79,0);
context.lineTo(100,0);
context.quadraticCurveTo(95,365,122,600);
context.fillStyle = "rgb(117,25,60)";
context.fill();
context.stroke();
context.closePath();

context.beginPath();
context.moveTo(657,0);
context.quadraticCurveTo(740,538,749,600);
context.lineTo(740,600);
context.quadraticCurveTo(621,49,620,0);
context.fillStyle = "rgb(117,25,60)";
context.fill();
context.stroke();
context.closePath();

context.beginPath();
context.moveTo(211,317);
context.lineTo(236,600);
context.fillStyle =
context.stroke();
context.closePath();

//kimono
context.beginPath();
context.moveTo(229,525);
context.lineTo(227,497);
context.quadraticCurveTo(295,541,343,600);
context.lineTo(305,600);
context.quadraticCurveTo(253,536,229,525);
context.fillStyle = "rgb(218,31,38)";
context.fill();
context.stroke();
context.closePath();

context.beginPath();
context.moveTo(253,515);
context.lineTo(269,499);
context.quadraticCurveTo(390,560,425,600);
context.lineTo(343,600);
context.quadraticCurveTo(295,545,253,515);
context.fillStyle = "rgb(204,107,109)";
context.fill();
context.stroke();
context.closePath();

context.beginPath();
context.moveTo(425,600);
context.quadraticCurveTo(489,516,546,471);
context.lineTo(565,487);
context.quadraticCurveTo(487,583,485,600);
context.lineTo(425,600);
context.fillStyle = "rgb(204,107,109)";
context.fill();
context.stroke();
context.closePath();

context.beginPath();
context.moveTo(480,600);
context.quadraticCurveTo(540,512,565,487);
context.lineTo(590,462);
context.lineTo(603,473);
context.quadraticCurveTo(525,582,521,600);
context.lineTo(480,600);
context.fillStyle = "rgb(218,31,38)";
context.fill();
context.stroke();
context.closePath();

context.beginPath();
context.moveTo(519,600);
context.quadraticCurveTo(561,522,599,478);
context.lineTo(781,600);
context.lineTo(519,600);
context.fillStyle = "black";
context.fill();
context.stroke();
context.closePath();

//flower
context.beginPath();
context.moveTo(249,600);
context.quadraticCurveTo(235,577,254,571);
context.quadraticCurveTo(251,560,266,556);
context.quadraticCurveTo(291,581,305,600);
context.lineTo(249,600);
context.fillStyle = "rgb(90,33,80)";
context.fill();
context.stroke();
context.closePath();

context.beginPath();
context.moveTo(249,600);
context.quadraticCurveTo(235,577,254,571);
context.quadraticCurveTo(279,582,267,600);
context.lineTo(249,600);
context.fillStyle = "rgb(91,36,101)";
context.fill();

context.beginPath();
context.moveTo(276,600);
context.quadraticCurveTo(272,584,287,578);
context.quadraticCurveTo(301,594,305,600);
context.lineTo(276,600);
context.fillStyle = "rgb(91,36,99)";
context.fill();
context.closePath();

context.beginPath();
context.moveTo(261,576);
context.quadraticCurveTo(263,565,274,569);
context.quadraticCurveTo(279,570,279,577);
context.bezierCurveTo(278,588,278,589,270,589);
context.quadraticCurveTo(259,585,261,576);
context.fillStyle = "rgb(109,59,22)";
context.fill();
context.closePath();

//neck
var neckgrd = context.createLinearGradient(363,505,499,496);
neckgrd.addColorStop(0,"rgb(210,60,50)");
neckgrd.addColorStop(1,"rgb(190,60,50)");

context.beginPath();
context.moveTo(281,348);
context.quadraticCurveTo(313,461,294,512);
context.quadraticCurveTo(400,571,425,600);
context.quadraticCurveTo(466,546,517,497);
context.quadraticCurveTo(494,431,495,335);
context.lineTo(281,348);
context.fillStyle = neckgrd;
context.fill();
context.stroke();
context.closePath();

//neck shadow
context.beginPath();
context.moveTo(281,348);
context.quadraticCurveTo(297,411,299,443);
context.quadraticCurveTo(331,454,369,485);
context.quadraticCurveTo(422,529,507,462);
context.quadraticCurveTo(493,377,495,335);
context.lineTo(281,348);
context.fillStyle = "rgba(88,15,10,.6)";
context.fill();
context.closePath();

//head

var facegrd = context.createRadialGradient(382,267,20,371,201,300);
facegrd.addColorStop(0, "rgb(200,60,50)");
facegrd.addColorStop(1, "rgb(140,70,50)");

context.beginPath();
context.moveTo(192,51);
context.quadraticCurveTo(186,219,205,304);
context.quadraticCurveTo(223,379,394,430);
context.quadraticCurveTo(549,356,553,292);
context.quadraticCurveTo(562,159,530,15);
context.lineTo(536,121);
context.lineTo(507,3);
context.lineTo(509,123);
context.lineTo(444,129);
context.lineTo(437,8);
context.lineTo(429,130);
context.lineTo(320,137);
context.quadraticCurveTo(293,37,292,3);
context.quadraticCurveTo(282,90,294,137);
context.lineTo(215,142);
context.lineTo(192,51);
context.fillStyle = facegrd;
context.fill();
context.stroke();
context.closePath();

//right eye

var reyegrd = context.createRadialGradient(253,198,4,261,226,60);
reyegrd.addColorStop(0,"rgb(180,0,0)");
reyegrd.addColorStop(1,"rgb(255,0,0)");

context.beginPath();
context.moveTo(192,171);
context.quadraticCurveTo(281,108,318,197);
context.quadraticCurveTo(277,283,196,227);
context.lineTo(192,171);
context.fillStyle = "rgb(216,97,95)";
context.fill();
context.closePath();

context.beginPath();
context.arc(253,200,40,0,Math.PI*2,false);
context.fillStyle = reyegrd;
context.fill();
context.stroke();
context.closePath();

context.beginPath();
context.arc(253,199,25,0,Math.PI*2,false);
context.fillStyle = "rgb(85,15,14)";
context.fill();
context.closePath();

context.beginPath();
context.arc(253,199,9,0,Math.PI*2,false);
context.fillStyle = "black";
context.fill();
context.closePath();

context.beginPath();
context.arc(241,185,8,0,Math.PI*2,false);
context.fillStyle = "rgb(227,85,97)";
context.fill();
context.closePath();

context.beginPath();
context.moveTo(192,171);
context.quadraticCurveTo(281,108,318,199);
context.quadraticCurveTo(272,119,191,190);
context.lineTo(192,171);
context.fillStyle = "black";
context.fill();
context.stroke();
context.closePath();

//left eye

var leyegrd = context.createRadialGradient(500,166,4,480,200,60);
leyegrd.addColorStop(0,"rgb(180,0,0)");
leyegrd.addColorStop(1,"rgb(255,0,0)");

context.beginPath();
context.moveTo(549,138);
context.quadraticCurveTo(473,94,429,189);
context.quadraticCurveTo(494,254,553,200);
context.lineTo(549,138);
context.fillStyle = "rgb(216,97,95)";
context.fill();
context.closePath();

context.beginPath();
context.arc(495,178,40,0,Math.PI*2,false);
context.fillStyle = leyegrd;
context.fill();
context.stroke();
context.closePath();

context.beginPath();
context.arc(495,178,25,0,Math.PI*2,false);
context.fillStyle = "rgb(85,15,14)";
context.fill();
context.closePath();

context.beginPath();
context.arc(495,177,9,0,Math.PI*2,false);
context.fillStyle = "black";
context.fill();
context.closePath();

context.beginPath();
context.arc(481,161,8,0,Math.PI*2,false);
context.fillStyle = "rgb(227,85,97)";
context.fill();
context.closePath();

context.beginPath();
context.moveTo(549,138);
context.quadraticCurveTo(473,94,429,189);
context.quadraticCurveTo(475,104,552,156);
context.lineTo(549,138);
context.fillStyle = "black";
context.fill();
context.stroke();
context.closePath();

//eyebrows

//nose
context.beginPath();
context.moveTo(369,299);
context.quadraticCurveTo(372,296,376,298);
context.stroke();

context.beginPath();
context.moveTo(390,299);
context.quadraticCurveTo(393,295,397,298);
context.stroke();

//lips
context.beginPath();
context.moveTo(357,341);
context.quadraticCurveTo(376,335,386,337);
context.quadraticCurveTo(403,332,415,334);
context.stroke();

//lip shade
context.beginPath();
context.moveTo(368,356);
context.quadraticCurveTo(395,362,411,353);
context.lineTo(368,356);
context.fillStyle = "rgba(157,28,32,.8)";
context.fill();