Assignment #3 | HTML South Park Portrait

<!DOCTYPE HTML>

<html>

<head>

window.onload = function() {

var canvas = document.getElementById("myCanvas");

var context = canvas.getContext("2d");

////////////////////////////////////// start below this line ˇˇˇˇˇˇˇˇˇˇ

//// SEA ////

var x = 0;

var y = 0;

var width = 800;

var height = 600;

context.beginPath();

context.rect(x,y,width,height);

context.fillStyle = '#009DFE';

context.fill();

//// SKY ////

var x = 0;

var y = 0;

var width = 800;

var height = 300;

context.beginPath();

context.rect(x,y,width,height);

context.fillStyle = '#99cdff';

context.fill();

/// SAND GRADIEN ////

var x = 0;

var y = 350;

var width = 800;

var height = 600;

context.beginPath();

context.rect(x,y,width,height);

context.fillStyle = 'green';

// add linear gradient

var grd = context.createLinearGradient(250, 360, 350, 350);

// light blue

grd.addColorStop(0, "#FFFDCA");

// dark blue

grd.addColorStop(1, "#FFCD9B");

context.fillStyle = grd;

context.fill();

//// LEG LEFT START ////

var x = 350

var y = 520;

var width = 100;

var height = 30;

context.beginPath();

context.rect(x,y,width,height);

context.fillStyle = '#F4C095';

context.fill();

context.lineWidth = 3;

context.strokeStyle = "black";

context.stroke();

context.beginPath();

context.moveTo(400, 550);

context.lineTo(400, 520);

context.lineWidth = 3;

context.strokeStyle = "black";

context.stroke();

//// LEG LEFT END ///

//// HAIR LONG ////

var centerX = canvas.width / 2;

var centerY = canvas.height / 2;

var radius = 153;

context.beginPath();

context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);

context.fillStyle = "#533E2D";

context.fill();

context.lineWidth = 3;

context.strokeStyle = "black";

context.stroke();

//// ARM RIGHT ////

var centerX = canvas.width /1.9;

var centerY = canvas.height / 1.38;

var radius = 50;

var startangle = 0.5 * Math.PI;

var endangle = 1.5 * Math.PI;

context.beginPath();

context.arc(centerX, centerY, radius, startangle, endangle, true);

context.fillStyle = "#F4C095";

context.fill();

context.lineWidth = 3;

context.strokeStyle = "black";

context.stroke();

//// ARM RIGHT ////

//// DRESS START ////

var x = 300;

var y = 520;

var x1 = 400;

var y1 = 300;

var x2 = 500;

var y2 = 520;

var x3 = 300;

var y3 = 520;

context.beginPath();

context.moveTo(x, y);

context.lineTo(x1, y1);

context.lineTo(x2, y2);

context.lineTo(x3, y3);

context.fillStyle = '#F6D55C';

context.fill();

context.lineWidth = 3;

context.strokeStyle = "#FFFFF";

context.stroke();

//// DRESS END ////

//// HEAD START ////

var centerX = canvas.width / 2;

var centerY = canvas.height / 2;

var radius = 100;

context.beginPath();

context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);

context.fillStyle = "#F4C095";

context.fill();

context.lineWidth = 3;

context.strokeStyle = "#FFFff";

context.stroke();

//// HEAD END ////

//// TALLO ////

context.beginPath();

context.moveTo(370, 450);

context.lineTo(330, 385);

context.lineWidth = 8;

context.strokeStyle = '#47B39D';

context.lineCap = "round";

context.stroke();

//// EYES RIGHT START ////

var centerX = canvas.width /1.85;

var centerY = canvas.height / 2;

var radius = 40;

context.beginPath();

context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);

context.fillStyle = "#FFFFFF";

context.fill();

//// EYES RIGHT END ////

//// EYES LEFT START ////

var centerX = canvas.width / 2.14;

var centerY = canvas.height / 2;

var radius = 40;

context.beginPath();

context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);

context.fillStyle = "#FFFFFF";

context.fill();

//// EYES LEFT END ////

//// EYES PIXEL RIGHT START ////

var centerX = canvas.width /1.93;

var centerY = canvas.height / 2;

var radius = 5;

context.beginPath();

context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);

context.fillStyle = "#000000";

context.fill();

//// EYES RIGHT PIXEL END ////

//// EYES PIXEL LEFT START ////

var centerX = canvas.width /2.1;

var centerY = canvas.height / 2;

var radius = 5;

context.beginPath();

context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);

context.fillStyle = "#000000";

context.fill();

//// EYES LEFT PIXEL END ////

//// GLASES RIGHT START ////

var centerX = canvas.width /1.80;

var centerY = canvas.height / 2;

var radius = 40;

context.beginPath();

context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);

context.lineWidth = 3;

context.strokeStyle = 'rgb(0, 0, 0)';

context.stroke();

//// GLASES RIGHT END ////

//// GLASES LEFT START ////

var centerX = canvas.width /2.20;

var centerY = canvas.height / 2;

var radius = 40;

context.beginPath();

context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);

context.lineWidth = 3;

context.strokeStyle = 'rgb(0, 0, 0)';

context.stroke();

//// GLASES LEFT END ////

//// SHOE LEFT START ////

var centerX = canvas.width / 2.15

var centerY = canvas.height / 1.09;

var radius = 25;

var startangle = 0;

var endangle = 1 * Math.PI;

context.beginPath();

context.arc(centerX, centerY, radius, startangle, endangle, true);

context.fillStyle = "#ED6B56";

context.fill();

context.lineWidth = 3;

context.strokeStyle = "black";

context.stroke();

/// SHOE LEFT END ////

//// SHOE RIGHT START ////

var centerX = canvas.width / 1.87

var centerY = canvas.height / 1.09;

var radius = 25;

var startangle = 0;

var endangle = 1 * Math.PI;

context.beginPath();

context.arc(centerX, centerY, radius, startangle, endangle, true);

context.fillStyle = "#ED6B56";

context.fill();

context.lineWidth = 3;

context.strokeStyle = "black";

context.stroke();

//// SHOE RIGHT END ////

//// DRESS OPEN NECK ////

var centerX = canvas.width / 2;

var centerY = canvas.height / 1.51;

var radius = 20;

var startangle = Math.PI;

var endangle = 2 * Math.PI;

context.beginPath();

context.arc(centerX, centerY, radius, startangle, endangle, true);

context.fillStyle = "#F4C095";

context.fill();

context.lineWidth = 3;

context.strokeStyle = "black";

context.stroke();

//// DRESS OPEN NECK ////

//// MOUTH ////

var centerX = canvas.width / 2;

var centerY = canvas.height / 1.68;

var radius = 20;

var startangle = Math.PI;

var endangle = 2.3 * Math.PI;

context.beginPath();

context.arc(centerX, centerY, radius, startangle, endangle, true);

context.lineWidth = 3;

context.strokeStyle = "black";

context.stroke();

//// MOUTH ////

//// FINGER START ////

var centerX = canvas.width / 2.2;

var centerY = canvas.height / 1.49;

var radius = 15;

context.beginPath();

context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);

context.fillStyle = "#F4C095";

context.fill();

context.lineWidth = 3;

context.strokeStyle = "#FFFff";

context.stroke();

//// FINGER END ////

//// HAND START ////

var centerX = canvas.width / 2.3;

var centerY = canvas.height / 1.42;

var radius = 30;

context.beginPath();

context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);

context.fillStyle = "#F4C095";

context.fill();

context.lineWidth = 3;

context.strokeStyle = "#FFFff";

context.stroke();

//// FINGER END ////

//// OREJA RIGH ////

var centerX = canvas.width / 1.61;

var centerY = canvas.height / 1.99;

var radius = 15;

var startangle = 0.5 * Math.PI;

var endangle = 1.5 * Math.PI;

context.beginPath();

context.arc(centerX, centerY, radius, startangle, endangle, true);

context.fillStyle = "#F4C095";

context.fill();

context.lineWidth = 3;

context.strokeStyle = "black";

context.stroke();

//// OREJA LEFT////

var centerX = canvas.width / 2.64;

var centerY = canvas.height / 1.99;

var radius = 15;

var startangle = 0.5 * Math.PI;

var endangle = 1.5 * Math.PI;

context.beginPath();

context.arc(centerX, centerY, radius, startangle, endangle, false);

context.fillStyle = "#F4C095";

context.fill();

context.lineWidth = 3;

context.strokeStyle = "black";

context.stroke();

//// GLASES LINE RIGHT ////

context.beginPath();

context.moveTo(485, 300);

context.lineTo(500, 285);

context.stroke();

//// GLASES LINE LEFT ////

context.beginPath();

context.moveTo(325, 300);

context.lineTo(300, 285);

context.stroke();

//// HAIR FRONT LEFT///

var centerX = canvas.width / 2.6;

var centerY = canvas.height / 2.9;

var radius = 80;

var startangle = 0.53 * Math.PI;

var endangle = 1.97 * Math.PI;

context.beginPath();

context.arc(centerX, centerY, radius, startangle, endangle, true);

context.fillStyle = "#533E2D";

context.fill();

context.lineWidth = 3;

context.strokeStyle = "black";

context.stroke();

//// HAIR FRONT RIGHT ///

var centerX = canvas.width / 1.70;

var centerY = canvas.height / 2.90;

var radius = 83;

var startangle = 0.40 * Math.PI;

var endangle = 1 * Math.PI;

context.beginPath();

context.arc(centerX, centerY, radius, startangle, endangle, false);

context.fillStyle = "#533E2D";

context.fill();

context.lineWidth = 3;

context.strokeStyle = "black";

context.stroke();

//// HAIR BACK ////

var centerX = canvas.width / 1.65;

var centerY = canvas.height / 2.42;

var radius = 40;

var startangle = 0.60 * Math.PI;

var endangle = 1.20 * Math.PI;

context.beginPath();

context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);

context.fillStyle = "#533E2D";

context.fill();

//// HAIR BACK ////

var centerX = canvas.width / 1.85;

var centerY = canvas.height / 2.90;

var radius = 45;

var startangle = 0.60 * Math.PI;

var endangle = 1.20 * Math.PI;

context.beginPath();

context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);

context.fillStyle = "#533E2D";

context.fill();

//// HAIR BACK ////

var centerX = canvas.width / 2.59;

var centerY = canvas.height / 2.45;

var radius = 40;

var startangle = 0.60 * Math.PI;

var endangle = 1.20 * Math.PI;

context.beginPath();

context.arc(centerX, centerY, radius, 0, 2 * Math.PI, true);

context.fillStyle = "#533E2D";

context.fill();

//// HAIR BACK ////

var centerX = canvas.width / 2.33;

var centerY = canvas.height / 2.9;

var radius = 43;

var startangle = 0.60 * Math.PI;

var endangle = 1.20 * Math.PI;

context.beginPath();

context.arc(centerX, centerY, radius, 0, 2 * Math.PI, true);

context.fillStyle = "#533E2D";

context.fill();

/// ICE CREAM ////

var centerX = canvas.width / 2.5;

var centerY = canvas.height / 1.65;

var radius = 25;

context.beginPath();

context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);

context.fillStyle = "#FF3E41";

context.fill();

context.lineWidth = 3;

//// PASTO ////

var centerX = canvas.width / 1;

var centerY = canvas.height / 1.5;

var radius = 70;

var startangle = 0.60 * Math.PI;

var endangle = 1.20 * Math.PI;

context.beginPath();

context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);

context.fillStyle = "#3C6B0D";

context.fill();

//// PASTO ////

var centerX = canvas.width / 1;

var centerY = canvas.height / 1.80;

var radius = 45;

var startangle = 0.60 * Math.PI;

var endangle = 1.20 * Math.PI;

context.beginPath();

context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);

context.fillStyle = "#3C6B0D";

context.fill();

var centerX = canvas.width / 1;

var centerY = canvas.height / 1.30;

var radius = 80;

var startangle = 0.60 * Math.PI;

var endangle = 1.20 * Math.PI;

context.beginPath();

context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);

context.fillStyle = "#3C6B0D";

context.fill();

var centerX = canvas.width / 1;

var centerY = canvas.height / 1.10;

var radius = 95;

var startangle = 0.60 * Math.PI;

var endangle = 1.20 * Math.PI;

context.beginPath();

context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);

context.fillStyle = "#3C6B0D";

context.fill();

////////////////////////////////////////////////////

};

</script>

</head>

<body>

</body>

</html>

Search This Blog

Portfolio Moraleja

Assignment #3 | HTML South Park Portrait

Assignment #3 | HTML South Park Portrait

Comments

Post a Comment

Popular posts from this blog

Assignment #4 | Minimal Movie Poster

Assignment #8.1 | Composition