A King Reigns- Canvas Project

My piece is called a "King Reigns". It was originally a phaoraoh picture that I found online. The online picture was way more intricate and detailed than what I could actually pull off appropriately. I wanted to do something of this nature inspired by the late Legend Kobe Bryant. Kobe Bryant is a King that built a Legacy that will literally reign forever, so the purple and gold in my picture is representation of that. The main issues I faced when doing my project was the guess work on creating my lines in a symmetrical manner. The work was quite tedious as I pretty much eyeballed and played around with what I wanted to do until I was satisfied with what I had done. I was a complete overthinker when it came to my layers and likely could've saved a ton of time had I used single lines from one complete side of the head piece to the next. Instead, I used individual lines which made the project just a little more precise. If I would've just used the lines straight through and placed necessary items that needed to go on top of them, using the power of my layers, I could've likely saved time. I would've liked to finish the chin piece with the necessary lines but I wanted to get the project turned in on time. The same thing with the background. I would've liked to put a gradient background behind the headpiece but I was so focused on the many lines and placement of them that I got engulfed with that task. Overall I am happy with the piece and the time investment spent bringing it to life. //////////////////////////////////////////////////////////////////// // >>>START HERE>>>START HERE>>>START HERE>>>START HERE>>>START HERE // this is how you can take local notes in javascript code // the professor said that we need to take notes // face background color yellow context.beginPath(); context.moveTo(400,39); context.quadraticCurveTo(389,39,380,44); context.quadraticCurveTo(367,39,358,47); context.quadraticCurveTo(346,44,338,54); context.quadraticCurveTo(328,52,320,63); context.quadraticCurveTo(311,64,305,72); context.quadraticCurveTo(294,73,288,84); context.lineTo(275,93); context.quadraticCurveTo(264,91,257,96); context.lineTo(256,100); context.quadraticCurveTo(221,167,199,259); context.quadraticCurveTo(190,301,189,330); context.quadraticCurveTo(188,334,194,338); context.quadraticCurveTo(217,349,225,354); context.quadraticCurveTo(258,372,256,419); context.quadraticCurveTo(255,477,278,523); context.quadraticCurveTo(292,555,327,558); context.quadraticCurveTo(338,560,345,553); context.quadraticCurveTo(371,562,400,562); context.closePath(); context.fillStyle = "#e3ac24"; context.fill(); context.beginPath(); context.moveTo(400,39); context.quadraticCurveTo(411,39,420,44); context.quadraticCurveTo(433,39,442,47); context.quadraticCurveTo(454,44,462,54); context.quadraticCurveTo(472,52,480,63); context.quadraticCurveTo(489,64,495,72); context.quadraticCurveTo(506,73,512,84); context.lineTo(525,93); context.quadraticCurveTo(536,91,543,96); context.lineTo(544,100); context.quadraticCurveTo(579,167,601,259); context.quadraticCurveTo(610,301,611,330); context.quadraticCurveTo(612,334,606,338); context.quadraticCurveTo(583,349,575,354); context.quadraticCurveTo(542,372,544,419); context.quadraticCurveTo(545,477,522,523); context.quadraticCurveTo(508,555,473,558); context.quadraticCurveTo(462,560,455,553); context.quadraticCurveTo(429,562,400,562); context.closePath(); context.fillStyle = "#e3ac24"; context.fill(); //purple color fill context.beginPath(); context.moveTo(400,147); context.lineTo(393,147); context.quadraticCurveTo(394,108,380,44); context.quadraticCurveTo(388,40,400,40); context.closePath(); context.fillStyle = "#3f297d"; context.fill(); context.beginPath(); context.moveTo(400,147); context.lineTo(407,147); context.quadraticCurveTo(406,108,420,44); context.quadraticCurveTo(412,40,400,40); context.closePath(); context.fillStyle = "#3f297d"; context.fill(); context.beginPath(); context.moveTo(380,148); context.quadraticCurveTo(377,104,358,47); context.quadraticCurveTo(346,44,338,54); context.quadraticCurveTo(357,89,364,150); context.closePath(); context.fillStyle = "#3f297d"; context.fill(); context.beginPath(); context.moveTo(420,148); context.quadraticCurveTo(423,104,442,47); context.quadraticCurveTo(454,44,462,54); context.quadraticCurveTo(443,89,436,150); context.closePath(); context.fillStyle = "#3f297d"; context.fill(); context.beginPath(); context.moveTo(351,154); context.quadraticCurveTo(341,101,320,63); context.quadraticCurveTo(310,64,306,73); context.quadraticCurveTo(325,102,338,158); context.lineTo(351,154); context.closePath(); context.fillStyle = "#3f297d"; context.fill(); context.beginPath(); context.moveTo(449,154); context.quadraticCurveTo(459,101,480,63); context.quadraticCurveTo(490,64,494,73); context.quadraticCurveTo(475,102,462,158); context.lineTo(449,154); context.closePath(); context.fillStyle = "#3f297d"; context.fill(); context.beginPath(); context.moveTo(328,163); context.quadraticCurveTo(320,122,288,84); context.lineTo(275,93); context.quadraticCurveTo(303,120,318,168); context.lineTo(328,163); context.closePath(); context.fillStyle = "#3f297d"; context.fill(); context.beginPath(); context.moveTo(472,163); context.quadraticCurveTo(480,122,512,84); context.lineTo(525,93); context.quadraticCurveTo(497,120,482,168); context.lineTo(472,163); context.closePath(); context.fillStyle = "#3f297d"; context.fill(); context.beginPath(); context.moveTo(256,100); context.lineTo(248,116); context.quadraticCurveTo(272,116,289,130); context.quadraticCurveTo(279,114,256,100); context.closePath(); context.fillStyle = "#3f297d"; context.fill(); context.beginPath(); context.moveTo(544,100); context.lineTo(552,116); context.quadraticCurveTo(528,116,511,130); context.quadraticCurveTo(521,114,544,100); context.closePath(); context.fillStyle = "#3f297d"; context.fill(); context.beginPath(); context.moveTo(241,130); context.lineTo(234,147); context.quadraticCurveTo(283,138,303,158); context.quadraticCurveTo(298,127,242,130); context.closePath(); context.fillStyle = "#3f297d"; context.fill(); context.beginPath(); context.moveTo(559,130); context.lineTo(566,147); context.quadraticCurveTo(517,138,497,158); context.quadraticCurveTo(502,127,558,130); context.closePath(); context.fillStyle = "#3f297d"; context.fill(); context.beginPath(); context.moveTo(305,165); context.quadraticCurveTo(295,160,289,159); context.quadraticCurveTo(278,156,230,159); context.lineTo(225,171); context.quadraticCurveTo(282,166,307,176); context.lineTo(305,165); context.closePath(); context.fillStyle = "#3f297d"; context.fill(); context.beginPath(); context.moveTo(495,165); context.quadraticCurveTo(505,160,511,159); context.quadraticCurveTo(522,156,570,159); context.lineTo(575,171); context.quadraticCurveTo(518,166,493,176); context.lineTo(495,165); context.closePath(); context.fillStyle = "#3f297d"; context.fill(); context.beginPath(); context.moveTo(288,189); context.lineTo(219,188); context.lineTo(213,204); context.lineTo(284,205); context.quadraticCurveTo(283,195,288,189); context.closePath(); context.fillStyle = "#3f297d"; context.fill(); context.beginPath(); context.moveTo(512,189); context.lineTo(581,188); context.lineTo(587,204); context.lineTo(516,205); context.quadraticCurveTo(517,195,512,189); context.closePath(); context.fillStyle = "#3f297d"; context.fill(); context.beginPath(); context.moveTo(286,222); context.lineTo(208,222); context.lineTo(204,239); context.lineTo(291,239); context.lineTo(286,222); context.closePath(); context.fillStyle = "#3f297d"; context.fill(); context.beginPath(); context.moveTo(514,222); context.lineTo(592,222); context.lineTo(596,239); context.lineTo(509,239); context.lineTo(514,222); context.closePath(); context.fillStyle = "#3f297d"; context.fill(); context.beginPath(); context.moveTo(305,266); context.lineTo(198,266); context.lineTo(200,253); context.lineTo(297,254); context.quadraticCurveTo(301,265,305,266); context.closePath(); context.fillStyle = "#3f297d"; context.fill(); context.beginPath(); context.moveTo(495,266); context.lineTo(602,266); context.lineTo(600,253); context.lineTo(503,254); context.quadraticCurveTo(499,265,495,266); context.closePath(); context.fillStyle = "#3f297d"; context.fill(); context.beginPath(); context.moveTo(312,265); context.lineTo(324,266); context.lineTo(319,250); context.lineTo(312,265); context.closePath(); context.fillStyle = "#3f297d"; context.fill(); context.beginPath(); context.moveTo(488,265); context.lineTo(476,266); context.lineTo(481,250); context.lineTo(488,265); context.closePath(); context.fillStyle = "#3f297d"; context.fill(); context.beginPath(); context.moveTo(327,279); context.lineTo(195,279); context.lineTo(193,293); context.lineTo(332,293); context.lineTo(327,279); context.closePath(); context.fillStyle = "#3f297d"; context.fill(); context.beginPath(); context.moveTo(473,279); context.lineTo(605,279); context.lineTo(607,293); context.lineTo(468,293); context.lineTo(473,279); context.closePath(); context.fillStyle = "#3f297d"; context.fill(); context.beginPath(); context.moveTo(335,307); context.quadraticCurveTo(230,309,191,307); context.lineTo(190,322); context.quadraticCurveTo(302,322,335,317); context.lineTo(335,307); context.closePath(); context.fillStyle = "#3f297d"; context.fill(); context.beginPath(); context.moveTo(465,307); context.quadraticCurveTo(570,309,609,307); context.lineTo(610,322); context.quadraticCurveTo(498,322,465,317); context.lineTo(465,307); context.closePath(); context.fillStyle = "#3f297d"; context.fill(); context.beginPath(); context.moveTo(334,327); context.quadraticCurveTo(298,331,281,331); context.lineTo(189,333); context.quadraticCurveTo(189,337,207,344); context.lineTo(334,339); context.lineTo(334,327); context.closePath(); context.fillStyle = "#3f297d"; context.fill(); context.beginPath(); context.moveTo(466,327); context.quadraticCurveTo(502,331,519,331); context.lineTo(611,333); context.quadraticCurveTo(611,337,593,344); context.lineTo(466,339); context.lineTo(466,327); context.closePath(); context.fillStyle = "#3f297d"; context.fill(); context.beginPath(); context.moveTo(334,350); context.lineTo(225,354); context.lineTo(237,364); context.lineTo(334,360); context.lineTo(334,350); context.closePath(); context.fillStyle = "#3f297d"; context.fill(); context.beginPath(); context.moveTo(466,350); context.lineTo(575,354); context.lineTo(563,364); context.lineTo(466,360); context.lineTo(466,350); context.closePath(); context.fillStyle = "#3f297d"; context.fill(); context.beginPath(); context.moveTo(334,372); context.lineTo(246,375); context.lineTo(250,385); context.lineTo(334,383); context.lineTo(334,372); context.closePath(); context.fillStyle = "#3f297d"; context.fill(); context.beginPath(); context.moveTo(466,372); context.lineTo(554,375); context.lineTo(550,385); context.lineTo(466,383); context.lineTo(466,372); context.closePath(); context.fillStyle = "#3f297d"; context.fill(); context.beginPath(); context.moveTo(334,397); context.lineTo(255,397); context.lineTo(255,410); context.lineTo(334,410); context.lineTo(334,397); context.closePath(); context.fillStyle = "#3f297d"; context.fill(); context.beginPath(); context.moveTo(466,397); context.lineTo(545,397); context.lineTo(545,410); context.lineTo(466,410); context.lineTo(466,397); context.closePath(); context.fillStyle = "#3f297d"; context.fill(); context.beginPath(); context.moveTo(334,421); context.lineTo(256,421); context.lineTo(257,432); context.lineTo(334,432); context.lineTo(334,421); context.closePath(); context.fillStyle = "#3f297d"; context.fill(); context.beginPath(); context.moveTo(466,421); context.lineTo(544,421); context.lineTo(543,432); context.lineTo(466,432); context.lineTo(466,421); context.closePath(); context.fillStyle = "#3f297d"; context.fill(); context.beginPath(); context.moveTo(334,441); context.lineTo(257,443); context.lineTo(258,452); context.lineTo(334,452); context.lineTo(334,441); context.closePath(); context.fillStyle = "#3f297d"; context.fill(); context.beginPath(); context.moveTo(466,441); context.lineTo(543,443); context.lineTo(542,452); context.lineTo(466,452); context.lineTo(466,441); context.closePath(); context.fillStyle = "#3f297d"; context.fill(); context.beginPath(); context.moveTo(334,461); context.lineTo(260,463); context.lineTo(262,473); context.lineTo(334,472); context.lineTo(334,461); context.closePath(); context.fillStyle = "#3f297d"; context.fill(); context.beginPath(); context.moveTo(466,461); context.lineTo(540,463); context.lineTo(538,473); context.lineTo(466,472); context.lineTo(466,461); context.closePath(); context.fillStyle = "#3f297d"; context.fill(); context.beginPath(); context.moveTo(334,481); context.lineTo(264,483); context.lineTo(265,492); context.lineTo(334,490); context.lineTo(334,481); context.closePath(); context.fillStyle = "#3f297d"; context.fill(); context.beginPath(); context.moveTo(466,481); context.lineTo(536,483); context.lineTo(535,492); context.lineTo(466,490); context.lineTo(466,481); context.closePath(); context.fillStyle = "#3f297d"; context.fill(); context.beginPath(); context.moveTo(334,501); context.lineTo(269,501); context.lineTo(273,512); context.lineTo(334,512); context.lineTo(334,501); context.closePath(); context.fillStyle = "#3f297d"; context.fill(); context.beginPath(); context.moveTo(466,501); context.lineTo(531,501); context.lineTo(527,512); context.lineTo(466,512); context.lineTo(466,501); context.closePath(); context.fillStyle = "#3f297d"; context.fill(); context.beginPath(); context.moveTo(334,522); context.lineTo(278,522); context.lineTo(285,533); context.lineTo(334,531); context.lineTo(334,522); context.closePath(); context.fillStyle = "#3f297d"; context.fill(); context.beginPath(); context.moveTo(466,522); context.lineTo(522,522); context.lineTo(515,533); context.lineTo(466,531); context.lineTo(466,522); context.closePath(); context.fillStyle = "#3f297d"; context.fill(); context.beginPath(); context.moveTo(334,540); context.lineTo(291,541); context.lineTo(303,551); context.lineTo(334,551); context.lineTo(334,540); context.closePath(); context.fillStyle = "#3f297d"; context.fill(); context.beginPath(); context.moveTo(466,540); context.lineTo(509,541); context.lineTo(497,551); context.lineTo(466,551); context.lineTo(466,540); context.closePath(); context.fillStyle = "#3f297d"; context.fill(); context.beginPath(); context.moveTo(400,543); context.quadraticCurveTo(373,543,345,531); context.lineTo(345,512); context.quadraticCurveTo(365,525,400,525); context.closePath(); context.fillStyle = "#3f297d"; context.fill(); context.beginPath(); context.moveTo(400,543); context.quadraticCurveTo(427,543,455,531); context.lineTo(455,512); context.quadraticCurveTo(435,525,400,525); context.closePath(); context.fillStyle = "#3f297d"; context.fill(); context.beginPath(); context.moveTo(384,506); context.quadraticCurveTo(364,503,345,492); context.lineTo(345,473); context.quadraticCurveTo(362,484,378,488); context.quadraticCurveTo(373,499,384,506); context.closePath(); context.fillStyle = "#3f297d"; context.fill(); context.beginPath(); context.moveTo(416,506); context.quadraticCurveTo(436,503,455,492); context.lineTo(455,473); context.quadraticCurveTo(438,484,422,488); context.quadraticCurveTo(427,499,416,506); context.closePath(); context.fillStyle = "#3f297d"; context.fill(); context.beginPath(); context.moveTo(379,467); context.quadraticCurveTo(360,465,345,454); context.lineTo(345,435); context.quadraticCurveTo(359,445,379,448); context.lineTo(379,467); context.closePath(); context.fillStyle = "#3f297d"; context.fill(); context.beginPath(); context.moveTo(421,467); context.quadraticCurveTo(440,465,455,454); context.lineTo(455,435); context.quadraticCurveTo(441,445,421,448); context.lineTo(421,467); context.closePath(); context.fillStyle = "#3f297d"; context.fill(); context.beginPath(); context.moveTo(378,421); context.quadraticCurveTo(360,418,345,408); context.lineTo(345,419); context.quadraticCurveTo(360,430,378,431); context.lineTo(378,421); context.closePath(); context.fillStyle = "#3f297d"; context.fill(); context.beginPath(); context.moveTo(422,421); context.quadraticCurveTo(440,418,455,408); context.lineTo(455,419); context.quadraticCurveTo(440,430,422,431); context.lineTo(422,421); context.closePath(); context.fillStyle = "#3f297d"; context.fill(); //line drawing and //outline context.beginPath(); context.moveTo(366,418); context.quadraticCurveTo(358,412,358,402); context.quadraticCurveTo(358,392,360,382); context.quadraticCurveTo(361,378,359,371); context.quadraticCurveTo(352,346,352,326); context.lineTo(344,317); context.lineTo(345,408); context.quadraticCurveTo(360,418,366,418); context.closePath(); context.fillStyle = "black"; context.fill(); context.beginPath(); context.moveTo(434,418); context.quadraticCurveTo(442,412,442,402); context.quadraticCurveTo(442,392,440,382); context.quadraticCurveTo(439,378,441,371); context.quadraticCurveTo(448,346,448,326); context.lineTo(456,317); context.lineTo(455,408); context.quadraticCurveTo(440,418,434,418); context.closePath(); context.fillStyle = "black"; context.fill(); context.beginPath(); context.moveTo(400,39); context.quadraticCurveTo(389,39,380,44); context.quadraticCurveTo(367,39,358,47); context.quadraticCurveTo(346,44,338,54); context.quadraticCurveTo(328,52,320,63); context.quadraticCurveTo(311,64,305,72); context.quadraticCurveTo(294,73,288,84); context.lineTo(275,93); context.quadraticCurveTo(264,91,257,96); context.lineTo(256,100); context.quadraticCurveTo(221,167,199,259); context.quadraticCurveTo(190,301,189,330); context.quadraticCurveTo(188,334,194,338); context.quadraticCurveTo(217,349,225,354); context.quadraticCurveTo(258,372,256,419); context.quadraticCurveTo(255,477,278,523); context.quadraticCurveTo(292,555,327,558); context.quadraticCurveTo(338,560,345,553); context.quadraticCurveTo(371,562,400,562); context.strokeStyle = "black"; context.lineWidth=3; context.stroke(); context.beginPath(); context.moveTo(400,39); context.quadraticCurveTo(411,39,420,44); context.quadraticCurveTo(433,39,442,47); context.quadraticCurveTo(454,44,462,54); context.quadraticCurveTo(472,52,480,63); context.quadraticCurveTo(489,64,495,72); context.quadraticCurveTo(506,73,512,84); context.lineTo(525,93); context.quadraticCurveTo(536,91,543,96); context.lineTo(544,100); context.quadraticCurveTo(579,167,601,259); context.quadraticCurveTo(610,301,611,330); context.quadraticCurveTo(612,334,606,338); context.quadraticCurveTo(583,349,575,354); context.quadraticCurveTo(542,372,544,419); context.quadraticCurveTo(545,477,522,523); context.quadraticCurveTo(508,555,473,558); context.quadraticCurveTo(462,560,455,553); context.quadraticCurveTo(429,562,400,562); context.strokeStyle = "black"; context.lineWidth=3; context.stroke(); //-------line drwing start----------------- //left eye context.beginPath(); // begin a shape context.moveTo(381,227); // point A coordinates context.quadraticCurveTo(374,211,355,212); context.quadraticCurveTo(341,215,332,222); context.quadraticCurveTo(342,235,381,227); context.closePath(); context.strokeStyle = "black"; context.lineWidth = 6; context.stroke(); context.fillStyle = "white"; context.fill(); context.beginPath(); context.moveTo(314,223); context.quadraticCurveTo(320,227,332,222); context.strokeStyle = "black"; context.lineWidth=3; context.stroke(); context.beginPath(); context.moveTo(381,227); context.quadraticCurveTo(377,202,357,203); context.quadraticCurveTo(335,202,332,222); context.quadraticCurveTo(341,235,357,235); context.quadraticCurveTo(368,237,381,227); context.strokeStyle = "black"; context.lineWidth=3; context.stroke(); //right eye context.beginPath(); // begin a shape context.moveTo(418,227); // point A coordinates context.quadraticCurveTo(425,211,444,212); context.quadraticCurveTo(458,215,467,222); context.quadraticCurveTo(457,235,418,227); context.closePath(); context.strokeStyle = "black"; context.lineWidth = 6; context.stroke(); context.fillStyle = "white"; context.fill(); context.beginPath(); context.moveTo(485,223); context.quadraticCurveTo(479,227,467,222); context.strokeStyle = "black"; context.lineWidth=3; context.stroke(); context.beginPath(); context.moveTo(418,227); context.quadraticCurveTo(422,202,442,203); context.quadraticCurveTo(464,202,466,222); context.quadraticCurveTo(457,235,442,235); context.quadraticCurveTo(431,237,418,227); context.strokeStyle = "black"; context.lineWidth=3; context.stroke(); //interior face lines context.beginPath(); context.moveTo(400,147); context.quadraticCurveTo(350,144,307,176); context.quadraticCurveTo(318,287,348,322); context.quadraticCurveTo(367,347,400,347); context.strokeStyle = "black"; context.lineWidth=3; context.stroke(); context.beginPath(); context.moveTo(400,147); context.quadraticCurveTo(450,144,493,176); context.quadraticCurveTo(482,287,452,322); context.quadraticCurveTo(433,347,400,347); context.strokeStyle = "black"; context.lineWidth=3; context.stroke(); context.beginPath(); context.moveTo(310,196); context.quadraticCurveTo(331,166,400,166); context.strokeStyle = "black"; context.lineWidth=3; context.stroke(); context.beginPath(); context.moveTo(490,196); context.quadraticCurveTo(469,166,400,166); context.strokeStyle = "black"; context.lineWidth=3; context.stroke(); context.beginPath(); context.moveTo(327,224); context.quadraticCurveTo(317,242,335,281); context.quadraticCurveTo(350,315,373,331); context.strokeStyle = "black"; context.lineWidth=3; context.stroke(); context.beginPath(); context.moveTo(473,224); context.quadraticCurveTo(483,242,465,281); context.quadraticCurveTo(450,315,427,331); context.strokeStyle = "black"; context.lineWidth=3; context.stroke(); context.beginPath(); context.moveTo(380,343); context.quadraticCurveTo(370,327,364,309); context.lineTo(326,257); context.strokeStyle = "black"; context.lineWidth=3; context.stroke(); context.beginPath(); context.moveTo(420,343); context.quadraticCurveTo(430,327,436,309); context.lineTo(474,257); context.strokeStyle = "black"; context.lineWidth=3; context.stroke(); //lips context.beginPath(); context.moveTo(368,299); context.quadraticCurveTo(389,282,400,296); context.quadraticCurveTo(408,282,432,299); context.quadraticCurveTo(401,333,368,299); context.strokeStyle = "black"; context.lineWidth=3; context.stroke(); context.beginPath(); context.moveTo(368,299); context.quadraticCurveTo(395,303,432,299); context.strokeStyle = "black"; context.lineWidth=3; context.stroke(); //nose context.beginPath(); context.moveTo(393,291); context.lineTo(397,279); context.lineTo(392,274); context.lineTo(386,275); context.quadraticCurveTo(376,276,380,266); context.quadraticCurveTo(409,217,372,189); context.quadraticCurveTo(344,172,322,203); context.quadraticCurveTo(318,208,324,205); context.quadraticCurveTo(335,195,356,193); context.quadraticCurveTo(366,192,374,195); context.quadraticCurveTo(376,196,380,196); context.strokeStyle = "black"; context.lineWidth=3; context.stroke(); context.beginPath(); context.moveTo(407,291); context.lineTo(403,279); context.lineTo(408,274); context.lineTo(414,275); context.quadraticCurveTo(424,276,420,266); context.quadraticCurveTo(391,217,428,189); context.quadraticCurveTo(456,172,478,203); context.quadraticCurveTo(482,208,476,205); context.quadraticCurveTo(465,195,444,193); context.quadraticCurveTo(434,192,426,195); context.quadraticCurveTo(424,196,420,196); context.strokeStyle = "black"; context.lineWidth=3; context.stroke(); //mouth lines context.beginPath(); context.moveTo(397,279); context.lineTo(400,279); context.strokeStyle = "black"; context.lineWidth=3; context.stroke(); context.beginPath(); context.moveTo(403,279); context.lineTo(400,279); context.strokeStyle = "black"; context.lineWidth=3; context.stroke(); // headpiece lines context.beginPath(); context.moveTo(310,196); context.quadraticCurveTo(302,186,295,186); context.quadraticCurveTo(277,184,287,224); context.quadraticCurveTo(291,241,300,260); context.quadraticCurveTo(308,286,319,251); context.strokeStyle = "black"; context.lineWidth=3; context.stroke(); context.beginPath(); context.moveTo(490,196); context.quadraticCurveTo(498,186,505,186); context.quadraticCurveTo(523,184,513,224); context.quadraticCurveTo(509,241,500,260); context.quadraticCurveTo(492,286,481,251); context.strokeStyle = "black"; context.lineWidth=3; context.stroke(); context.beginPath(); context.moveTo(314,225); context.quadraticCurveTo(308,225,310,237); context.quadraticCurveTo(315,257,302,264); context.strokeStyle = "black"; context.lineWidth=3; context.stroke(); context.beginPath(); context.moveTo(486,225); context.quadraticCurveTo(492,225,490,237); context.quadraticCurveTo(485,257,498,264); context.strokeStyle = "black"; context.lineWidth=3; context.stroke(); context.beginPath(); context.moveTo(285,195); context.quadraticCurveTo(292,192,297,195); context.quadraticCurveTo(304,200,312,213); context.strokeStyle = "black"; context.lineWidth=3; context.stroke(); context.beginPath(); context.moveTo(515,195); context.quadraticCurveTo(508,192,503,195); context.quadraticCurveTo(496,200,488,213); context.strokeStyle = "black"; context.lineWidth=3; context.stroke(); context.beginPath(); context.moveTo(294,194); context.quadraticCurveTo(289,206,292,215); context.quadraticCurveTo(301,230,297,252); context.strokeStyle = "black"; context.lineWidth=3; context.stroke(); context.beginPath(); context.moveTo(506,194); context.quadraticCurveTo(511,206,508,215); context.quadraticCurveTo(499,230,503,252); context.strokeStyle = "black"; context.lineWidth=3; context.stroke(); context.beginPath(); context.moveTo(293,215); context.quadraticCurveTo(298,206,308,207); context.strokeStyle = "black"; context.lineWidth=3; context.stroke(); context.beginPath(); context.moveTo(507,215); context.quadraticCurveTo(502,206,492,207); context.strokeStyle = "black"; context.lineWidth=3; context.stroke(); context.beginPath(); context.moveTo(345,554); context.lineTo(345,317); context.strokeStyle = "black"; context.lineWidth=3; context.stroke(); context.beginPath(); context.moveTo(455,554); context.lineTo(455,317); context.strokeStyle = "black"; context.lineWidth=3; context.stroke(); context.beginPath(); context.moveTo(333,558); context.lineTo(335,300); context.strokeStyle = "black"; context.lineWidth=3; context.stroke(); context.beginPath(); context.moveTo(467,558); context.lineTo(465,300); context.strokeStyle = "black"; context.lineWidth=3; context.stroke(); context.beginPath(); context.moveTo(393,147); context.quadraticCurveTo(394,108,380,44); context.strokeStyle = "black"; context.lineWidth=3; context.stroke(); context.beginPath(); context.moveTo(407,147); context.quadraticCurveTo(406,108,420,44); context.strokeStyle = "black"; context.lineWidth=3; context.stroke(); context.beginPath(); context.moveTo(380,148); context.quadraticCurveTo(377,104,358,47); context.strokeStyle = "black"; context.lineWidth=3; context.stroke(); context.beginPath(); context.moveTo(420,148); context.quadraticCurveTo(423,104,442,47); context.strokeStyle = "black"; context.lineWidth=3; context.stroke(); context.beginPath(); context.moveTo(338,54); context.quadraticCurveTo(357,89,364,150); context.strokeStyle = "black"; context.lineWidth=3; context.stroke(); context.beginPath(); context.moveTo(462,54); context.quadraticCurveTo(443,89,436,150); context.strokeStyle = "black"; context.lineWidth=3; context.stroke(); context.beginPath(); context.moveTo(351,154); context.quadraticCurveTo(341,101,320,63); context.strokeStyle = "black"; context.lineWidth=3; context.stroke(); context.beginPath(); context.moveTo(449,154); context.quadraticCurveTo(459,101,480,63); context.strokeStyle = "black"; context.lineWidth=3; context.stroke(); context.beginPath(); context.moveTo(306,73); context.quadraticCurveTo(325,102,338,158); context.strokeStyle = "black"; context.lineWidth=3; context.stroke(); context.beginPath(); context.moveTo(494,73); context.quadraticCurveTo(475,102,462,158); context.strokeStyle = "black"; context.lineWidth=3; context.stroke(); context.beginPath(); context.moveTo(328,163); context.quadraticCurveTo(320,122,288,84); context.strokeStyle = "black"; context.lineWidth=3; context.stroke(); context.beginPath(); context.moveTo(472,163); context.quadraticCurveTo(480,122,512,84); context.strokeStyle = "black"; context.lineWidth=3; context.stroke(); context.beginPath(); context.moveTo(275,93); context.quadraticCurveTo(303,120,318,168); context.strokeStyle = "black"; context.lineWidth=3; context.stroke(); context.beginPath(); context.moveTo(525,93); context.quadraticCurveTo(497,120,482,168); context.strokeStyle = "black"; context.lineWidth=3; context.stroke(); context.beginPath(); context.moveTo(307,175); context.quadraticCurveTo(302,126,256,100); context.strokeStyle = "black"; context.lineWidth=3; context.stroke(); context.beginPath(); context.moveTo(493,175); context.quadraticCurveTo(498,126,544,100); context.strokeStyle = "black"; context.lineWidth=3; context.stroke(); context.beginPath(); context.moveTo(248,116); context.quadraticCurveTo(277,116,290,130); context.strokeStyle = "black"; context.lineWidth=3; context.stroke(); context.beginPath(); context.moveTo(552,116); context.quadraticCurveTo(528,116,510,130); context.strokeStyle = "black"; context.lineWidth=3; context.stroke(); context.beginPath(); context.moveTo(234,147); context.quadraticCurveTo(283,138,303,158); context.strokeStyle = "black"; context.lineWidth=3; context.stroke(); context.beginPath(); context.moveTo(566,147); context.quadraticCurveTo(517,138,497,158); context.strokeStyle = "black"; context.lineWidth=3; context.stroke(); context.beginPath(); context.moveTo(303,158); context.quadraticCurveTo(298,127,242,130); context.strokeStyle = "black"; context.lineWidth=3; context.stroke(); context.beginPath(); context.moveTo(497,158); context.quadraticCurveTo(502,127,558,130); context.strokeStyle = "black"; context.lineWidth=3; context.stroke(); context.beginPath(); context.moveTo(305,165); context.quadraticCurveTo(295,160,289,159); context.quadraticCurveTo(278,156,230,159); context.strokeStyle = "black"; context.lineWidth=3; context.stroke(); context.beginPath(); context.moveTo(495,165); context.quadraticCurveTo(505,160,511,159); context.quadraticCurveTo(522,156,570,159); context.strokeStyle = "black"; context.lineWidth=3; context.stroke(); context.beginPath(); context.moveTo(288,189); context.lineTo(219,188); context.strokeStyle = "black"; context.lineWidth=3; context.stroke(); context.beginPath(); context.moveTo(512,189); context.lineTo(581,188); context.strokeStyle = "black"; context.lineWidth=3; context.stroke(); context.beginPath(); context.moveTo(225,171); context.quadraticCurveTo(282,166,307,176); context.strokeStyle = "black"; context.lineWidth=3; context.stroke(); context.beginPath(); context.moveTo(575,171); context.quadraticCurveTo(518,166,493,176); context.strokeStyle = "black"; context.lineWidth=3; context.stroke(); context.beginPath(); context.moveTo(213,204); context.lineTo(284,205); context.strokeStyle = "black"; context.lineWidth=3; context.stroke(); context.beginPath(); context.moveTo(587,204); context.lineTo(516,205); context.strokeStyle = "black"; context.lineWidth=3; context.stroke(); context.beginPath(); context.moveTo(286,222); context.lineTo(208,222); context.strokeStyle = "black"; context.lineWidth=3; context.stroke(); context.beginPath(); context.moveTo(514,222); context.lineTo(592,222); context.strokeStyle = "black"; context.lineWidth=3; context.stroke(); context.beginPath(); context.moveTo(204,239); context.lineTo(291,239); context.strokeStyle = "black"; context.lineWidth=3; context.stroke(); context.beginPath(); context.moveTo(596,239); context.lineTo(509,239); context.strokeStyle = "black"; context.lineWidth=3; context.stroke(); context.beginPath(); context.moveTo(304,266); context.lineTo(198,266); context.strokeStyle = "black"; context.lineWidth=3; context.stroke(); context.beginPath(); context.moveTo(496,266); context.lineTo(602,266); context.strokeStyle = "black"; context.lineWidth=3; context.stroke(); context.beginPath(); context.moveTo(200,253); context.lineTo(297,254); context.strokeStyle = "black"; context.lineWidth=3; context.stroke(); context.beginPath(); context.moveTo(600,253); context.lineTo(503,254); context.strokeStyle = "black"; context.lineWidth=3; context.stroke(); context.beginPath(); context.moveTo(312,266); context.lineTo(323,266); context.strokeStyle = "black"; context.lineWidth=3; context.stroke(); context.beginPath(); context.moveTo(488,266); context.lineTo(477,266); context.strokeStyle = "black"; context.lineWidth=3; context.stroke(); context.beginPath(); context.moveTo(327,279); context.lineTo(195,279); context.strokeStyle = "black"; context.lineWidth=3; context.stroke(); context.beginPath(); context.moveTo(473,279); context.lineTo(605,279); context.strokeStyle = "black"; context.lineWidth=3; context.stroke(); context.beginPath(); context.moveTo(193,293); context.lineTo(332,293); context.strokeStyle = "black"; context.lineWidth=3; context.stroke(); context.beginPath(); context.moveTo(607,293); context.lineTo(468,293); context.strokeStyle = "black"; context.lineWidth=3; context.stroke(); context.beginPath(); context.moveTo(335,307); context.quadraticCurveTo(230,309,191,307); context.strokeStyle = "black"; context.lineWidth=3; context.stroke(); context.beginPath(); context.moveTo(465,307); context.quadraticCurveTo(570,309,609,307); context.strokeStyle = "black"; context.lineWidth=3; context.stroke(); context.beginPath(); context.moveTo(190,322); context.quadraticCurveTo(302,322,335,317); context.strokeStyle = "black"; context.lineWidth=3; context.stroke(); context.beginPath(); context.moveTo(610,322); context.quadraticCurveTo(498,322,465,317); context.strokeStyle = "black"; context.lineWidth=3; context.stroke(); context.beginPath(); context.moveTo(334,327); context.quadraticCurveTo(298,331,281,331); context.lineTo(189,333); context.strokeStyle = "black"; context.lineWidth=3; context.stroke(); context.beginPath(); context.moveTo(466,327); context.quadraticCurveTo(502,331,519,331); context.lineTo(611,333); context.strokeStyle = "black"; context.lineWidth=3; context.stroke(); context.beginPath(); context.moveTo(207,344); context.lineTo(334,339); context.strokeStyle = "black"; context.lineWidth=3; context.stroke(); context.beginPath(); context.moveTo(593,344); context.lineTo(466,339); context.strokeStyle = "black"; context.lineWidth=3; context.stroke(); context.beginPath(); context.moveTo(237,364); context.lineTo(334,360); context.strokeStyle = "black"; context.lineWidth=3; context.stroke(); context.beginPath(); context.moveTo(563,364); context.lineTo(466,360); context.strokeStyle = "black"; context.lineWidth=3; context.stroke(); context.beginPath(); context.moveTo(334,350); context.lineTo(225,354); context.strokeStyle = "black"; context.lineWidth=3; context.stroke(); context.beginPath(); context.moveTo(466,350); context.lineTo(575,354); context.strokeStyle = "black"; context.lineWidth=3; context.stroke(); context.beginPath(); context.moveTo(334,372); context.lineTo(246,375); context.strokeStyle = "black"; context.lineWidth=3; context.stroke(); context.beginPath(); context.moveTo(466,372); context.lineTo(554,375); context.strokeStyle = "black"; context.lineWidth=3; context.stroke(); context.beginPath(); context.moveTo(250,385); context.lineTo(334,383); context.strokeStyle = "black"; context.lineWidth=3; context.stroke(); context.beginPath(); context.moveTo(550,385); context.lineTo(466,383); context.strokeStyle = "black"; context.lineWidth=3; context.stroke(); context.beginPath(); context.moveTo(334,397); context.lineTo(255,397); context.strokeStyle = "black"; context.lineWidth=3; context.stroke(); context.beginPath(); context.moveTo(466,397); context.lineTo(545,397); context.strokeStyle = "black"; context.lineWidth=3; context.stroke(); context.beginPath(); context.moveTo(255,410); context.lineTo(334,410); context.strokeStyle = "black"; context.lineWidth=3; context.stroke(); context.beginPath(); context.moveTo(545,410); context.lineTo(466,410); context.strokeStyle = "black"; context.lineWidth=3; context.stroke(); context.beginPath(); context.moveTo(334,421); context.lineTo(256,421); context.strokeStyle = "black"; context.lineWidth=3; context.stroke(); context.beginPath(); context.moveTo(466,421); context.lineTo(544,421); context.strokeStyle = "black"; context.lineWidth=3; context.stroke(); context.beginPath(); context.moveTo(257,432); context.lineTo(334,432); context.strokeStyle = "black"; context.lineWidth=3; context.stroke(); context.beginPath(); context.moveTo(543,432); context.lineTo(466,432); context.strokeStyle = "black"; context.lineWidth=3; context.stroke(); context.beginPath(); context.moveTo(334,441); context.lineTo(257,443); context.strokeStyle = "black"; context.lineWidth=3; context.stroke(); context.beginPath(); context.moveTo(466,441); context.lineTo(543,443); context.strokeStyle = "black"; context.lineWidth=3; context.stroke(); context.beginPath(); context.moveTo(258,452); context.lineTo(334,452); context.strokeStyle = "black"; context.lineWidth=3; context.stroke(); context.beginPath(); context.moveTo(542,452); context.lineTo(466,452); context.strokeStyle = "black"; context.lineWidth=3; context.stroke(); context.beginPath(); context.moveTo(334,461); context.lineTo(260,463); context.strokeStyle = "black"; context.lineWidth=3; context.stroke(); context.beginPath(); context.moveTo(466,461); context.lineTo(540,463); context.strokeStyle = "black"; context.lineWidth=3; context.stroke(); context.beginPath(); context.moveTo(262,473); context.lineTo(334,472); context.strokeStyle = "black"; context.lineWidth=3; context.stroke(); context.beginPath(); context.moveTo(538,473); context.lineTo(466,472); context.strokeStyle = "black"; context.lineWidth=3; context.stroke(); context.beginPath(); context.moveTo(334,481); context.lineTo(264,483); context.strokeStyle = "black"; context.lineWidth=3; context.stroke(); context.beginPath(); context.moveTo(466,481); context.lineTo(536,483); context.strokeStyle = "black"; context.lineWidth=3; context.stroke(); context.beginPath(); context.moveTo(265,492); context.lineTo(334,490); context.strokeStyle = "black"; context.lineWidth=3; context.stroke(); context.beginPath(); context.moveTo(535,492); context.lineTo(466,490); context.strokeStyle = "black"; context.lineWidth=3; context.stroke(); context.beginPath(); context.moveTo(333,501); context.lineTo(269,501); context.strokeStyle = "black"; context.lineWidth=3; context.stroke(); context.beginPath(); context.moveTo(467,501); context.lineTo(531,501); context.strokeStyle = "black"; context.lineWidth=3; context.stroke(); context.beginPath(); context.moveTo(273,512); context.lineTo(334,512); context.strokeStyle = "black"; context.lineWidth=3; context.stroke(); context.beginPath(); context.moveTo(527,512); context.lineTo(466,512); context.strokeStyle = "black"; context.lineWidth=3; context.stroke(); context.beginPath(); context.moveTo(334,522); context.lineTo(278,522); context.strokeStyle = "black"; context.lineWidth=3; context.stroke(); context.beginPath(); context.moveTo(466,522); context.lineTo(522,522); context.strokeStyle = "black"; context.lineWidth=3; context.stroke(); context.beginPath(); context.moveTo(285,533); context.lineTo(334,531); context.strokeStyle = "black"; context.lineWidth=3; context.stroke(); context.beginPath(); context.moveTo(515,533); context.lineTo(466,531); context.strokeStyle = "black"; context.lineWidth=3; context.stroke(); context.beginPath(); context.moveTo(334,540); context.lineTo(291,541); context.strokeStyle = "black"; context.lineWidth=3; context.stroke(); context.beginPath(); context.moveTo(466,540); context.lineTo(509,541); context.strokeStyle = "black"; context.lineWidth=3; context.stroke(); context.beginPath(); context.moveTo(303,551); context.lineTo(334,551); context.strokeStyle = "black"; context.lineWidth=3; context.stroke(); context.beginPath(); context.moveTo(497,551); context.lineTo(466,551); context.strokeStyle = "black"; context.lineWidth=3; context.stroke(); context.beginPath(); context.moveTo(400,543); context.quadraticCurveTo(373,543,345,531); context.strokeStyle = "black"; context.lineWidth=3; context.stroke(); context.beginPath(); context.moveTo(400,543); context.quadraticCurveTo(427,543,455,531); context.strokeStyle = "black"; context.lineWidth=3; context.stroke(); context.beginPath(); context.moveTo(345,512); context.quadraticCurveTo(365,525,400,525); context.strokeStyle = "black"; context.lineWidth=3; context.stroke(); context.beginPath(); context.moveTo(455,512); context.quadraticCurveTo(435,525,400,525); context.strokeStyle = "black"; context.lineWidth=3; context.stroke(); context.beginPath(); context.moveTo(400,510); context.quadraticCurveTo(377,510,377,493); context.quadraticCurveTo(377,475,400,475); context.strokeStyle = "black"; context.lineWidth=3; context.stroke(); context.beginPath(); context.moveTo(400,510); context.quadraticCurveTo(423,510,423,493); context.quadraticCurveTo(423,475,400,475); context.strokeStyle = "black"; context.lineWidth=3; context.stroke(); context.beginPath(); context.moveTo(370,339); context.quadraticCurveTo(370,356,400,356); context.strokeStyle = "black"; context.lineWidth=3; context.stroke(); context.beginPath(); context.moveTo(430,339); context.quadraticCurveTo(430,356,400,356); context.strokeStyle = "black"; context.lineWidth=3; context.stroke(); //bottom center lines context.beginPath(); context.moveTo(384,506); context.quadraticCurveTo(364,503,345,492); context.strokeStyle = "black"; context.lineWidth=3; context.stroke(); context.beginPath(); context.moveTo(416,506); context.quadraticCurveTo(436,503,455,492); context.strokeStyle = "black"; context.lineWidth=3; context.stroke(); context.beginPath(); context.moveTo(345,473); context.quadraticCurveTo(362,484,378,488); context.strokeStyle = "black"; context.lineWidth=3; context.stroke(); context.beginPath(); context.moveTo(455,473); context.quadraticCurveTo(438,484,422,488); context.strokeStyle = "black"; context.lineWidth=3; context.stroke(); context.beginPath(); context.moveTo(379,467); context.quadraticCurveTo(360,465,345,454); context.strokeStyle = "black"; context.lineWidth=3; context.stroke(); context.beginPath(); context.moveTo(421,467); context.quadraticCurveTo(440,465,455,454); context.strokeStyle = "black"; context.lineWidth=3; context.stroke(); context.beginPath(); context.moveTo(345,435); context.quadraticCurveTo(359,445,379,448); context.strokeStyle = "black"; context.lineWidth=3; context.stroke(); context.beginPath(); context.moveTo(455,435); context.quadraticCurveTo(441,445,421,448); context.strokeStyle = "black"; context.lineWidth=3; context.stroke(); context.beginPath(); context.moveTo(378,421); context.quadraticCurveTo(360,418,345,408); context.strokeStyle = "black"; context.lineWidth=3; context.stroke(); context.beginPath(); context.moveTo(422,421); context.quadraticCurveTo(440,418,455,408); context.strokeStyle = "black"; context.lineWidth=3; context.stroke(); context.beginPath(); context.moveTo(345,419); context.quadraticCurveTo(360,430,378,431); context.strokeStyle = "black"; context.lineWidth=3; context.stroke(); context.beginPath(); context.moveTo(455,419); context.quadraticCurveTo(440,430,422,431); context.strokeStyle = "black"; context.lineWidth=3; context.stroke(); //outline of chin piece context.beginPath(); context.moveTo(375,349); context.lineTo(380,484); context.strokeStyle = "black"; context.lineWidth=3; context.stroke(); context.beginPath(); context.moveTo(425,349); context.lineTo(420,484); context.strokeStyle = "black"; context.lineWidth=3; context.stroke(); // <<