Canvas


 Agent P Final Canvas Assignment

Time it took: about 16-17 hours

There was a lot of detail in the project. It took a lot of time, effort, and replacing of coordinates, but I am very happy with the outcome. 


// Background

var cirgrad = context.createRadialGradient(492,514,10,243,287,350);

cirgrad.addColorStop(0,"rgba(176,176,176,1.00)");

cirgrad.addColorStop(0.25,"rgba(126,126,126,1.00)");

cirgrad.addColorStop(0.50,"rgba(87,87,87,1.00)");

cirgrad.addColorStop(0.75,"rgba(54,54,54,1.00)");

cirgrad.addColorStop(1,"rgba(0,0,0,1.00)");

context.beginPath();

context.rect(0,0,canvas.width,canvas.height);

context.closePath();

context.fillStyle = cirgrad;

context.fill();

context.stroke();

//Tail

context.beginPath();

context.moveTo(368,366);

context.quadraticCurveTo(563,255,671,343);

context.bezierCurveTo(625,421,526,601,501,750);

context.closePath();

context.fillStyle = "rgba(255,155,78,1.00)"

context.fill();

context.strokeStyle = "rgba(153,67,0,1.00)";

context.lineWidth = 3;

context.stroke();

//Tail Detail

context.beginPath();

context.moveTo(668,349);

context.quadraticCurveTo(606,338,514,368);

context.quadraticCurveTo(606,338,668,349);

context.moveTo(612,450);

context.quadraticCurveTo(595,430,515,366);

context.quadraticCurveTo(605,440,612,450);

context.quadraticCurveTo(570,437,477,479);

context.quadraticCurveTo(569,437,612,450);

context.moveTo(549,595);

context.quadraticCurveTo(536,565,478,488);

context.quadraticCurveTo(523,544,549,595);

context.quadraticCurveTo(525,592,497,600);

context.quadraticCurveTo(526,592,549,595);

context.closePath();

context.fillStyle = "orange"

context.fill();

context.strokeStyle = "rgba(153,67,0,1.00)";

context.lineWidth = 1.5;

context.stroke();


//Left Arm 

context.beginPath();

context.moveTo(258,413);

context.bezierCurveTo(266,614,264,615,112,641);

context.bezierCurveTo(110,643,108,646,98,648);

context.bezierCurveTo(87,647,82,645,83,626);

context.bezierCurveTo(83,643,77,644,68,642);

context.bezierCurveTo(56,635,53,631,52,618);

context.bezierCurveTo(49,613,47,607,53,594);

context.bezierCurveTo(52,581,49,580,58,564);

context.bezierCurveTo(70,561,100,564,108,571);

context.bezierCurveTo(112,584,115,610,114,616);

context.bezierCurveTo(181,600,201,586,205,573);

context.bezierCurveTo(217,538,224,484,224,435);

context.bezierCurveTo(227,413,250,414,260,413);

context.moveTo(50,612);

context.bezierCurveTo(62,626,65,626,85,625);

context.bezierCurveTo(67,627,64,626,51,612);

context.moveTo(53,589);

context.bezierCurveTo(54,595,56,599,76,603);

context.bezierCurveTo(62,601,54,597,53,589);

context.moveTo(71,577);

context.bezierCurveTo(77,578,77,578,83,581);

context.bezierCurveTo(78,578,78,578,71,577);

context.moveTo(108,627);

context.bezierCurveTo(92,633,89,620,89,620);

context.bezierCurveTo(94,633,108,627,108,627);

context.moveTo(95,599);

context.bezierCurveTo(91,632,73,638,74,597);

context.bezierCurveTo(79,579,83,575,100,579);

context.bezierCurveTo(61,565,72,650,91,617);

context.closePath();

context.fillStyle = "rgba(0,171,167,1.00)"

context.fill();

context.strokeStyle = "black";

context.lineWidth = 3;

context.stroke();

 

//Right Arm

context.beginPath();

context.moveTo(368,332);

context.lineTo(416,329);

context.bezierCurveTo(682,416,566,476,501,552);

context.lineTo(479,541);

context.bezierCurveTo(471,546,469,546,477,539);

context.bezierCurveTo(483,543,484,556,472,555);

context.bezierCurveTo(466,556,454,541,453,538);

context.bezierCurveTo(453,531,452,533,465,512);

context.quadraticCurveTo(453,534,448,534);

context.bezierCurveTo(445,532,444,533,442,532);

context.bezierCurveTo(435,530,429,527,421,510);

context.bezierCurveTo(425,498,428,511,443,531);

context.bezierCurveTo(434,515,433,519,451,496);

context.quadraticCurveTo(433,525,428,505);

context.bezierCurveTo(429,500,430,490,459,467);

context.bezierCurveTo(477,483,503,520,502,519);

context.bezierCurveTo(523,490,517,498,527,476)

context.bezierCurveTo(519,488,545,449,521,436);

context.bezierCurveTo(479,412,461,407,365,409);

context.closePath();

context.fillStyle = "rgba(0,171,167,1.00)"

context.fill();

context.strokeStyle = "black";

context.lineWidth = 3;

context.stroke();

//Body

context.beginPath();

context.moveTo(500,701);

context.bezierCurveTo(511,477,406,279,339,112);

context.bezierCurveTo(240,110,182,96,140,244);

context.bezierCurveTo(146,262,146,262,156,286);

context.bezierCurveTo(271,562,273,540,267,701);

context.closePath();

context.fillStyle = "rgba(0,171,167,1.00)"

context.fill();

context.strokeStyle = "black";

context.lineWidth = 3;

context.stroke();

//Right Arm, over Body

context.beginPath();

context.moveTo(412,329);


context.bezierCurveTo(682,416,566,476,501,552);

context.bezierCurveTo(493,553,494,555,479,541);


context.lineTo(479,541);

context.bezierCurveTo(471,546,469,546,477,539);

context.bezierCurveTo(483,543,483,550,472,555);

context.bezierCurveTo(466,556,454,541,453,538);

context.bezierCurveTo(453,531,452,533,465,512);

context.quadraticCurveTo(453,534,448,534);

context.bezierCurveTo(445,532,444,533,447,534);

context.bezierCurveTo(435,530,429,527,421,510);

context.bezierCurveTo(420,507,421,504,429,500);

context.bezierCurveTo(425,498,428,511,443,531);

context.bezierCurveTo(434,515,437,522,453,496);

context.bezierCurveTo(455,499,453,497,441,514);

context.quadraticCurveTo(433,525,428,505);

context.bezierCurveTo(429,500,430,490,459,467);

context.bezierCurveTo(475,478,489,496,502,519);

context.bezierCurveTo(523,490,517,498,527,476);

context.bezierCurveTo(519,488,545,449,521,436);

context.bezierCurveTo(479,412,461,407,439,410);

context.closePath();

context.fillStyle = "rgba(0,171,167,1.00)"

context.fill();

context.strokeStyle = "black";

context.lineWidth = 3;

context.stroke();

//Color Corrections

context.beginPath();

context.moveTo(410,324);

context.lineTo(442,420);

context.moveTo(493,545);

context.lineTo(479,495);

context.moveTo(483,500);

context.lineTo(473,488);

context.moveTo(492,543);

context.lineTo(483,538);

context.moveTo(489,541);

context.lineTo(482,510);

context.moveTo(426,338);

context.lineTo(442,344);

context.moveTo(433,342);

context.lineTo(456,407);

context.moveTo(231,464);

context.lineTo(240,489);

context.closePath();

context.strokeStyle = "rgba(0,171,167,1.00)";

context.lineWidth = 6;

context.stroke();


//part 2

context.beginPath();

context.moveTo(286,268);

context.lineTo(286,233);

context.closePath();

context.strokeStyle = "rgba(255,255,255,1.00)";

context.lineWidth = 6;

context.stroke();

//Hat

//Right, Under Part of Hat

context.beginPath();

context.moveTo(462,74);

context.bezierCurveTo(451,135,406,191,377,205);

context.bezierCurveTo(412,190,448,130,462,74);

context.bezierCurveTo(419,80,381,123,91,285);

context.bezierCurveTo(396,158,337,138,380,204);

context.bezierCurveTo(424,175,454,123,462,74);

context.closePath();

context.fillStyle = "rgba(75,42,42,1.00)"

context.fill();

context.strokeStyle = "black";

context.lineWidth = 3;

context.stroke();

//Left Part of Hat

context.beginPath();

context.lineTo(307,170);

context.bezierCurveTo(379,105,355,127,249,222);

context.bezierCurveTo(155,286,66,318,29,306);

context.bezierCurveTo(77,285,107,262,136,224);

context.bezierCurveTo(205,188,249,175,307,170);

context.closePath();

context.fillStyle = "rgba(97,63,63,1.00)"

context.fill();

context.strokeStyle = "black";

context.lineWidth = 3;

context.stroke();

//Top of Hat

context.beginPath();

context.moveTo(125,184);

context.bezierCurveTo(120,160,116,152,126,77);

context.quadraticCurveTo(169,55,271,103);

context.moveTo(252,94);

context.bezierCurveTo(318,47,304,56,351,134);

context.bezierCurveTo(301,120,175,148,125,184);

context.bezierCurveTo(116,143,121,105,127,77);

context.bezierCurveTo(156,63,191,71,252,94);

context.closePath();

context.fillStyle = "rgba(95,61,61,1.00)"

context.fill();

context.strokeStyle = "black";

context.lineWidth = 3;

context.stroke();

//Strip of Hat

context.beginPath();

context.moveTo(388,152);

context.bezierCurveTo(326,171,314,174,249,221);

context.quadraticCurveTo(332,164,367,159);

context.moveTo(310,168);

context.bezierCurveTo(321,158,321,158,354,131);

context.bezierCurveTo(272,125,172,149,127,184);

context.bezierCurveTo(126,183,116,154,134,225);

context.bezierCurveTo(199,189,227,181,309,168);

context.closePath();

context.fillStyle = "rgba(0,0,0,1.00)"

context.fill();

context.strokeStyle = "black";

context.lineWidth = 3;

context.stroke();

//Beak

context.beginPath();

context.lineTo(217,287);

context.bezierCurveTo(217,286,217,286,218,284);

context.bezierCurveTo(231,282,224,282,265,308);

context.bezierCurveTo(271,312,275,310,285,312);

context.bezierCurveTo(333,318,334,318,347,341);

context.quadraticCurveTo(347,341,347,341);

context.quadraticCurveTo(346,346,348,343);

context.bezierCurveTo(324,393,244,404,193,400);

context.quadraticCurveTo(107,443,184,407);

context.bezierCurveTo(274,348,261,354,328,342);

context.bezierCurveTo(264,351,268,352,169,413);

context.quadraticCurveTo(96,449,93,431);

context.bezierCurveTo(96,398,142,367,231,339);

context.bezierCurveTo(248,337,247,338,230,340);

context.closePath();

context.fillStyle = "rgba(255,149,18,1.00)"

context.fill();

context.strokeStyle = "rgba(153,67,0,1.00)";

context.lineWidth = 3;

context.stroke();

//Right Eye

//Right Sclera

context.beginPath();

context.moveTo(230,261);

context.quadraticCurveTo(296,194,347,185);

context.quadraticCurveTo(299,193,231,260);

context.quadraticCurveTo(225,267,223,246);

context.quadraticCurveTo(224,259,228,261);

context.moveTo(244,249);

context.bezierCurveTo(244,273,247,272,272,275);

context.bezierCurveTo(290,273,286,273,301,267);

context.bezierCurveTo(301,267,303,265,305,264);

context.bezierCurveTo(360,227,355,206,329,190);

context.bezierCurveTo(305,199,293,206,244,247);

context.closePath();

context.fillStyle = "rgba(255,255,255,1.00)"

context.fill();

context.strokeStyle = "black";

context.lineWidth = 3;

context.stroke(); 

//Right Iris

context.beginPath();

context.moveTo(282,215);

context.bezierCurveTo(279,222,283,230,289,231);

context.bezierCurveTo(319,234,323,213,314,198);

context.closePath();

context.fillStyle = "rgba(0,0,0,1.00)"

context.fill();

context.strokeStyle = "black";

context.lineWidth = 3;

context.stroke();

//Right Pupil

context.beginPath();

context.moveTo(286,215);

context.bezierCurveTo(280,216,286,225,296,220);

context.bezierCurveTo(299,217,300,217,294,208);

context.closePath();

context.fillStyle = "rgba(255,255,255,1)"

context.fill();

context.strokeStyle = "black"

context.lineWidth = 3;

context.stroke();

//Left Eye

//Left Brow Wrinkle


context.beginPath();

context.moveTo(206,251);


context.bezierCurveTo(206,259,204,254,212,269);

context.moveTo(147,282);

context.bezierCurveTo(121,301,134,333,174,328);

context.bezierCurveTo(215,319,220,286,214,267);

context.moveTo(216,267);

context.lineTo(215,269);

context.quadraticCurveTo(212,238,216,267);


context.moveTo(147,282);

context.lineTo(215,268);

context.closePath();

context.strokeStyle = "black"

context.lineWidth = 3;

context.stroke();

//Left Sclera

context.beginPath();

context.moveTo(147,282);

context.bezierCurveTo(121,301,134,333,174,328);

context.bezierCurveTo(215,319,220,286,214,267);

context.moveTo(156,278);

context.lineTo(213,267);

context.closePath();


context.fillStyle = "rgba(255,255,255,1)"

context.fill();

context.strokeStyle = "black"

context.lineWidth = 3;

context.stroke();

//Left Iris

context.beginPath();

context.moveTo(171,276);

context.bezierCurveTo(170,277,169,285,171,286);

context.bezierCurveTo(173,296,211,296,180,283);

context.bezierCurveTo(193,303,202,286,202,269);

context.closePath();

context.fillStyle = "rgba(0,0,0,1.00)"

context.fill();

context.strokeStyle = "black"

context.lineWidth = 3;

context.stroke();

//Left Pupil

context.beginPath();

context.moveTo(172,275);

context.bezierCurveTo(171,286,184,286,185,273);

context.closePath();

context.fillStyle = "rgba(255,255,255,1)"

context.fill();

context.strokeStyle = "black"

context.lineWidth = 3;

context.stroke();

Comments

Post a Comment

Popular posts from this blog

Multiplicity

Image
 This project was very interesting to do. We were instructed to take 6 pictures of us in different positions within the same setting (without moving the camera!) Not going to lie, it took me three different times to do this. I ended up doing the one with me in the bathroom at Starbucks. I liked it best because it was the most "extravagant" place I did.This project took me about 1 1/2 days to create. I really enjoyed this project, and was super fun to make a photo with 6 of me. My grandma really like it too lol!
Read more