Assignment 02Progress3

<!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();
   
    //Board///////
    context.beginPath();
    context.rect(100,200,400,200);
    context.lineWidth = 10;
    context.strokeStyle = 'gray';
    context.stroke();
    context.fillStyle = 'rgb(50,50,50)';
    context.fill();
    context.closePath();
   
    //Graph///////
        //graph1//
    context.beginPath();
    context.rect(110,300,10,95);
    context.lineWidth = 1;
    context.strokeStyle = 'rgb(255,255,255)';
    context.stroke();
    context.closePath();
        //graph2//
    context.beginPath();
    context.rect(120,350,10,45);
    context.lineWidth = 1;
    context.strokeStyle = 'rgb(255,255,255)';
    context.stroke();
    context.closePath();
        //graph2//
    context.beginPath();
    context.rect(130,330,10,65);
    context.lineWidth = 1;
    context.strokeStyle = 'rgb(255,255,255)';
    context.stroke();
    context.closePath();
        //graph3//
    context.beginPath();
    context.rect(140,345,10,50);
    context.lineWidth = 1;
    context.strokeStyle = 'rgb(255,255,255)';
    context.stroke();
    context.closePath();
        //graph4//
    context.beginPath();
    context.rect(150,338,10,57);
    context.lineWidth = 1;
    context.strokeStyle = 'rgb(255,255,255)';
    context.stroke();
    context.closePath();
        //graph5//
    context.beginPath();
    context.rect(160,355,10,40);
    context.lineWidth = 1;
    context.strokeStyle = 'rgb(255,255,255)';
    context.stroke();
    context.closePath();
        //graph6//
    context.beginPath();
    context.rect(170,372,10,23);
    context.lineWidth = 1;
    context.strokeStyle = 'rgb(255,255,255)';
    context.stroke();
    context.closePath();
        //graph7//
    context.beginPath();
    context.rect(180,380,10,15);
    context.lineWidth = 1;
    context.strokeStyle = 'rgb(255,255,255)';
    context.stroke();
    context.closePath();
        //graph8//
    context.beginPath;
    context.rect(190,385,10,10);
    context.lineWidth = 1;
    context.strokeStyle = 'rgb(255,255,255)';
    context.stroke();
    context.closePath();
        //graph9//
    context.beginPath();
    context.rect(200,390,10,5);
    context.strokeStyle = 'rgb(255,255,255)';
    context.lineWidth = 1;
    context.stroke();
    context.closePath();
        //graph10//
    context.beginPath();
    context.rect(210,392,10,3);
    context.lineWidth = 1;
    context.strokeStyle = 'rgb(255,255,255)';
    context.stroke();
    context.fillStyle = 'rbg(50,50,50)';
    context.fill();
    context.closePath();
        //piechart//
            //Circle//
    context.beginPath();
    context.arc(230,300,70,1/2 * Math.PI,Math.PI,true);
    context.lineWidth = 1;
    context.strokeStyle = 'rgb(255,255,255)';
    context.stroke();
    context.fill();
    context.closePath();
            //Sector1//
    context.beginPath();
    context.moveTo(160,300);
    context.lineTo(230,300);
    context.lineTo(230,370);
    context.lineWidth = 1;
    context.strokeStyle = 'white';
    context.stroke();
    context.closePath();
            //Sector2//
    context.beginPath();
    context.arc(230,300,70,1/2 * Math.PI,Math.PI,false);
    context.strokeStyle = 'rgb(255,255,255)';
    context.stroke();
    context.lineWidth = 1;
    context.strokeStyle = 'white';
    context.stroke();
    context.closePath();
        //Tray//
    context.beginPath();
    context.rect(100,400,400,10);
    context.fillStyle = 'rgb(200,200,200)';
    context.fill();
    context.closePath();
            //Eraser//
    context.beginPath();
    context.rect(232,392,30,8);
    context.fillStyle = 'black';
    context.fill();
    context.closePath();
            //Chalk//
    context.beginPath();
    context.moveTo(270,398);
    context.lineTo(294,398);
    context.strokeStyle = 'white';
    context.lineWidth = 3;
    context.stroke();
    context.closePath();
    //Light//
        //Lightbulb//
    context.beginPath();
    context.arc(120,100,20,0,2*Math.PI,true);
    var grd = context.createRadialGradient(120,100,5,120,100,20);
    grd.addColorStop(0,'rgb(255,255,255)');
    grd.addColorStop(1,'rgb(255,255,150)');
    context.fillStyle = grd;
    context.fill();
    context.closePath();
        //LightbulbChain//
    context.beginPath();
    context.moveTo(120,80);
    context.lineTo(120,0);
    context.strokeStyle = 'rgb(100,100,100)';
    context.stroke();
    context.lineWidth = 2;
    context.closePath();
///////////////////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.lineWidth = 20;
    context.strokeStyle = skin;
    context.lineCap = 'round';
    context.stroke();
    context.closePath();
            //Forearm//
    context.beginPath();
    context.moveTo(460,390);
    context.lineTo(460,450);
    context.fill();
    context.lineWidth = 20;
    context.strokeStyle = skin;
    context.lineCap = 'round';
    context.stroke();
    context.closePath();
            //watch//
    context.beginPath();
    context.rect(450,430,20,10)
    context.fillStyle = 'black';
    context.fill();
    context.lineWidth = 1;
    context.strokeStyle = 'black';
    context.stroke();
    context.closePath();
           
        //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();
    context.closePath();
            //Forearm//
    context.beginPath();
    context.moveTo(330,390);
    context.lineTo(330,450);
    context.fill();
    context.lineWidth = 20;
    context.strokeStyle = skin;
    context.lineCap = 'round';
    context.stroke();   
    context.closePath();
   
    //Body///////
        //Torso//
    context.beginPath();
    context.rect(350,350,90,100);
    context.fillStyle = shirt;
    context.fill();
    context.lineWidth = 1;
    context.strokeStyle = shirt;
    context.stroke();
    context.closePath();
            //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();
    context.closePath();
            //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();
    context.closePath();
            //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();
    context.closePath();
                //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();
    context.closePath();
                //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();
    context.closePath();
                //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();
    context.closePath();
                //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();
    context.closePath();           
            //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();
    context.closePath();
            //Necklace//
                //chain//
    context.beginPath();
    context.moveTo(380, 350);
    context.quadraticCurveTo(395, 420, 410, 350);
    context.lineWidth = 2;
    context.strokeStyle = 'gray';
    context.stroke();
    context.closePath();
                //tag//
    context.beginPath();
    context.rect(390,380,10,15);
    context.fillStyle = 'white';
    context.fill();
    context.lineWidth = 1;
    context.strokeStyle = 'white';
    context.stroke;
    context.closePath();

    //Legs//
        //RightLeg//
    context.beginPath();
    context.moveTo(370,480);
    context.lineTo(370,550);
    context.fill();
    context.lineWidth = 20;
    context.strokeStyle = skin;
    context.lineCap = 'square';
    context.stroke();
    context.closePath();
        //LeftLeg//
    context.beginPath();
    context.moveTo(420,480);
    context.lineTo(420,550);
    context.fill();
    context.lineWidth = 20;
    context.strokeStyle = skin;
    context.lineCap = 'square';
    context.stroke();
    context.closePath();
        //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();
    context.closePath();
        //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();
    context.closePath();
        //Buckle//
    context.beginPath();
    context.rect(385,452,20,16);
    context.fillStyle = 'gray';
    context.fill();
    context.lineWidth = 2;
    context.stroke();
    context.closePath();
        //Shoes//
            //RightShoe//
    context.beginPath();
    context.rect(355,560,30,5)
    context.fillStyle = 'brown';
    context.fill();
    context.closePath();
            //LeftShoe//
    context.beginPath();
    context.rect(405,560,30,5)
    context.fillStyle = 'brown';
    context.fill();
    context.closePath();
   
    //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();
    context.closePath();
        //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();
    context.closePath();
        //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();
    context.closePath();
            //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();
    context.closePath();
            //BrowRight//
    context.beginPath();
    context.moveTo(355,290)
    context.lineTo(375,285);
    context.lineWidth = 7;
    context.strokeStyle = hair;
    context.stroke();
    context.closePath();
            //BrowLeft//
    context.beginPath();
    context.moveTo(415,285)
    context.lineTo(435,290);
    context.lineWidth = 7;
    context.strokeStyle = hair;
    context.stroke();
    context.closePath();
            //Mouth//
    context.beginPath();
    context.arc(395,320,25,Math.PI,2 * Math.PI,true);
    context.fillStyle = 'white';
    context.fill();
    context.closePath();
                //TeethTop//
    context.beginPath();
    context.arc(395,320,25,0.9 * Math.PI,2.1 * Math.PI,true);
    context.fillStyle = 'black';
    context.fill();
    context.closePath();
                //TeethBottom//
    context.beginPath();
    context.arc(395,320,25,0.7 * Math.PI,2.3 * Math.PI,true);
    context.fillStyle = 'white';
    context.fill();
    context.closePath();


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

};

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