ASSIGNMENT 05 - HTML PORTRAIT

on

   

<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");

    ///background
var x = 0;
        var y = 0;
        var width = 800;
        var height = 600;
   
        context.beginPath();
        context.rect(x,y,width,height);
        context.fillStyle = 'green';
        // add linear gradient
        var grd = context.createLinearGradient(0, 175, 0, 500);
        // light blue
        grd.addColorStop(1, "#8ED6FF");
        // dark blue
        grd.addColorStop(0, "#004CB3");
        context.fillStyle = grd;
        context.fill();

    ///background
var centerX = canvas.width / 2.2 ;
        var centerY = canvas.height /.55;
        var radius = 600;
        var startangle = -155;
        var endangle = 3 * Math.PI;
        context.beginPath();
        context.arc(centerX, centerY, radius, startangle, endangle, false);
        // context.fillStyle = "green";
        var grd=context.createRadialGradient(centerX, centerY, 20, centerX, centerY, 200);
        grd.addColorStop(0, "pink");
        grd.addColorStop(1, "WHITE");
        context.fillStyle = grd;
        context.fill();"#8ED6FF";
        var grd=context.createRadialGradient(centerX, centerY, 20, centerX, centerY, 200);
        grd.addColorStop(0, "GREY");
        grd.addColorStop(1, "#228B22");
        context.fillStyle = grd;
        context.fill();"WHITE";

     ///sun
 var centerX = canvas.width / 13;
        var centerY = canvas.height / 13;
        var radius = 93;
        var startangle = 0;
        var endangle = 2 * Math.PI;
        context.beginPath();
        context.arc(centerX, centerY, radius, startangle, endangle, false);
        // context.fillStyle = "green";
        var grd=context.createRadialGradient(centerX, centerY, 10, centerX, centerY, 200);
        grd.addColorStop(0, "yellow");
        grd.addColorStop(1, "red");
        context.fillStyle = grd;
        context.fill();"#8ED6FF";




    ///hair
var centerX = canvas.width / 1.999 ;
        var centerY = canvas.height /2.06;
        var radius = 56;
        var startangle = -55;
        var endangle = 2 * Math.PI;
        context.beginPath();
        context.arc(centerX, centerY, radius, startangle, endangle, false);
        // context.fillStyle = "green";
        var grd=context.createRadialGradient(centerX, centerY, 20, centerX, centerY, 200);
        grd.addColorStop(0, "pink");
        grd.addColorStop(1, "yellow");
        context.fillStyle = grd;
        context.fill();"#8ED6FF";
        var grd=context.createRadialGradient(centerX, centerY, 20, centerX, centerY, 200);
        grd.addColorStop(0, "#785F4B");
        grd.addColorStop(1, "#785F4B");
        context.fillStyle = grd;
        context.fill();"#8ED6FF";

///longhair
context.beginPath();
    context.rect(364, 365, 72, -55);
    context.fillStyle = '#785F4B';
    context.fill();
        context.lineWidth = 40;
    context.strokeStyle = '#785F4B';                                
    context.stroke()
          context.fill();"#8ED6FF";
     context.fill();"#8ED6FF";

///head
var centerX = canvas.width / 1.999 ;
        var centerY = canvas.height /2.05;
        var radius = 42;
        var startangle = -55;
        var endangle = 2 * Math.PI;
        context.beginPath();
        context.arc(centerX, centerY, radius, startangle, endangle, false);
        // context.fillStyle = "green";
        var grd=context.createRadialGradient(centerX, centerY, 20, centerX, centerY, 200);
        grd.addColorStop(0, "pink");
        grd.addColorStop(1, "yellow");
        context.fillStyle = grd;
        context.fill();"#8ED6FF";
        var grd=context.createRadialGradient(centerX, centerY, 20, centerX, centerY, 200);
        grd.addColorStop(0, "pink");
        grd.addColorStop(1, "yellow");
        context.fillStyle = grd;
        context.fill();"#8ED6FF";

///fronthairright
    context.beginPath();
    context.rect(434, 320, 6, -55);
    context.fillStyle = '#785F4B';
    context.fill();
        context.lineWidth = 10;
    context.strokeStyle = '#785F4B';                                
    context.stroke()
          context.fill();"#785F4B";
     context.fill();"#785F4B";

///fronthairleft
    context.beginPath();
    context.rect(360, 318, 5, -57);
    context.fillStyle = '#785F4B';
    context.fill();
        context.lineWidth = 10;
    context.strokeStyle = '#785F4B';                                
    context.stroke()
          context.fill();"#8ED6FF";
     context.fill();"#8ED6FF";

///arms
var centerX = canvas.width / 1.99;
        var centerY = canvas.height /1.55;
        var radius = 50;
        var startangle = -55;
        var endangle = 2 * Math.PI;
        context.beginPath();
        context.arc(centerX, centerY, radius, startangle, endangle, false);
        // context.fillStyle = "green";
        var grd=context.createRadialGradient(centerX, centerY, 20, centerX, centerY, 200);
        grd.addColorStop(0, "pink");
        grd.addColorStop(1, "yellow");
        context.fillStyle = grd;
        context.fill();"#8ED6FF";
        var grd=context.createRadialGradient(centerX, centerY, 20, centerX, centerY, 200);
        grd.addColorStop(0, "pink");
        grd.addColorStop(1, "yellow");
        context.fillStyle = grd;
        context.fill();"#8ED6FF";

///tophalf
var centerX = canvas.width / 1.99;
        var centerY = canvas.height /1.595;
        var radius = 41;
        var startangle = -55;
        var endangle = 2 * Math.PI;
        context.beginPath();
        context.arc(centerX, centerY, radius, startangle, endangle, false);
        // context.fillStyle = "green";
        var grd=context.createRadialGradient(centerX, centerY, 20, centerX, centerY, 200);
        grd.addColorStop(0, "#20B2AA");
        grd.addColorStop(1, "yellow");
        context.fillStyle = grd;
        context.fill();"#8ED6FF";
   


    ///eyeballr
    var centerX = canvas.width / 1.930;
        var centerY = canvas.height /2.1;
        var radius =9;
        var startangle = -55;
        var endangle = 2 * Math.PI;
        context.beginPath();
        context.arc(centerX, centerY, radius, startangle, endangle, false);
        // context.fillStyle = "green";
        var grd=context.createRadialGradient(centerX, centerY, 20, centerX, centerY, 200);
        grd.addColorStop(0, "blue");
        grd.addColorStop(1, "blue");
        context.fillStyle = grd;
        context.fill();"#8ED6FF";

///eyeballl
var centerX = canvas.width / 2.08;
        var centerY = canvas.height /2.1;
        var radius = 9;
        var startangle = -55;
        var endangle = 2 * Math.PI;
        context.beginPath();
        context.arc(centerX, centerY, radius, startangle, endangle, false);
        // context.fillStyle = "green";
        var grd=context.createRadialGradient(centerX, centerY, 20, centerX, centerY, 200);
        grd.addColorStop(0, "blue");
        grd.addColorStop(1, "blue");
        context.fillStyle = grd;
        context.fill();"#8ED6FF";

///pupilleft
var centerX = canvas.width / 2.08;
        var centerY = canvas.height /2.1;
        var radius = 4;
        var startangle = -55;
        var endangle = 2 * Math.PI;
        context.beginPath();
        context.arc(centerX, centerY, radius, startangle, endangle, false);
        // context.fillStyle = "green";
        var grd=context.createRadialGradient(centerX, centerY, 20, centerX, centerY, 200);
        grd.addColorStop(0, "black");
        grd.addColorStop(1, "black");
        context.fillStyle = grd;
        context.fill();"#8ED6FF";
     context.fill();"#8ED6FF";

///pupilright
var centerX = canvas.width / 1.93;
        var centerY = canvas.height /2.1;
        var radius = 4;
        var startangle = -55;
        var endangle = 2 * Math.PI;
        context.beginPath();
        context.arc(centerX, centerY, radius, startangle, endangle, false);
        // context.fillStyle = "green";
        var grd=context.createRadialGradient(centerX, centerY, 20, centerX, centerY, 200);
        grd.addColorStop(0, "black");
        grd.addColorStop(1, "black");
        context.fillStyle = grd;
        context.fill();"#8ED6FF";

///EYEWHITE
var centerX = canvas.width /1.91;
        var centerY = canvas.height /2.1;
        var radius = 2.3;
        var startangle = -55;
        var endangle = 2 * Math.PI;
        context.beginPath();
        context.arc(centerX, centerY, radius, startangle, endangle, false);
        // context.fillStyle = "green";
        var grd=context.createRadialGradient(centerX, centerY, 20, centerX, centerY, 200);
        grd.addColorStop(0, "white");
        grd.addColorStop(1, "white");
        context.fillStyle = grd;
        context.fill();"#8ED6FF";

    ///EYEWHITE
var centerX = canvas.width /2.06;
        var centerY = canvas.height /2.1;
        var radius = 2.3;
        var startangle = -55;
        var endangle = 2 * Math.PI;
        context.beginPath();
        context.arc(centerX, centerY, radius, startangle, endangle, false);
        // context.fillStyle = "green";
        var grd=context.createRadialGradient(centerX, centerY, 20, centerX, centerY, 200);
        grd.addColorStop(0, "white");
        grd.addColorStop(1, "white");
        context.fillStyle = grd;
        context.fill();"#8ED6FF";

    ///smile
var centerX = canvas.width / 2.001;
        var centerY = canvas.height / 1.950;
        var radius = 12;
        var startangle =3.1;
        var endangle = 0 * Math.PI;
        context.beginPath();
        context.arc(centerX, centerY, radius, startangle, endangle, true);
        context.fillStyle = "white";
        context.fill();
        context.lineWidth = 6;
        context.strokeStyle = "red";
        context.stroke();

    ///middlebody
context.beginPath();
    context.rect(388, 423, 27, 35);
    context.fillStyle = '#191970';
    context.fill();
        context.lineWidth = 40;
    context.strokeStyle = '#191970';                                
    context.stroke()
          context.fill();"#8ED6FF";
     context.fill();"#8ED6FF";


    ///bottomhalfhalf
var centerX = canvas.width / 1.99;
        var centerY = canvas.height /1.34;
        var radius = 45;
        var startangle = -55;
        var endangle = 2 * Math.PI;
        context.beginPath();
        context.arc(centerX, centerY, radius, startangle, endangle, false);
        // context.fillStyle = "#191970";
        var grd=context.createRadialGradient(centerX, centerY, 20, centerX, centerY, 200);
        grd.addColorStop(0, "#191970");
        grd.addColorStop(1, "#191970");
        context.fillStyle = grd;
        context.fill();"#191970";

///legs
context.beginPath();
    context.rect(379, 476, 46, 95);
    context.fillStyle = "#191970";
    context.fill();
        context.lineWidth = 40;
    context.strokeStyle = "#191970";                                
    context.stroke()
          context.fill();"#191970";
     context.fill();"#191970";


    ///TREETRUNK
context.beginPath();
    context.rect(166, 476,  18, 125);
    context.fillStyle = 'brown';
    context.fill();
        context.lineWidth = 10;
    context.strokeStyle = 'brown';
    context.stroke()

    ///TREE
var x = 175;
       var y = 205;
       var x1 = 255;
       var y1 = 525;
       var x2 = 95;
       var y2 = 525;
       var x3 = 175;
       var y3 = 200;
       context.beginPath();
       context.moveTo(x, y);
       context.lineTo(x1, y1);
       context.lineTo(x2, y2);
       context.lineTo(x3, y3);
       context.fillStyle = '#004400';
       context.fill();

    ///TREE
var x = 175;
       var y = 150;
       var x1 = 255;
       var y1 = 400;
       var x2 = 95;
       var y2 = 400;
       var x3 = 175;
       var y3 = 150;
       context.beginPath();
       context.moveTo(x, y);
       context.lineTo(x1, y1);
       context.lineTo(x2, y2);
       context.lineTo(x3, y3);
       context.fillStyle = '#006500';
       context.fill();
    ///pearl
var centerX = canvas.width / 1.99;
        var centerY = canvas.height /1.77;
        var radius = 5;
        var startangle = -55;
        var endangle = 2 * Math.PI;
        context.beginPath();
        context.arc(centerX, centerY, radius, startangle, endangle, false);
        // context.fillStyle = "green";
        var grd=context.createRadialGradient(centerX, centerY, 20, centerX, centerY, 200);
        grd.addColorStop(0, "white");
        grd.addColorStop(1, "white");
        context.fillStyle = grd;
        context.fill();"#8ED6FF";
    ///pearl
var centerX = canvas.width / 1.94;
        var centerY = canvas.height /1.78;
        var radius = 5;
        var startangle = -55;
        var endangle = 2 * Math.PI;
        context.beginPath();
        context.arc(centerX, centerY, radius, startangle, endangle, false);
        // context.fillStyle = "green";
        var grd=context.createRadialGradient(centerX, centerY, 20, centerX, centerY, 200);
        grd.addColorStop(0, "white");
        grd.addColorStop(1, "white");
        context.fillStyle = grd;
        context.fill();"#8ED6FF";

///pearl
var centerX = canvas.width / 2.05;
        var centerY = canvas.height /1.78;
        var radius = 5;
        var startangle = -55;
        var endangle = 2 * Math.PI;
        context.beginPath();
        context.arc(centerX, centerY, radius, startangle, endangle, false);
        // context.fillStyle = "green";
        var grd=context.createRadialGradient(centerX, centerY, 20, centerX, centerY, 200);
        grd.addColorStop(0, "white");
        grd.addColorStop(1, "white");
        context.fillStyle = grd;
        context.fill();"#8ED6FF";

///bangleft
var centerX = canvas.width / 2.16;
        var centerY = canvas.height / 2.55;
        var radius = 42;
        var startangle =2.1;
        var endangle =-0 * Math.PI;
        context.beginPath();
        context.arc(centerX, centerY, radius, startangle, endangle, true);
        context.fillStyle = "#785F4B";
        context.fill();
        context.lineWidth = 1;
        context.strokeStyle = "#9C7B62";
        context.stroke();

///bangright
var centerX = canvas.width / 1.99;
        var centerY = canvas.height / 2.44;
        var radius = 25;
        var startangle =-3.6;
        var endangle =0 * Math.PI;
        context.beginPath();
        context.arc(centerX, centerY, radius, startangle, endangle, true);
        context.fillStyle = "#785F4B";
        context.fill();
        context.lineWidth = 1;
        context.strokeStyle = "#9C7B62";
        context.stroke();

///cloud
var centerX = canvas.width / 1.9;
        var centerY = canvas.height /5.5;
        var radius = 47;
        var startangle = -55;
        var endangle = 2 * Math.PI;
        context.beginPath();
        context.arc(centerX, centerY, radius, startangle, endangle, false);
        // context.fillStyle = "green";
        var grd=context.createRadialGradient(centerX, centerY, 20, centerX, centerY, 200);
        grd.addColorStop(0, "white");
        grd.addColorStop(1, "white");
        context.fillStyle = grd;
        context.fill();"#8ED6FF";

///cloud
var centerX = canvas.width / 1.62;
        var centerY = canvas.height /6.2;
        var radius = 56;
        var startangle = -55;
        var endangle = 2 * Math.PI;
        context.beginPath();
        context.arc(centerX, centerY, radius, startangle, endangle, false);
        // context.fillStyle = "green";
        var grd=context.createRadialGradient(centerX, centerY, 20, centerX, centerY, 200);
        grd.addColorStop(0, "white");
        grd.addColorStop(1, "white");
        context.fillStyle = grd;
        context.fill();"#8ED6FF";

///cloud
var centerX = canvas.width / 1.4;
        var centerY = canvas.height /4.99;
        var radius = 51;
        var startangle = -55;
        var endangle = 2 * Math.PI;
        context.beginPath();
        context.arc(centerX, centerY, radius, startangle, endangle, false);
        // context.fillStyle = "green";
        var grd=context.createRadialGradient(centerX, centerY, 20, centerX, centerY, 200);
        grd.addColorStop(0, "white");
        grd.addColorStop(1, "white");
        context.fillStyle = grd;
        context.fill();"#8ED6FF";

///dogbody
context.beginPath();
    context.rect(600, 532,  65, 25);
    context.fillStyle = 'brown';
    context.fill();
        context.lineWidth = 20;
    context.strokeStyle = 'brown';
    context.stroke()

///dogleg
context.beginPath();
    context.rect(600, 565, .90, 25);
    context.fillStyle = 'brown';
    context.fill();
        context.lineWidth = 20;
    context.strokeStyle = 'brown';                                
    context.stroke()

///doglegr
context.beginPath();
    context.rect(664, 565, .90, 25);
    context.fillStyle = 'brown';
    context.fill();
        context.lineWidth = 20;
    context.strokeStyle = 'brown';                                
    context.stroke()

///DOGHEAD
var centerX = canvas.width / 1.35;
        var centerY = canvas.height /1.192;
        var radius = 25;
        var startangle = -55;
        var endangle = 2 * Math.PI;
        context.beginPath();
        context.arc(centerX, centerY, radius, startangle, endangle, false);
        // context.fillStyle = "green";
        var grd=context.createRadialGradient(centerX, centerY, 20, centerX, centerY, 200);
        grd.addColorStop(0, "#0000FF");
        grd.addColorStop(1, "black");
        context.fillStyle = grd;
        context.fill();"#8ED6FF";

///TOPDOGHEAD
var centerX = canvas.width / 1.35;
        var centerY = canvas.height /1.2;
        var radius = 27;
        var startangle = -55;
        var endangle = 2 * Math.PI;
        context.beginPath();
        context.arc(centerX, centerY, radius, startangle, endangle, false);
        // context.fillStyle = "green";
        var grd=context.createRadialGradient(centerX, centerY, 20, centerX, centerY, 200);
        grd.addColorStop(0, "brown");
        grd.addColorStop(1, "brown");
        context.fillStyle = grd;
        context.fill();"#8ED6FF";

///DOGMUZZLE
var centerX = canvas.width / 1.41;
        var centerY = canvas.height /1.2;
        var radius = 11;
        var startangle = -55;
        var endangle = 2 * Math.PI;
        context.beginPath();
        context.arc(centerX, centerY, radius, startangle, endangle, false);
        // context.fillStyle = "green";
        var grd=context.createRadialGradient(centerX, centerY, 20, centerX, centerY, 200);
        grd.addColorStop(0, "brown");
        grd.addColorStop(1, "brown");
        context.fillStyle = grd;
        context.fill();"#8ED6FF";

///DOGEYE
var centerX = canvas.width / 1.376;
        var centerY = canvas.height /1.21;
        var radius = 4;
        var startangle = -55;
        var endangle = 2 * Math.PI;
        context.beginPath();
        context.arc(centerX, centerY, radius, startangle, endangle, false);
        // context.fillStyle = "green";
        var grd=context.createRadialGradient(centerX, centerY, 20, centerX, centerY, 200);
        grd.addColorStop(0, "black");
        grd.addColorStop(1, "black");
        context.fillStyle = grd;
        context.fill();"#8ED6FF"

///DOGTAIL
context.beginPath(); 3
    context.rect(673, 511,  1,15);
    context.fillStyle = 'brown';
    context.fill();
        context.lineWidth = 5;
    context.strokeStyle = 'brown';                                
context.stroke()

///DOGMOUTH
var centerX = canvas.width / 1.40;
        var centerY = canvas.height / 1.171;
        var radius = 6.8;
        var startangle =3.8;
        var endangle = 0 * Math.PI;
        context.beginPath();
        context.arc(centerX, centerY, radius, startangle, endangle, true);
        context.fillStyle = "red";
        context.fill();
        context.lineWidth = 6;
        context.strokeStyle = "brown";
        context.stroke();

///DOGNOSE
var centerX = canvas.width / 1.425;
        var centerY = canvas.height /1.21;
        var radius = 4;
        var startangle = -55;
        var endangle = 2 * Math.PI;
        context.beginPath();
        context.arc(centerX, centerY, radius, startangle, endangle, false);
        // context.fillStyle = "green";
        var grd=context.createRadialGradient(centerX, centerY, 20, centerX, centerY, 200);
        grd.addColorStop(0, "black");
        grd.addColorStop(1, "pink");
        context.fillStyle = grd;
        context.fill();"#8ED6FF"

///BELT
context.beginPath();
    context.rect(371, 410, 61, .8);
    context.fillStyle = '#20B2AA';
    context.fill();
        context.lineWidth =7;
    context.strokeStyle = '#20B2AA';                                
context.stroke()

///BELTBUCKLE
context.beginPath();
    context.fillStyle = 'cyan';
    context.rect(394, 408,  10, 3)
    context.fill();
        context.lineWidth = 10;
    context.strokeStyle = '#9370DB';                                
context.stroke()

///eyebrow
var centerX = canvas.width / 1.92;
        var centerY = canvas.height / 2.13;
        var radius = 7;
        var startangle =3.2;
        var endangle = 0 * Math.PI;
        context.beginPath();
        context.arc(centerX, centerY, radius, startangle, endangle, false);
        context.fillStyle = "pink";
        context.fill();
        context.lineWidth = 2;
        context.strokeStyle = "#91535B";
        context.stroke();

///eyebrow
var centerX = canvas.width / 2.09;
        var centerY = canvas.height / 2.13;
        var radius = 7;
        var startangle =3.2;
        var endangle = 0 * Math.PI;
        context.beginPath();
        context.arc(centerX, centerY, radius, startangle, endangle, false);
        context.fillStyle = "PINK";
        context.fill();
        context.lineWidth = 2;
        context.strokeStyle = "#91535B";
        context.stroke();

///nose
var centerX = canvas.width / 2.001;
        var centerY = canvas.height / 2.01;
        var radius = 5;
        var startangle =3.1;
        var endangle = 0 * Math.PI;
        context.beginPath();
        context.arc(centerX, centerY, radius, startangle, endangle, false);
        context.fillStyle = "pink";
        context.fill();
        context.lineWidth = 1;
        context.strokeStyle = "black";
        context.stroke();

///dogear
var centerX = canvas.width / 1.34;
        var centerY = canvas.height / 1.26;
        var radius = 9;
        var startangle =3.1;
        var endangle = 0 * Math.PI;
        context.beginPath();
        context.arc(centerX, centerY, radius, startangle, endangle, false);
        context.fillStyle = "brown";
        context.fill();
        context.lineWidth = 3;
        context.strokeStyle = "brown";
        context.stroke();

///dogear
var centerX = canvas.width / 1.31;
        var centerY = canvas.height / 1.23;
        var radius = 9;
        var startangle =3.1;
        var endangle = 0 * Math.PI;
        context.beginPath();
        context.arc(centerX, centerY, radius, startangle, endangle, false);
        context.fillStyle = "brown";
        context.fill();
        context.lineWidth = 3;
        context.strokeStyle = "brown";
        context.stroke();

var x=100;
var y=300;
var x1=300;
var y1=300;
var x2=300;
var y2=300;
var x3=300;
var y3=100; context.beginP$th(); context.moveTo(x,y); context.lineTo(x1,y1); context.lineTo(x2,y2); context.lineTo(x3,y3); context.fillStyle='#8ED6FF'; context.fill(); context.stroke();


};

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

</html>

Comments

Post a Comment