Here is the finished product of my Canvas project. I struggled a lot in the beginning, to understand how to use it, but after hours of practice, I finally felt comfortable with using code to draw this! I want to send a positive message to all the beautiful Black queens out there!
var mygrad = context.createLinearGradient (100,100, mouseX, mouseY);
mygrad.addColorStop(0, "rgba(235,0,255,1.00)");
mygrad.addColorStop(0.25, "rgba(255,0,236,1.00)");
mygrad.addColorStop(0.5, "rgba(191,0,255,1.00)");
mygrad.addColorStop(0.75, "rgba(191,0,255,1.00)");
mygrad.addColorStop(1, "rgba(255,0,223,1.00)");
context.beginPath();
context.rect(0,0,640,640);
context.closePath();
context.fillStyle = mygrad;
context.fill();
// HAIR
//context.drawImage(img1, 0, 0, 640, 640);
var hairgrd = context.createRadialGradient(333,356,50,333,356,150)
hairgrd.addColorStop(0, "rgba(0,0,0,1.00)");
hairgrd.addColorStop(0.5, "rgba(11,11,11,1.00)");
hairgrd.addColorStop(1, "rgba(12,12,11,1.00)");
context.beginPath();
context.moveTo(170, 1)
context.bezierCurveTo(170, 1, 157, 8, 152, 20)
context.bezierCurveTo(152, 20, 110, 10, 100, 47)
context.bezierCurveTo(100, 47, 45, 39, 38, 90)
context.bezierCurveTo(38, 90, 14, 78, 0, 107)
context.bezierCurveTo(2, 420, 2, 430, 2, 435)
context.bezierCurveTo(4, 440, 5, 445, 7, 448)
context.bezierCurveTo(10, 452, 12, 454, 14, 457)
context.bezierCurveTo(22, 464, 33, 469, 46, 468) // leads to left arm
context.bezierCurveTo(110, 518, 116, 532, 142, 533)
context.bezierCurveTo(160, 549, 181, 542, 183, 542)
context.bezierCurveTo(203, 556, 217, 554, 222, 556) // across left side of shirt
context.bezierCurveTo(243, 574, 264, 566, 274, 547)
context.bezierCurveTo(290, 552, 300, 537, 300, 537)
context.bezierCurveTo(321, 552, 340, 540, 382, 539)
context.bezierCurveTo(386, 555, 414, 550, 414, 550)
context.bezierCurveTo(436, 575, 456, 548, 456, 548)
context.bezierCurveTo(478, 568, 502, 543, 502, 543)
context.bezierCurveTo(534, 555, 542, 531, 542, 531)
context.bezierCurveTo(566, 534, 572, 511, 572, 511)
context.bezierCurveTo(616, 518, 642, 473, 642, 473)
context.bezierCurveTo(641, 79, 641, 79, 641, 79)
context.bezierCurveTo(638, 75, 629, 76, 619, 79)
context.bezierCurveTo(595, 37, 571, 52, 571, 52)
context.bezierCurveTo(555, 1, 508, 19, 508, 19)
context.bezierCurveTo(509, 13, 508, 11, 501, 1)
context.lineWidth = 3;
context.fillStyle = hairgrd;
context.fill();
context.strokeStyle = "rgba(12,12,11,1.00)";
context.stroke();
/// Crown lines
context.beginPath();
context.moveTo(225, 261)
context.lineTo(169, 207)
context.lineWidth = 2;
context.strokeStyle = 'rgba(245,174,8,1.00)';
context.stroke();
context.beginPath();
context.moveTo(218, 267);
context.lineTo(182, 225);
context.lineWidth = 2;
context.strokeStyle = 'rgba(245,174,8,1.00)';
context.stroke();
context.beginPath();
context.moveTo(234, 252);
context.lineTo(178, 207)
context.lineWidth = 2;
context.strokeStyle = 'rgba(245,174,8,1.00)';
context.stroke();
context.beginPath();
context.moveTo(249, 247);
context.lineTo(181, 140)
context.lineWidth = 2;
context.strokeStyle = 'rgba(245,174,8,1.00)';
context.stroke();
context.beginPath();
context.moveTo(243, 217);
context.lineTo(186, 146)
context.lineWidth = 2;
context.strokeStyle = 'rgba(245,174,8,1.00)';
context.stroke();
context.beginPath();
context.moveTo(261, 237);
context.lineTo(239, 158)
context.lineWidth = 2;
context.strokeStyle = 'rgba(245,174,8,1.00)';
context.stroke();
context.beginPath();
context.moveTo(277, 229);
context.lineTo(235, 130)
context.lineWidth = 2;
context.strokeStyle = 'rgba(245,174,8,1.00)';
context.stroke();
context.beginPath();
context.moveTo(290, 221)
context.lineTo(241, 129)
context.lineWidth = 2;
context.strokeStyle = 'rgba(245,174,8,1.00)';
context.stroke();
context.beginPath();
context.moveTo(283, 186);
context.lineTo(275, 103);
context.lineWidth = 2;
context.strokeStyle = 'rgba(245,174,8,1.00)';
context.stroke();
context.beginPath();
context.moveTo(310, 188);
context.lineTo(308, 92)
context.lineWidth = 2;
context.strokeStyle = 'rgba(245,174,8,1.00)';
context.stroke();
context.beginPath();
context.moveTo(310, 181);
context.lineTo(281, 100)
context.lineWidth = 2;
context.strokeStyle = 'rgba(245,174,8,1.00)';
context.stroke();
context.beginPath();
context.moveTo(278, 96);
context.lineTo(306, 221)
context.lineWidth = 2;
context.strokeStyle = 'rgba(245,174,8,1.00)';
context.stroke();
context.beginPath();
context.moveTo(323, 215);
context.lineTo(310, 129)
context.lineWidth = 2;
context.strokeStyle = 'rgba(245,174,8,1.00)';
context.stroke();
context.beginPath();
context.moveTo(334, 208);
context.lineTo(308, 92);
context.lineWidth = 2;
context.strokeStyle = 'rgba(245,174,8,1.00)';
context.stroke();
context.beginPath();
context.moveTo(344, 208);
context.lineTo(311, 99)
context.lineWidth = 2;
context.strokeStyle = 'rgba(245,174,8,1.00)';
context.stroke();
context.beginPath();
context.moveTo(349, 176);
context.lineTo(355, 73)
context.lineWidth = 2;
context.strokeStyle = 'rgba(245,174,8,1.00)';
context.stroke();
context.beginPath();
context.moveTo(363, 204);
context.lineTo(355, 65)
context.lineWidth = 2;
context.strokeStyle = 'rgba(245,174,8,1.00)';
context.stroke();
context.beginPath();
context.moveTo(376, 163);
context.lineTo(357, 67)
context.lineWidth = 2;
context.strokeStyle = 'rgba(245,174,8,1.00)';
context.stroke();
context.beginPath();
context.moveTo(380, 202);
context.lineTo(393, 122)
context.lineWidth = 2;
context.strokeStyle = 'rgba(245,174,8,1.00)';
context.stroke();
context.beginPath();
context.moveTo(388, 202);
context.lineTo(399, 96)
context.lineWidth = 2;
context.strokeStyle = 'rgba(245,174,8,1.00)';
context.stroke();
context.beginPath();
context.moveTo(398, 203);
context.lineTo(399, 92)
context.lineWidth = 2;
context.strokeStyle = 'rgba(245,174,8,1.00)';
context.stroke();
context.beginPath();
context.moveTo(412, 171);
context.lineTo(430, 111)
context.lineWidth = 2;
context.strokeStyle = 'rgba(245,174,8,1.00)';
context.stroke();
context.beginPath();
context.moveTo(420, 197);
context.lineTo(437, 95)
context.lineWidth = 2;
context.strokeStyle = 'rgba(245,174,8,1.00)';
context.stroke();
context.beginPath();
context.moveTo(438, 167);
context.lineTo(442, 82)
context.lineWidth = 2;
context.strokeStyle = 'rgba(245,174,8,1.00)';
context.stroke();
context.beginPath();
context.moveTo(427, 204);
context.lineTo(454, 153)
context.lineWidth = 2;
context.strokeStyle = 'rgba(245,174,8,1.00)';
context.stroke();
context.beginPath();
context.moveTo(444, 207);
context.lineTo(468, 133)
context.lineWidth = 2;
context.strokeStyle = 'rgba(245,174,8,1.00)';
context.stroke();
context.beginPath();
context.moveTo(457, 207);
context.lineTo(468, 130)
context.lineWidth = 2;
context.strokeStyle = 'rgba(245,174,8,1.00)';
context.stroke();
context.beginPath();
context.moveTo(221,281)
context.bezierCurveTo(245, 260, 258, 249,282, 235)
context.bezierCurveTo(308, 222, 323, 217, 337, 213)
context.bezierCurveTo(353, 211, 374, 210, 389, 209)
context.bezierCurveTo(407, 212, 409, 210, 424, 214)
context.bezierCurveTo(438, 216, 450, 218, 470, 221)
context.bezierCurveTo(473, 206, 472, 206, 463, 207)
context.bezierCurveTo(415, 201, 391, 199, 372, 199)
context.bezierCurveTo(350, 201, 334, 204, 318, 209)
context.bezierCurveTo(305, 213, 295, 219, 281, 225)
context.bezierCurveTo(257, 239, 245, 247, 234, 254)
context.bezierCurveTo(223, 261, 215, 267, 210, 271)
context.bezierCurveTo(213, 274, 216, 277, 222, 282)
context.lineWidth = 3;
context.fillStyle = "rgba(190,118,0,1.00)";
context.fill();
context.strokeStyle = "rgba(190,118,0,1.00)";
context.stroke();
/// back crowm #1
context.beginPath();
context.moveTo(242, 208)
context.lineTo(176, 131)
context.lineTo(229, 236)
context.lineTo(199, 213)
context.lineTo(157, 101)
context.lineTo(236, 170)
context.closePath();
context.lineWidth = 1.7;
context.fillStyle = "rgba(190,118,0,1.00)";
context.fill();
context.strokeStyle = "rgba(190,118,0,1.00)";
context.stroke();
/// back crown #2
context.beginPath();
context.moveTo(308, 156)
context.lineTo(275, 89)
context.lineTo(276,168)
context.lineTo(265, 151)
context.lineTo(267,48)
context.lineTo(307, 125)
context.closePath();
context.lineWidth = 1.7;
context.fillStyle = "rgba(190,118,0,1.00)";
context.fill();
context.strokeStyle = "rgba(190,118,0,1.00)";
context.stroke();
///back crown #3
context.beginPath();
context.moveTo(383, 141)
context.lineTo(356, 64)
context.lineTo(337, 145)
context.lineTo(329, 127)
context.lineTo(355, 38)
context.lineTo(388, 121)
context.closePath();
context.lineWidth = 1.7;
context.fillStyle = "rgba(190,118,0,1.00)";
context.fill();
context.strokeStyle = "rgba(190,118,0,1.00)";
context.stroke();
//back crown #4
context.beginPath();
context.moveTo(452, 149)
context.lineTo(446, 78)
context.lineTo(412, 156)
context.lineTo(409, 127)
context.lineTo (449, 52)
context.lineTo(461, 138)
context.closePath();
context.lineWidth = 1.7;
context.fillStyle = "rgba(190,118,0,1.00)";
context.fill();
context.strokeStyle = "rgba(190,118,0,1.00)";
//front crown #1
context.beginPath();
context.moveTo(210, 271)
context.lineTo(125, 159)
context.lineTo(244, 247)
context.lineTo(236, 252)
context.lineTo(161, 195)
context.lineTo(214, 266)
context.closePath();
context.lineWidth = 1.7;
context.fillStyle = "rgba(190,118,0,1.00)";
context.fill();
context.strokeStyle = "rgba(190,118,0,1.00)";
//front crown #2
context.beginPath();
context.moveTo(297, 217)
context.lineTo(235, 123)
context.lineTo(256, 238)
context.lineTo(247, 246)
context.lineTo(224, 89)
context.lineTo(305, 213)
context.closePath();
context.lineWidth = 1.7;
context.fillStyle = "rgba(190,118,0,1.00)";
context.fill();
context.strokeStyle = "rgba(190,118,0,1.00)";
//front crown #3
context.beginPath();
context.moveTo(352, 202)
context.lineTo(308, 96)
context.lineTo(319, 208)
context.lineTo(308, 211)
context.lineTo(302, 67)
context.lineTo(362, 202)
context.closePath();
context.lineWidth = 1.7;
context.fillStyle = "rgba(190,118,0,1.00)";
context.fill();
context.strokeStyle = "rgba(190,118,0,1.00)";
//front of crown#4
context.beginPath();
context.moveTo(405, 200)
context.lineTo(401, 96)
context.lineTo(374, 198)
context.lineTo(365, 198)
context.lineTo(406, 56)
context.lineTo(415, 200)
context.closePath();
context.lineWidth = 1.7;
context.fillStyle = "rgba(190,118,0,1.00)";
context.fill();
context.strokeStyle = "rgba(190,118,0,1.00)";
context.beginPath();
context.moveTo(464,206)
context.lineTo(474,124)
context.lineTo(424, 201)
context.lineTo(416, 201)
context.lineTo(489, 83)
context.lineTo(471, 208)
context.closePath();
context.lineWidth = 1.7;
context.fillStyle = "rgba(190,118,0,1.00)";
context.fill();
context.strokeStyle = "rgba(190,118,0,1.00)";
context.stroke();
//left lower arm
var rightarmgrd = context.createRadialGradient(333,356,50,333,356,150)
rightarmgrd.addColorStop(0, "rgba(180,94,18,1.00)");
rightarmgrd.addColorStop(0.41, "rgba(151,79,14,1.00)");
rightarmgrd.addColorStop(0.70, "rgba(151,77,10,1.00)");
rightarmgrd.addColorStop(1, "rgba(150,84,25,1.00)");
context.beginPath();
context.lineTo(97, 583)
context.lineTo(0, 583)
context.lineTo(0, 641)
context.lineTo(97, 641)
context.closePath();
context.fillStyle = rightarmgrd
context.fill();
//context.strokeStyle = "rgba(99,37,4,1.00)";
//context.stroke();
//left behind finger
context.beginPath();
context.moveTo(114, 209)
context.bezierCurveTo(110, 209, 106, 210, 109, 214)
context.bezierCurveTo(110, 218, 113, 221, 114, 225)
context.bezierCurveTo(115, 218,115, 214, 114, 211)
context.closePath();
context.lineWidth = 2;
context.fillStyle = rightarmgrd
context.fill();
context.strokeStyle = 'rgba(99,37,4,1.00)';
context.stroke();
/// left arm
var rightarmgrd = context.createRadialGradient(333,356,50,333,356,150)
rightarmgrd.addColorStop(0, "rgba(180,94,18,1.00)");
rightarmgrd.addColorStop(0.41, "rgba(151,79,14,1.00)");
rightarmgrd.addColorStop(0.70, "rgba(151,77,10,1.00)");
rightarmgrd.addColorStop(1, "rgba(150,84,25,1.00)");
context.beginPath();
context.moveTo(0, 545)
context.bezierCurveTo(3, 541, 5, 538, 10, 530)
context.bezierCurveTo(12, 527, 15, 522, 17, 520)
context.bezierCurveTo(24, 509, 29, 502, 34, 494)
context.bezierCurveTo(38, 488, 44, 480, 48, 474)
context.bezierCurveTo(65, 449, 70, 442, 78, 431)
context.bezierCurveTo(88, 416, 97, 404, 105, 392)
context.bezierCurveTo(123, 365, 134, 348, 140, 336)
context.bezierCurveTo(144, 324, 142, 317, 139, 313)
context.bezierCurveTo(135, 308,132, 304, 129, 301)
context.bezierCurveTo(127, 299, 117, 286, 101, 268)
context.bezierCurveTo(96, 262, 92, 257, 90, 246)
context.bezierCurveTo(88, 235, 85, 228, 83, 221)
context.bezierCurveTo(83, 217, 86, 213, 89, 212)
context.bezierCurveTo(87, 202, 84, 197, 86, 190)
context.bezierCurveTo(87, 180, 88, 174, 89, 164)
context.bezierCurveTo(90, 157, 91, 153, 91, 148)
context.bezierCurveTo(92, 145, 94, 145, 96, 148)
context.bezierCurveTo(96, 154, 97, 157, 98, 166)
/// curve
context.bezierCurveTo(98, 174, 98, 178, 98, 181)
context.bezierCurveTo(98, 186, 98, 190, 99, 193)
context.bezierCurveTo(98, 198, 100, 200, 102, 204)
context.bezierCurveTo(106, 212, 107, 213, 110, 219)
context.bezierCurveTo(117, 232, 116, 219, 115, 214)
context.bezierCurveTo(114, 208, 113, 203, 111, 198)
context.bezierCurveTo(113, 187, 113, 178, 114, 173)
context.bezierCurveTo(114, 160, 117, 154, 118, 148)
context.bezierCurveTo(118, 143, 119, 142, 121, 143)
context.bezierCurveTo(122, 149, 123, 154, 123, 158)
context.bezierCurveTo(124, 165, 124, 170, 123, 175)
context.bezierCurveTo(124, 182, 125, 186, 125, 189)
context.bezierCurveTo(125, 196, 126, 201, 129, 207)
context.bezierCurveTo(131, 215, 134, 219, 136, 223)
context.bezierCurveTo(139, 229, 143, 232, 144, 227)
context.bezierCurveTo(145, 221, 147, 212, 147, 206)
context.bezierCurveTo(150, 196, 155, 190, 156, 185)
context.bezierCurveTo(157, 183, 160, 178, 163, 173)
context.bezierCurveTo(165, 173, 166, 173, 166, 176)
context.bezierCurveTo(164, 182, 163, 188, 162, 192)
context.bezierCurveTo(161, 196, 160, 201, 160, 206)
context.bezierCurveTo(158, 214, 159, 218, 158, 221)
context.bezierCurveTo(158, 230, 159, 234, 159, 238)
context.bezierCurveTo(163, 243, 167, 245, 170, 248)
context.bezierCurveTo(175, 253, 180, 259, 187, 267)
context.bezierCurveTo(192, 276, 197, 285, 199, 293)
context.bezierCurveTo(199, 308, 199, 312, 195, 320)
context.bezierCurveTo(192, 328, 186, 338, 183, 348)
context.bezierCurveTo(179, 357, 176, 365, 171, 374)
context.bezierCurveTo(165, 387, 151, 419, 137, 448)
context.bezierCurveTo(127, 468, 121, 482, 113, 498)
context.bezierCurveTo(99, 525, 91, 538, 67, 582)
context.bezierCurveTo(51, 611, 49, 617, 0, 633)
context.bezierCurveTo(0, 633, 0, 598, 0, 537 )
context.closePath();
context.lineWidth = 2;
context.fillStyle = rightarmgrd
context.fill();
//context.strokeStyle = 'rgba(109,54,4,1.00)';
//context.stroke();
//middle finger
context.beginPath();
context.moveTo(136, 309)
context.bezierCurveTo(130, 309, 123, 305, 114, 296)
context.bezierCurveTo(111, 292, 109, 287, 106, 276)
context.closePath();
context.lineWidth = 2;
context.fillStyle = rightarmgrd
context.fill();
context.strokeStyle = 'rgba(99,37,4,1.00)';
context.stroke();
context.beginPath();
context.moveTo(89, 211)
context.bezierCurveTo(92, 226, 96, 232, 101, 242)
context.bezierCurveTo(104, 248, 106, 251, 108, 254)
context.lineWidth = 2;
context.strokeStyle = 'rgba(99,37,4,1.00)';
context.stroke();
context.beginPath();
context.moveTo(115, 224)
context.bezierCurveTo(118, 231, 120, 239, 122, 244)
context.bezierCurveTo(123, 245, 125, 249, 127, 253)
context.lineWidth = 2;
context.strokeStyle = 'rgba(99,37,4,1.00)';
context.stroke();
context.beginPath();
context.moveTo(142, 229)
context.bezierCurveTo(143, 236, 144, 246, 148, 251)
context.lineWidth = 2;
context.strokeStyle = 'rgba(99,37,4,1.00)';
context.stroke();
//nails
context.beginPath();
context.moveTo(163, 185)
context.bezierCurveTo(160, 186, 156.5, 185, 159, 182)
context.bezierCurveTo(159, 181, 161, 178, 161, 177)
context.bezierCurveTo(164, 170, 165, 174, 166, 177)
context.bezierCurveTo(165, 181, 164, 181, 163, 185)
context.lineWidth = 1.8
//context.strokeStyle = 'rgba(174,0,232,1.00)';
//context.stroke();
context.fillStyle = "rgba(174,0,232,1.00)";
context.fill();
context.beginPath();
context.moveTo(120, 160)
context.bezierCurveTo(120, 159, 120, 159, 119, 160)
context.bezierCurveTo(118, 163, 116, 160, 117, 155)
context.bezierCurveTo(117, 153, 118, 143, 121, 142)
context.bezierCurveTo(122, 151, 122, 157, 120, 160)
context.fillStyle = 'rgba(174,0,232,1.00)';
context.fill();
context.beginPath();
context.moveTo(96, 159)
context.bezierCurveTo(94, 160, 92, 160, 91, 158)
context.bezierCurveTo(90, 154, 91, 148, 92, 147)
context.bezierCurveTo(94, 146, 96, 147, 96, 150)
context.bezierCurveTo(96, 154, 96, 158, 96, 159)
context.fillStyle = 'rgba(174,0,232,1.00)';
context.fill();
//lower right arm
context.beginPath();
context.moveTo(588, 579)
context.bezierCurveTo(598, 579, 610, 581, 621, 582)
context.bezierCurveTo(631, 584, 641, 584, 641, 598)
context.bezierCurveTo(641, 607, 641, 626, 641, 641)
context.bezierCurveTo(621, 641, 602, 641, 593, 641)
context.bezierCurveTo(588, 641, 588, 596, 588, 579)
context.fillStyle = rightarmgrd
context.fill();
// right arm
var rightarmgrd = context.createRadialGradient(333,356,50,333,356,150)
rightarmgrd.addColorStop(0, "rgba(180,94,18,1.00)");
rightarmgrd.addColorStop(0.41, "rgba(151,79,14,1.00)");
rightarmgrd.addColorStop(0.70, "rgba(151,77,10,1.00)");
rightarmgrd.addColorStop(1, "rgba(150,84,25,1.00)");
context.beginPath();
context.moveTo(641, 601)
context.bezierCurveTo(606, 552, 583, 514, 542, 448)
context.bezierCurveTo(507, 394, 480, 355, 473, 345)
context.bezierCurveTo(465, 329, 465, 309, 466, 294)
context.bezierCurveTo(468, 280, 473, 271, 468, 260)
context.bezierCurveTo(465, 254,456, 244, 447, 235)
context.bezierCurveTo(441, 228, 435, 224, 432, 221)
context.bezierCurveTo(431, 217, 435, 220, 437, 220)// nail
context.bezierCurveTo(441, 221, 445, 225, 455, 229)
context.bezierCurveTo(464, 237, 473, 245, 480, 252)
context.bezierCurveTo(485, 256, 485, 244, 484, 234)
context.bezierCurveTo(483, 225, 480, 218, 472, 207)
context.bezierCurveTo(464, 196, 458, 183, 453, 172)
context.bezierCurveTo(451, 167, 453, 169, 457, 170)// nail
context.bezierCurveTo(467, 183, 476, 194, 482, 201)
context.bezierCurveTo(491, 210, 493, 218, 496, 224)
context.bezierCurveTo(502, 234, 506, 247, 504, 231)
context.bezierCurveTo(504, 224, 503, 209, 502, 203)
context.bezierCurveTo(498, 196, 493, 188, 489, 180)
context.bezierCurveTo(482, 172, 476, 156, 480, 162)
context.bezierCurveTo(486, 168, 490, 173, 501, 183)
context.bezierCurveTo(505, 183, 511, 186, 516, 191)
context.bezierCurveTo(523, 201, 530, 223, 533, 244)
context.bezierCurveTo(535, 253, 537, 259, 537, 264)
context.bezierCurveTo(535, 277, 533, 282, 531, 292)
context.bezierCurveTo(529, 306, 528, 313, 527, 318)
context.bezierCurveTo(528, 325, 530, 333, 533, 337)
context.bezierCurveTo(564, 378, 583, 405, 642, 476)
context.lineWidth = 1.3
context.fillStyle = rightarmgrd
context.fill();
//context.strokeStyle = "rgba(0,0,0,1.00)";
//context.stroke();
//nails
context.beginPath();
context.moveTo(488, 170)
context.bezierCurveTo(486, 170, 484, 170, 483, 168)
context.bezierCurveTo(482, 166, 479, 164, 479, 160)
context.bezierCurveTo(484, 165, 485, 170, 488, 170)
context.closePath();
context.fillStyle ='rgba(174,0,232,1.00)';
context.fill();
context.beginPath();
context.moveTo(466, 181)
context.bezierCurveTo(466, 183, 464, 186, 461, 185)
context.bezierCurveTo(459, 183, 456, 177, 453, 169)
context.bezierCurveTo(455, 171, 458, 171, 463, 178)
context.bezierCurveTo(461, 179, 463, 179, 466, 181)
context.closePath();
context.fillStyle = 'rgba(174,0,232,1.00)';
context.fill();
context.beginPath();
context.moveTo(444, 225)
context.bezierCurveTo(444, 226, 442, 226, 441, 227)
context.bezierCurveTo(441, 227, 438, 226, 435, 223)
context.bezierCurveTo(434, 222, 433, 220, 434, 220)
context.closePath();
context.fillStyle = 'rgba(174,0,232,1.00)';
context.fill();
// middle fingers
context.beginPath();
context.moveTo(505, 184)
context.bezierCurveTo(508, 188, 512, 193, 515, 200)
context.bezierCurveTo(515, 204, 517, 210, 520, 220)
context.bezierCurveTo(522, 228, 523, 234, 524, 239)
context.bezierCurveTo(525, 247, 526, 251, 525, 257)
context.lineWidth = 1.7
//context.fillStyle = rightarmgrd
//context.fill();
context.strokeStyle = "rgba(64,33,0,1.00)";
context.stroke();
context.beginPath();
context.moveTo(504, 239)
context.bezierCurveTo(504, 239, 506, 247, 507, 251)
context.bezierCurveTo(508, 257, 509, 259, 509, 265)
context.lineWidth = 1.7
//context.fillStyle = rightarmgrd
//context.fill();
context.strokeStyle = "rgba(64,33,0,1.00)";
context.stroke();
context.beginPath();
context.moveTo(483, 253)
context.bezierCurveTo(486, 259, 488, 264, 490, 274)
context.lineWidth = 1.7
//context.fillStyle = rightarmgrd
//context.fill();
context.strokeStyle = "rgba(64,33,0,1.00)";
context.stroke();
//context.lineWidth = 1.5;
//context.strokeStyle = '#060622';
//context.stroke();
//right ear
context.beginPath();
context.moveTo(450, 372)
context.bezierCurveTo(461, 364, 464, 360, 472, 366)
context.bezierCurveTo(476, 372, 477, 379, 475, 388)
context.bezierCurveTo(473, 398, 470, 406, 463, 415)
context.bezierCurveTo(459, 421, 454, 423, 440, 426)
context.lineWidth = 1.5;
context.fillStyle ='rgba(151,79,14,1.00)';
context.fill();
context.strokeStyle = 'rgba(99,37,4,1.00)';
context.stroke();
// inner ear
context.beginPath();
context.moveTo(450, 382)
context.bezierCurveTo(455, 374, 460, 372, 466, 380)
context.lineWidth = 1.5;
context.strokeStyle = "rgba(99,37,4,1.00)";
context.stroke();
// earlobe
context.beginPath();
context.moveTo(448, 390)
context.bezierCurveTo(453, 396, 452, 401, 445, 408)
context.lineWidth = 1.5;
context.strokeStyle = "rgba(99,37,4,1.00)";
context.stroke();
//left ear
context.beginPath();
context.moveTo(229, 380)
context.bezierCurveTo(213, 365, 206, 363, 200, 373)
context.bezierCurveTo(197, 382, 197, 393, 205, 410)
context.bezierCurveTo(212, 420, 222, 425, 238, 429)
context.lineWidth = 1.5;
context.strokeStyle = "rgba(99,37,4,1.00)";
context.stroke();
context.fillStyle ='rgba(151,79,14,1.00)';
context.fill();
//inner lobe
context.beginPath();
context.moveTo(229, 388)
context.bezierCurveTo(217, 376, 212, 376, 210, 383)
context.lineWidth = 1.5;
context.strokeStyle = "rgba(99,37,4,1.00)";
context.stroke();
//ear lobe
context.beginPath();
context.moveTo(231, 390)
context.bezierCurveTo(228, 395, 216, 402, 232, 408)
context.lineWidth = 1.5;
context.strokeStyle = "rgba(99,37,4,1.00)";
context.stroke();
// shirt
var shirtgrd = context.createLinearGradient(333,356,50,333,356,150)
shirtgrd.addColorStop(0, "rgba(157,1,174,1.00)");
shirtgrd.addColorStop(0.5, "rgba(191,12,223,1.00)");
shirtgrd.addColorStop(1, "rgba(169,7,199,1.00)");
context.beginPath();
context.moveTo(277, 565)
context.bezierCurveTo(271, 566, 266, 565, 256, 565)
context.bezierCurveTo(249, 563, 243, 563, 237, 561)
context.bezierCurveTo(234, 560, 228, 558, 224, 556)
context.bezierCurveTo(217, 553, 212, 550, 205, 547)
context.bezierCurveTo(204, 547, 201, 548, 198, 550)
context.bezierCurveTo(194, 551, 186, 554, 180, 556)
context.bezierCurveTo(174, 558, 165, 560, 159, 562)
context.bezierCurveTo(152, 563, 143, 565, 132, 567)
context.bezierCurveTo(130, 568, 126, 569, 117, 570)
context.bezierCurveTo(109, 571, 96, 570, 95, 572)
context.bezierCurveTo(95, 576, 93, 584, 93, 593)
context.bezierCurveTo(93, 603, 93, 614, 93, 626)
context.bezierCurveTo(94, 641, 94, 641, 94, 641)
context.bezierCurveTo(590, 642, 590, 640, 590, 640)
context.bezierCurveTo(592, 632, 592, 624, 592, 609)
context.bezierCurveTo(591, 593, 591, 585, 588, 571)
context.bezierCurveTo(584, 571, 573, 570, 560, 569)
context.bezierCurveTo(554, 567, 542, 565, 529, 563)
context.bezierCurveTo(517, 561, 504, 556, 494, 552)
context.bezierCurveTo(488, 552, 481, 549, 477, 548)
context.bezierCurveTo(473, 552, 466, 553, 460, 555)
context.bezierCurveTo(448, 557, 442, 560, 427, 563)
context.closePath();
context.lineWidth = 2;
context.fillStyle = shirtgrd
context.fill();
context.strokeStyle = shirtgrd;
context.stroke();
context.beginPath();
context.moveTo(302, 555)
context.bezierCurveTo(293, 555, 290, 554, 282, 556)
context.bezierCurveTo(277, 566, 275, 572, 274, 579)
context.bezierCurveTo(273, 589, 273, 599, 274, 603)
context.bezierCurveTo(278, 613, 283, 619, 288, 623)
context.bezierCurveTo(296, 629, 305, 633, 313, 635)
context.bezierCurveTo(330, 639, 342, 639, 352, 638)
context.bezierCurveTo(370, 635, 380, 631, 390, 625)
context.bezierCurveTo(401, 618, 407, 611, 411, 597)
context.bezierCurveTo(414, 587, 410, 576, 407, 566)
context.bezierCurveTo(400, 556, 399, 555, 382, 556)
context.bezierCurveTo(388, 565, 392, 571, 394, 578)
context.bezierCurveTo(396, 589, 394, 602, 387, 609)
context.bezierCurveTo(383, 613, 373, 619, 361, 623)
context.bezierCurveTo(354, 625, 342, 626, 336, 625)
context.bezierCurveTo(328, 624, 321, 622, 312, 618)
context.bezierCurveTo(306, 615, 298, 610, 292, 601)
context.bezierCurveTo(289, 594, 288, 583, 290, 572)
context.closePath();
context.lineWidth = 1.7;
context.fillStyle = shirtgrd
context.fill();
// right earring
var earringgrd = context.createRadialGradient(333,356,50,333,356,150)
earringgrd.addColorStop(0, "rgba(158,122,0,1.00)");
earringgrd.addColorStop(0.5, "rgba(129,109,1,1.00)");
earringgrd.addColorStop(1, "rgba(160,112,0,1.00)");
context.beginPath();
context.moveTo(456, 423)
context.bezierCurveTo(464, 435, 473, 459, 478, 485)
context.bezierCurveTo(482, 504, 481, 522, 481, 519 )
context.bezierCurveTo(477, 540, 476, 549, 469,558)
context.bezierCurveTo(462, 562, 454, 558, 452, 555)
context.bezierCurveTo(451, 556, 450, 559,452, 559)
context.bezierCurveTo(458, 564, 463, 564, 468, 563)
context.bezierCurveTo(474, 561, 477, 555, 480, 543)
context.bezierCurveTo(482, 540, 485, 528, 486, 517)
context.bezierCurveTo(485, 499, 482, 480, 477, 462)
context.bezierCurveTo(472, 442, 467, 433, 459, 422)
context.closePath();
context.lineWidth = 1;
context.fillStyle = earringgrd
context.fill();
context.strokeStyle = "rgba(158,122,0,1.00)";
context.stroke();
context.beginPath();
context.moveTo(459, 424)
context.lineTo(452, 413)
context.lineWidth = 3.5;
context.fillStyle = earringgrd
context.fill();
context.strokeStyle = "rgba(158,122,0,1.00)";
context.stroke();
context.beginPath();
context.moveTo(451, 558)
context.bezierCurveTo(446, 553, 438, 538, 431, 520)
context.bezierCurveTo(426, 503, 423, 485, 425, 457)
context.lineWidth = 3.3;
//context.fillStyle = earringgrd
//context.fill();
context.strokeStyle = "rgba(158,122,0,1.00)";
context.stroke();
//left earring
context.beginPath();
context.moveTo(222, 424)
context.bezierCurveTo(217, 433, 212, 443, 210, 453 )
context.bezierCurveTo(208, 468, 207, 479, 208, 497)
context.bezierCurveTo(208, 511, 210, 522, 216, 535)
context.bezierCurveTo(220, 544, 225, 550, 231, 552)
context.bezierCurveTo(236, 555, 245, 555, 253,542)
context.bezierCurveTo(259, 529, 260, 525, 264, 524)
context.bezierCurveTo(264, 528, 263, 527, 263, 532)//
context.bezierCurveTo(261, 537, 257, 545, 253, 551)
context.bezierCurveTo(250, 555, 243, 559, 232, 557)
context.bezierCurveTo(226, 555, 220, 549, 217, 544)
context.bezierCurveTo(208, 526, 205, 513, 204, 500)
context.bezierCurveTo(204, 480, 206, 466, 207, 454)
context.bezierCurveTo(210, 444, 214, 434, 221, 423)
context.closePath();
context.lineWidth = 1.25;
context.fillStyle = earringgrd
context.fill();
context.strokeStyle = "rgba(158,122,0,1.00)";
context.stroke();
context.beginPath();
context.moveTo(262, 527)
context.bezierCurveTo(265, 509, 264, 494, 263, 473)
context.lineWidth = 3.75;
context.strokeStyle = "rgba(158,122,0,1.00)";
context.stroke();
context.beginPath();
context.moveTo(221.7, 423)
context.bezierCurveTo(225, 420, 228, 415, 228, 415)
context.lineWidth = 3;
context.strokeStyle = "rgba(158,122,0,1.00)"
context.stroke();
//neck
var neckgrd = context.createRadialGradient(333,356,50,333,356,150)
neckgrd.addColorStop(0, "rgba(180,94,18,1.00)");
neckgrd.addColorStop(0.41, "rgba(151,79,14,1.00)");
neckgrd.addColorStop(1, "rgba(151,77,10,1.00)");
//neckgrd.addColorStop(0.75, "rgba(150,84,25,1.00)");
//neckgrd.addColorStop(1, "rgba(152,69,10,1.00)");
context.beginPath();
context.moveTo(298, 499)
context.bezierCurveTo(305, 558, 299, 561, 292, 574)
context.bezierCurveTo(289, 584, 289, 591, 294, 602)
context.bezierCurveTo(306, 614, 320, 620, 331, 622)
context.bezierCurveTo(341, 624, 354, 623, 363, 621)
context.bezierCurveTo(379, 613, 389, 603, 394, 592)
context.bezierCurveTo(394, 577, 386, 565, 382.2, 558)
context.bezierCurveTo(378, 540, 379, 522, 380, 495)
context.closePath();
context.lineWidth = 1;
context.fillStyle = neckgrd;
context.fill();
context.strokeStyle = neckgrd;
context.stroke();
//// shape of face
var facegrd = context.createRadialGradient(333,356,50,333,356,150)
facegrd.addColorStop(0, "rgba(180,94,18,1.00)");
facegrd.addColorStop(0.41, "rgba(151,79,14,1.00)");
facegrd.addColorStop(0.70, "rgba(151,77,10,1.00)");
facegrd.addColorStop(1, "rgba(150,84,25,1.00)");
context.beginPath();
context.moveTo(339, 233)
context.bezierCurveTo (304, 236,285, 244, 267, 256)
context.bezierCurveTo (250, 272, 240, 295, 226, 364)
context.bezierCurveTo(235, 428, 239, 451, 263, 475)
context.bezierCurveTo(283, 491, 309, 504, 335, 515)
context.bezierCurveTo(367, 504, 401, 487, 421, 467)
context.bezierCurveTo(435, 439, 440, 424, 447, 389)
context.bezierCurveTo(450, 362, 449, 362, 436, 304)
context.bezierCurveTo (422, 271, 410, 248, 411, 250)
context.bezierCurveTo(381, 237, 339, 233, 339, 233)
context.closePath();
context.lineWidth = 1.5;
context.fillStyle = facegrd;
context.fill();
context.strokeStyle = facegrd;
context.stroke();
/// left eyebrow
context.beginPath();
context.moveTo(309,344)
context.bezierCurveTo(288, 335, 269, 329, 256, 332)
context.bezierCurveTo(249, 336, 245, 339, 240, 345)
context.bezierCurveTo(234, 354, 242, 350, 253, 345)
context.bezierCurveTo(261, 344, 269, 344, 276, 346)
context.bezierCurveTo(284, 348, 290,350, 294, 352)
context.bezierCurveTo(300, 355, 309, 357, 309, 354)
context.closePath();
context.fillStyle = "rgba(99,37,4,1.00)";
context.fill();
context.lineWidth = 1;
context.strokeStyle = 'rgba(99,37,4,1.00)';
context.stroke();
/// Right Eyebrow
context.beginPath();
context.moveTo(354,344)
context.bezierCurveTo(363, 342, 370, 339, 380, 336)
context.bezierCurveTo(389, 333, 397, 332, 405, 332)
context.bezierCurveTo(415, 336, 420, 339,425, 342)
context.bezierCurveTo(428, 348, 432, 355, 429, 356)
context.bezierCurveTo(424, 353, 420, 351, 415, 349)
context.bezierCurveTo(410, 347, 404, 345, 399, 345)
context.bezierCurveTo(396, 346, 392, 346, 389, 347)
context.bezierCurveTo(383,348, 381, 349, 379, 349)
context.bezierCurveTo(375, 351, 372, 352, 369, 354)
context.bezierCurveTo(364, 356, 360, 358, 355, 359)
context.bezierCurveTo(355, 355, 354, 350, 354, 343)
context.closePath();
context.fillStyle = "#632504";
context.fill();
context.lineWidth = 0.1;
context.strokeStyle = '#632504';
context.stroke();
///Lips
context.beginPath();
context.moveTo(297, 460);
context.quadraticCurveTo(342, 415, 381, 460);
context.quadraticCurveTo(342, 530, 297, 460)
context.closePath();
context.fillStyle = "#C42B2E";
context.fill();
context.lineWidth = 1.7;
// line color
context.strokeStyle = '#C42B2E';
context.stroke();
context.beginPath();
context.moveTo(323, 460)
context.quadraticCurveTo(342, 450, 356, 460)
context.quadraticCurveTo(342, 470, 323, 460)
context.closePath();
context.fillStyle = "#FBFBFB";
context.fill();
context.strokeStyle = '#FBFBFB';
context.stroke();
// eyelashe left
context.beginPath();
context.moveTo(248, 389)
context.lineTo(236, 393)
context.moveTo(255, 394)
context.lineTo(241, 402)
context.moveTo(266, 396)
context.lineTo(250, 408)
context.lineWidth = 1;
context.strokeStyle = "rgba(99,37,4,1.00)";
context.stroke();
context.beginPath();
context.moveTo(276, 396)
context.lineTo(273, 407)
context.moveTo(285, 395)
context.lineTo(286, 402)
context.moveTo(295, 391)
context.lineTo(296, 396)
context.lineWidth = 0.6;
context.strokeStyle = "rgba(99,37,4,1.00)";
context.stroke();
//right eyelash
context.beginPath();
context.moveTo(421, 389)
context.lineTo(437, 393)
context.moveTo(416, 395)
context.lineTo(429, 402)
context.moveTo(406, 397)
context.lineTo(417, 406)
context.lineWidth = 1;
context.fillStyle = "rgba(99,37,4,1.00)";
context.fill();
context.strokeStyle =("rgba(99,37,4,1.00")
context.stroke();
context.beginPath();
context.moveTo(394, 396)
context.lineTo(397, 406)
context.moveTo(384, 394)
context.lineTo(382, 402)
context.moveTo(373, 391)
context.lineTo(371, 396)
context.lineWidth = 0.6;
context.strokeStyle = "rgba(99,37,4,1.00)";
context.stroke();
/// left eye
context.beginPath();
context.moveTo(244, 379)
context.bezierCurveTo(245, 388, 248, 392, 256, 394)
context.bezierCurveTo(265, 397, 277, 396, 285, 393)
context.bezierCurveTo(294, 391, 304, 386, 315, 388)
context.bezierCurveTo(313, 383, 310, 381, 303, 379)
context.bezierCurveTo(296, 379, 288, 382, 281, 384)
context.bezierCurveTo(275, 387, 266, 388, 258, 386)
context.bezierCurveTo(255, 385, 251, 383, 244, 379)
context.lineWidth = 1.2;
context.strokeStyle = "rgba(99,37,4,1.00)";
context.stroke();
context.fillStyle = "rgba(99,37,4,1.00)"
context.fill();
context.beginPath();
context.moveTo(251, 377,)
context.bezierCurveTo(259, 374, 263, 373, 273, 374)
context.lineWidth = 0.9;
context.strokeStyle = "rgba(99,37,4,1.00)";
context.stroke();
// right eyeliner
context.beginPath();
context.moveTo(424, 379)
context.bezierCurveTo(425, 388, 417, 396, 407, 397)
context.bezierCurveTo(396, 397, 385, 395, 372, 390)
context.bezierCurveTo(368, 388, 364, 387, 354, 388)
context.bezierCurveTo(355, 383, 363, 377, 376, 380)
context.bezierCurveTo(385, 384, 394, 387, 402, 388)
context.bezierCurveTo(413, 386, 418, 383, 424, 379)
context.lineWidth = 1.2;
context.strokeStyle = "rgba(99,37,4,1.00)";
context.stroke();
context.fillStyle = "rgba(99,37,4,1.00)"
context.fill();
context.beginPath();
context.moveTo(396, 372)
context.bezierCurveTo(405, 371, 417, 375, 417, 375)
context.lineWidth = 1.2;
context.strokeStyle = "rgba(99,37,4,1.00)";
context.stroke();
///nose
var nosegrd = context.createRadialGradient(333,356,50,333,356,150)
nosegrd.addColorStop(0, "rgba(151,79,14,1.00)");
nosegrd.addColorStop(0.75, "rgba(158,83,14,1.00)");
context.beginPath();
context.moveTo(337, 414)
context.bezierCurveTo(333, 414.2, 327, 415, 323, 415.3)
context.bezierCurveTo(322, 416, 321, 418, 320, 419)
context.bezierCurveTo(319, 422, 318, 423, 318, 425)
context.bezierCurveTo(321, 426, 322, 423, 323, 422)
context.bezierCurveTo(325, 421, 327, 422, 329, 423)
context.bezierCurveTo(331, 426, 334, 427, 337, 427)
context.bezierCurveTo(340, 426, 342, 425, 343, 424)
context.bezierCurveTo(345, 421, 347, 421, 350, 421)
context.bezierCurveTo(352, 423, 355, 426, 356, 425)
context.bezierCurveTo(358, 424, 356, 419, 353, 416)
context.bezierCurveTo(352, 414, 348, 414, 343, 414)
context.closePath();
context.lineWidth = 2;
context.fillStyle = nosegrd
context.fill();
context.strokeStyle = "rgba(141,64,7,1.00)";
context.stroke();
context.beginPath();
context.moveTo(337,414)
context.lineTo(336, 389)
context.strokeStyle = "rgba(141,64,7,1.00)";
context.stroke();
////#9F6700
context.font = 'italic 22pt Script MT Bold';
context.fillStyle = "rgba(236,2,2,1.00)"
context.fillText('BLACK', 147, 610);
context.font = 'italic 22pt Script MT Bold';
context.fillStyle = "rgba(236,2,2,1.00)"
context.fillText('QUEEN', 441, 610);
Comments
Post a Comment