Assignment 02Progress2

<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
//////////////////(radial gradient, linear gradient, 10 other elements)///////////////

///Room///////////

//Carpet(red)//////
context.beginPath();
context.moveTo(0,500);
context.lineTo(0,600);
context.lineTo(800,600);
context.lineTo(600,500);
context.fillStyle = 'red';
context.fill();

//NorthWall///
var grd = context.createLinearGradient(0,500,0,0);
context.beginPath();
context.rect(0,0,600,500);
grd.addColorStop(0, 'rgb(200,200,200)');
grd.addColorStop(.1, 'rgb(250,250,250)');
context.fillStyle = grd;
context.fill();
context.lineWidth = 1;
context.strokeStyle = 'gray';
context.stroke();

//EastWall///
var grd = context.createLinearGradient(600,500,800,100);
context.beginPath();
context.moveTo(600,0);
context.lineTo(600,500);
context.lineTo(800,600);
context.lineTo(800,0);
grd.addColorStop(0, 'rgb(200,200,200)');
grd.addColorStop(.1, 'rgb(250,250,250)');
context.fillStyle = grd;
context.fill();
context.lineWidth = 1;
context.strokeStyle = 'gray';
context.stroke();

//Door//////////////
context.beginPath();
context.moveTo(70,500);
context.lineTo(250,500);
context.lineTo(250,140);
context.lineTo(70,140);
context.lineTo(70,500);
context.fillStyle = 'brown';
context.fill();
context.stroke();

///////////////////Me/////////////

//EDIT THESE FOR QUICK CUSTOMIATION////
var shirt = 'black';
var skin = 'tan';
var pants = 'rgb(185,180,80)';
var hair = 'rgb(30,30,5)';

//Arms//////////
//ArmLeft//
//UpperArm//
context.beginPath();
context.moveTo(440,370);
context.lineTo(460,390);
context.fill();
context.lineWidth = 20;
context.strokeStyle = skin;
context.lineCap = 'round';
context.stroke();
//Forearm//
context.beginPath();
context.moveTo(460,390);
context.lineTo(460,450);
context.fill();
context.lineWidth = 20;
context.strokeStyle = skin;
context.lineCap = 'round';
context.stroke();
//watch//
context.beginPath();
context.rect(450,430,20,10)
context.fillStyle = 'black';
context.fill();
context.lineWidth = 1;
context.strokeStyle = 'black';
context.stroke();

//ArmRight//
//UpperArm//
context.beginPath();
context.moveTo(350,370);
context.lineTo(330,390);
context.fill();
context.lineWidth = 20;
context.strokeStyle = skin;
context.lineCap = 'round';
context.stroke();
//Forearm//
context.beginPath();
context.moveTo(330,390);
context.lineTo(330,450);
context.fill();
context.lineWidth = 20;
context.strokeStyle = skin;
context.lineCap = 'round';
context.stroke();

//Body///////
//Torso//
context.beginPath();
context.rect(350,350,90,100);
context.fillStyle = shirt;
context.fill();
context.lineWidth = 1;
context.strokeStyle = shirt;
context.stroke();
//SleeveLeft//
context.beginPath();
context.moveTo(440,350);
context.lineTo(460,370);
context.lineTo(440,390);
context.lineTo(440,350);
context.fillStyle = shirt;
context.fill();
context.stroke();
//SleeveRight//
context.beginPath();
context.moveTo(350,350);
context.lineTo(330,370);
context.lineTo(350,390);
context.fillStyle = shirt;
context.fill();
context.lineWidth = 0;
context.stroke();
//Stripes//
//1//
context.beginPath();
context.moveTo(355,370);
context.lineTo(435,370);
context.lineWidth = 10;
context.strokeStyle = 'rgb(50,50,50)';
context.lineCap = 'square';
context.stroke();
//2//
context.beginPath();
context.moveTo(355,390);
context.lineTo(435,390);
context.lineWidth = 10;
context.strokeStyle = 'rgb(50,50,50)';
context.lineCap = 'square';
context.stroke();
//3//
context.beginPath();
context.moveTo(355,410);
context.lineTo(435,410);
context.lineWidth = 10;
context.strokeStyle = 'rgb(50,50,50)';
context.lineCap = 'square';
context.stroke();
//4//
context.beginPath();
context.moveTo(355,430);
context.lineTo(435,430);
context.lineWidth = 10;
context.strokeStyle = 'rgb(50,50,50)';
context.lineCap = 'square';
context.stroke();
//5//
context.beginPath();
context.moveTo(355,450);
context.lineTo(435,450);
context.lineWidth = 10;
context.strokeStyle = 'rgb(50,50,50)';
context.lineCap = 'square';
context.stroke();
//Collar//
context.beginPath();
context.moveTo(375,350);
context.lineTo(395,380);
context.lineTo(415,350);
context.fillStyle = skin;
context.fill();
context.lineWidth = 4;
context.strokeStyle = 'rgb(50,50,50)';
context.stroke();
//Necklace//
//chain//
context.beginPath();
    context.moveTo(380, 350);
context.quadraticCurveTo(395, 420, 410, 350);
    context.lineWidth = 2;
    context.strokeStyle = 'gray';
    context.stroke();
    //tag//
    context.beginPath();
    context.rect(390,380,10,15);
    context.fillStyle = 'white';
    context.fill();
    context.lineWidth = 1;
    context.strokeStyle = 'white';
    context.stroke;

//Legs//
//Pants//
context.beginPath();
context.moveTo(350,450);
context.lineTo(350,495);
context.lineTo(390,495);
context.lineTo(395,475);
context.lineTo(400,495);
context.lineTo(440,495);
context.lineTo(440,450);
context.lineTo(350,450);
context.fillStyle = pants;
context.fill();
context.lineWidth = 1;
context.strokeStyle = pants;
context.stroke();
//Belt//
context.beginPath();
context.moveTo(355,460);
context.lineTo(435,460);
context.lineWidth = 10;
context.strokeStyle = 'rgb(50,50,50)';
context.lineCap = 'square';
context.stroke();
//Buckle//
context.beginPath();
context.rect(385,452,20,16);
context.fillStyle = 'gray';
context.fill();
context.lineWidth = 2;
context.stroke();

//Head//////////////////
//Hair//
context.beginPath();
context.arc(395,290,45,0,2*Math.PI,false);
context.fillStyle = hair;
context.fill();
context.lineWidth = 1;
context.strokeStyle = hair;
context.stroke();
//Head//
context.beginPath();
context.arc(395,305,50,0,2*Math.PI,false);
context.fillStyle = skin;
context.fill();
context.lineWidth= 1;
context.strokeStyle = skin;
context.stroke();
//Face//
//EyeRight//
context.beginPath();
context.arc(365,305,10,0,2*Math.PI,false);
context.fillStyle = hair;
context.fill();
context.lineWidth = 6;
context.strokeStyle = 'white';
context.stroke();
//EyeLeft//
context.beginPath();
context.arc(425,305,10,0,2*Math.PI,false);
context.fillStyle = hair;
context.fill();
context.lineWidth = 6;
context.strokeStyle = 'white';
context.stroke();
//BrowRight//
context.beginPath();
context.moveTo(355,290)
context.lineTo(375,290);
context.lineWidth = 7;
context.strokeStyle = hair;
context.stroke();
//BrowLeft//
context.beginPath();
context.moveTo(415,290)
context.lineTo(435,290);
context.lineWidth = 7;
context.strokeStyle = hair;
context.stroke();




////////////////////////////////////// end above this line

};

</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>