Thursday, September 12, 2013

Assignment 02DONE!

<!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//////
    context.beginPath();
    context.moveTo(0,500);
    context.lineTo(0,600);
    context.lineTo(800,600);
    context.lineTo(600,500);
    context.fillStyle = 'green';
    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();
        //WindowRight//
    var grd = context.createLinearGradient(0,0,0,100);
    context.beginPath();
    context.rect(10,50,250,50);
    grd.addColorStop(0,'rgb(100,100,255)');
    grd.addColorStop(1,'rgb(200,200,255)');
    context.fillStyle = grd;
    context.fill();
    context.lineWidth = 5;
    context.strokeStyle = 'gray';
    context.stroke();
    context.closePath();
        //WindowLeft//
    var grd = context.createLinearGradient(0,0,0,100);
    context.beginPath();
    context.rect(290,50,250,50);
    grd.addColorStop(0,'rgb(100,100,255)');
    grd.addColorStop(1,'rgb(200,200,255)');
    context.fillStyle = grd;
    context.fill();
    context.lineWidth = 5;
    context.strokeStyle = 'gray';
    context.stroke();
    context.closePath();
      
    //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();
                //RightStrap//
    context.beginPath();
    context.moveTo(375,560);
    context.lineTo(375,555);
    context.lineWidth = 3;
    context.strokeStyle = 'brown';
    context.stroke();
    context.closePath();
                //RightTop//
    context.beginPath();
    context.moveTo(360, 560);
    context.quadraticCurveTo(375, 545, 380, 560);
    context.lineWidth = 3;
    context.strokeStyle = 'brown';
    context.stroke();
    context.closePath();
  
            //LeftShoe//
    context.beginPath();
    context.rect(405,560,30,5)
    context.fillStyle = 'brown';
    context.fill();
    context.closePath();
                //LeftStrap//
    context.beginPath();
    context.moveTo(415,560);
    context.lineTo(415,555);
    context.lineWidth = 3;
    context.strokeStyle = 'brown';
    context.stroke();
    context.closePath();
                //LeftTop//
    context.beginPath();
    context.moveTo(410, 560);
    context.quadraticCurveTo(415, 545, 430, 560);
    context.lineWidth = 3;
    context.strokeStyle = 'brown';
    context.stroke();
    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();
            //Chin//
    context.beginPath();
    context.moveTo(385,355);
    context.lineTo(405,355);
    context.lineTo(400,350);
    context.lineTo(390,350);
    context.lineTo(385,355);
    context.fillStyle = hair;
    context.fill();
    context.closePath();
////////////////////////////////////// end above this line

};

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

Tuesday, September 10, 2013

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>

Thursday, September 5, 2013

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>

Tuesday, September 3, 2013

Assignment 02Progress

<!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//////
    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.stroke();





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

};

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

Sunday, September 1, 2013

Assignment 01D.)

<!DOCTYPE HTML>
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
      #myCanvas {
        border: 2px solid rgb(0,255,0);
      }
    </style>
    <script>
      window.onload = function() {
        var canvas = document.getElementById("myCanvas");
        var context = canvas.getContext("2d");
/////////////////////////////////////////

        var Xc = 600;
        var Yc = 300;
        var radius = 50;
        var theta = 0;
        context.beginPath();
        context.arc(Xc, Yc, radius, 0, 2*Math.PI, false);
        context.fillStyle = grd;
        var grd = context.createLinearGradient(500,300,700,300);
        grd.addColorStop(0, "#ffff00");
        grd.addColorStop(1, "#0000ff");
        context.fillStyle = grd;
        context.fill();
        context.lineWidth = 0;
        context.strokeStyle = none;
        context.stroke();

//////////////////////////////////////////
      };

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