Here is my final project. It took a very long time but I am happy with how it turned out.
Here is the code.
//context.drawImage(img1, mouseX,mouseY);
//context.drawImage(img1, 0,0,canvas.width,canvas.height);
//bkg
//bkg
//TOP BEAK, GREEN LINE
var mygrad = context.createLinearGradient(500,10,502,206);
mygrad.addColorStop(0,"rgba(255,255,255,1.00");
mygrad.addColorStop(0.7,"rgba(184,191,214,1.00)");
mygrad.addColorStop(1,"blue");
///BACKGROUND
context.beginPath();
context.rect(0,0,800,600);
context.closePath();
context.fillStyle = mygrad;
context.fill();
//bkg
var bkgdgrd = context.createLinearGradient(0,0,mouseX,mouseY)
bkgdgrd.addColorStop(0,"red");
var mygrad = context.createLinearGradient(500,10,127,278);
mygrad.addColorStop(0,"#FFFC00");
mygrad.addColorStop(0.7,"rgba(246,255,44,1.00)");
mygrad.addColorStop(1,"rgba(254,101,10,1.00)");
///GRADIENT TEST
context.beginPath();
context.beginPath();
context.moveTo(268,453); //START OF LINE
context.quadraticCurveTo(150,361,215,198)
//TOP BEAK, RED BORDER GREEN
context.quadraticCurveTo(295,233,307,264)
//TOP BEAK, ORANGE BORDER GREEN
context.quadraticCurveTo(290,305,263,331)
//TOP BEAK, GREEN LINE
context.quadraticCurveTo(263,347,247,355)
context.quadraticCurveTo(247,412,268,453)
context.closePath();
context.fillStyle = mygrad;
context.fill();
// context.fillStyle = "#FF7C1B" //COLOR OF TRIANGLE OR "rgba(0,0,0,0.5)", THEN HIGHLIGHT INSIDE THE QUOTATION MARKS, RIGHT CLICK, AND GO TO QUICKEDIT TO PICK CUSTOM COLOR.
context.fill();
context.lineWidth = 2;
context.strokeStyle = "black"; // COLOR OF LINE
context.stroke();
//WHITE PART OF FACE, RED BORDER GREEN
var mygradlower = context.createLinearGradient(330,390,399,243);
mygradlower.addColorStop(0,"#FCFCCD");
mygradlower.addColorStop(0.7,"rgba(242,237,168,1.00)");
mygradlower.addColorStop(1,"rgba(218,201,190,1.00)");
context.beginPath();
context.moveTo(215,198); //START OF LINE
context.quadraticCurveTo(295,233,307,264)
//WHITE PART OF FACE, RED BORDER ORANGE
context.quadraticCurveTo(298,300,311,316)
//WHITE PART OF FACE, RED BORDER BLUE
context.quadraticCurveTo(416,365,372,417)
//WHITE PART OF FACE, RED BORDERS ORANGE
context.quadraticCurveTo(403,381,417,381)
context.quadraticCurveTo(422,317,449,299)
context.quadraticCurveTo(441,263,441,252)
//WHITE PART OF FACE, RED BORDERS LIME GREEN
context.quadraticCurveTo (404,268,430,196)
//WHITE PART OF FACE, RED BORDERS BLACK
context.quadraticCurveTo (379,136,342,159)
context.quadraticCurveTo (317,145,282,173)
context.quadraticCurveTo (253,153,220,180)
//WHITE PART OF FACE, RED CONNECTING BLACK BORDER AND GREEN BORDER
context.quadraticCurveTo(208,198,215,198)
context.fillStyle = mygradlower; //COLOR OF TRIANGLE OR "rgba(0,0,0,0.5)", THEN HIGHLIGHT INSIDE THE QUOTATION MARKS, RIGHT CLICK, AND GO TO QUICKEDIT TO PICK CUSTOM COLOR.
context.fill();
context.lineWidth = 2;
context.strokeStyle = "white"; // COLOR OF LINE
context.stroke();
context.closePath
//LOWER BEAK, BLUE BORDERS red
var bottombeak = context.createLinearGradient(493,221,570,358);
bottombeak.addColorStop(0,"#FFFF00");
bottombeak.addColorStop(0.5,"rgba(255,142,58,1.00)");
bottombeak.addColorStop(1,"rgba(255,115,25,1.00)");
context.beginPath();
context.moveTo(311,316)
context.quadraticCurveTo(415,364,372,417)
//LOWER BEAK, BLUE BORDERS ORANGE
context.quadraticCurveTo(364,425,341,431)
//LOWER BEAK, BLUE LOWEST PART
context.quadraticCurveTo(296,436,259,417)
context.quadraticCurveTo(268,409,274,415)
context.quadraticCurveTo(278,402,284,410)
//LOWER BEAK, BLUE BORDERS YELLOW
context.quadraticCurveTo(322,407,306,372)
//LOWER BEAK, BLUE BORDERS PINK
context.quadraticCurveTo(312,344,301,336)
//LOWER BEAK, BLUE BOARDERS INSIDE ORANGE
context.lineTo(311,316)
context.fillStyle = bottombeak //COLOR OF TRIANGLE OR "rgba(0,0,0,0.5)", THEN HIGHLIGHT INSIDE THE QUOTATION MARKS, RIGHT CLICK, AND GO TO QUICKEDIT TO PICK CUSTOM COLOR.
context.fill();
context.lineWidth = 2;
context.strokeStyle = "black"; // COLOR OF LINE
context.stroke();
context.closePath();
//BOTTOM MOUTH GAP, YELLOW ON BLUE
context.beginPath();
context.lineTo(284,410)
context.quadraticCurveTo(322,407,306,372)
context.lineTo(301,369)
//BOTTOM MOUTH GAP, YELLOW ON PINK
context.quadraticCurveTo(295,358,279,401)
//BOTTOM MOUTH GAP JUST YELLOW
context.lineTo(284,410)
context.closePath
context.fillStyle = "#1D1607" //COLOR OF TRIANGLE OR "rgba(0,0,0,0.5)", THEN HIGHLIGHT INSIDE THE QUOTATION MARKS, RIGHT CLICK, AND GO TO QUICKEDIT TO PICK CUSTOM COLOR.
context.fill();
context.lineWidth = 2;
context.strokeStyle = "black"; // COLOR OF LINE
context.stroke();
//TONGUE
//PINK YELLOW BORDER
var tonguegra = context.createLinearGradient(493,221,269,434);
tonguegra.addColorStop(0,"#FF8686");
tonguegra.addColorStop(0.5,"rgba(219,153,153,1.00)");
tonguegra.addColorStop(1,"rgba(237,214,212,1.00)");
context.beginPath();
context.moveTo(301,369)
context.quadraticCurveTo(295,358,279,401)
//JUST PINK BORDER
context.quadraticCurveTo(236,420,272,355)
//PINK ORANGE BORDER
context.quadraticCurveTo(299,323,302,337)
//PINK BLUE BORDER
context.quadraticCurveTo(308,362,306,372)
context.lineTo(301,369)
context.closePath
context.fillStyle = tonguegra //COLOR OF TRIANGLE OR "rgba(0,0,0,0.5)", THEN HIGHLIGHT INSIDE THE QUOTATION MARKS, RIGHT CLICK, AND GO TO QUICKEDIT TO PICK CUSTOM COLOR.
context.fill();
context.lineWidth = 2;
context.strokeStyle = "black"; // COLOR OF LINE
context.stroke();
context.closePath
//UPPER MOUTH GAP
//pink border orange
context.beginPath();
context.moveTo(272,355)
context.quadraticCurveTo(299,323,302,337)
//orange blue border
context.lineTo(311,316)
//RED BORDERS ORANGE
context.quadraticCurveTo(296,291,308,267)
context.quadraticCurveTo(286,311,275,320)
context.lineTo(272,355)
context.closePath
context.fillStyle = "#1D1607" //COLOR OF TRIANGLE OR "rgba(0,0,0,0.5)", THEN HIGHLIGHT INSIDE THE QUOTATION MARKS, RIGHT CLICK, AND GO TO QUICKEDIT TO PICK CUSTOM COLOR.
context.fill();
context.lineWidth = 2;
context.strokeStyle = "black"; // COLOR OF LINE
context.stroke();
//NECK
var ngra = context.createLinearGradient(478,535,429,424);
ngra.addColorStop(0,"#FF35A3");
ngra.addColorStop(0.7,"rgba(255,121,100,1.00)");
ngra.addColorStop(1,"rgba(254,101,10,1.00)");
//red boarders orange
context.beginPath();
context.moveTo(341,431)
context.quadraticCurveTo(379,426,417,381)
context.quadraticCurveTo(422,317,449,299)
context.quadraticCurveTo(441,263,441,252)
//orange boarders green
context.quadraticCurveTo(472,285,483,280)
context.quadraticCurveTo(476,305,497,303)
context.quadraticCurveTo(490,333,514,333)
context.quadraticCurveTo(495,386,526,390)
context.quadraticCurveTo(532,451,483,458)
context.quadraticCurveTo(460,527,369,522)
//just orange neck
context.quadraticCurveTo(365,492,353,498)
context.closePath();
context.fillStyle = ngra //COLOR OF TRIANGLE OR "rgba(0,0,0,0.5)", THEN HIGHLIGHT INSIDE THE QUOTATION MARKS, RIGHT CLICK, AND GO TO QUICKEDIT TO PICK CUSTOM COLOR.
context.fill();
context.lineWidth = 2;
context.strokeStyle = "#000000"; // COLOR OF LINE
context.closePath();
context.stroke();
///past neck
context.beginPath();
//just green
context.moveTo(370,523)
context.lineTo(359,600)
context.lineTo(558,600)
context.lineTo(554,558)
//green borders black wing
context.quadraticCurveTo(553,497,600,462)
context.lineTo(572,472)
context.quadraticCurveTo(551,474,548,458)
context.quadraticCurveTo(547,448,560,448)
context.quadraticCurveTo(610,436,588,400)
context.quadraticCurveTo(606,328,575,341)
context.quadraticCurveTo(587,248,555,301)
context.quadraticCurveTo(554,229,499,224)
context.quadraticCurveTo(462,166,430,197)
context.quadraticCurveTo(402,268,442,255)
//orange boarders green
context.quadraticCurveTo(472,285,483,280)
context.quadraticCurveTo(476,305,497,303)
context.quadraticCurveTo(490,333,514,333)
context.quadraticCurveTo(495,386,526,390)
context.quadraticCurveTo(532,451,483,458)
context.quadraticCurveTo(460,527,369,522)
context.closePath();
context.fillStyle = "#EF9E16" //COLOR OF TRIANGLE OR "rgba(0,0,0,0.5)", THEN HIGHLIGHT INSIDE THE QUOTATION MARKS, RIGHT CLICK, AND GO TO QUICKEDIT TO PICK CUSTOM COLOR.
context.fill();
context.lineWidth = 2;
context.strokeStyle = "black"; // COLOR OF LINE
context.stroke();
//TOP FEATHERS
var feathersgra = context.createLinearGradient(300,300,793,594);
feathersgra.addColorStop(0,"#FF1414");
feathersgra.addColorStop(0.5,"rgba(140,64,255,1.00)");
feathersgra.addColorStop(1,"rgba(9,23,255,1.00)");
//border with white part
context.beginPath();
//boarder with green part
context.quadraticCurveTo(553,497,600,462)
context.lineTo(572,472)
context.quadraticCurveTo(551,474,548,458)
context.quadraticCurveTo(547,448,560,448)
context.quadraticCurveTo(610,436,588,400)
context.quadraticCurveTo(606,328,575,341)
context.quadraticCurveTo(587,248,555,301)
context.quadraticCurveTo(554,229,499,224)
context.quadraticCurveTo(462,166,430,197)
context.quadraticCurveTo(376,133, 342,160)
context.quadraticCurveTo(326,142,281,172)
context.quadraticCurveTo(235,148,213,198)
context.quadraticCurveTo(258,93,322,105)
context.quadraticCurveTo(407,69,588,236)
context.lineTo(554,240)
context.lineTo(613,302)
context.lineTo(594,306)
context.lineTo(626,334)
context.lineTo(607,340)
context.lineTo(629,372)
context.lineTo(650,410)
context.lineTo(693,458)
context.quadraticCurveTo(758,468,750,494)
context.lineTo(800,557)
context.lineTo(800,600)
context.lineTo(560,600)
context.quadraticCurveTo(521,515,584,473)
context.closePath();
context.fillStyle = feathersgra //COLOR OF TRIANGLE OR "rgba(0,0,0,0.5)", THEN HIGHLIGHT INSIDE THE QUOTATION MARKS, RIGHT CLICK, AND GO TO QUICKEDIT TO PICK CUSTOM COLOR.
context.fill();
context.lineWidth = 2;
context.strokeStyle = "black"; // COLOR OF LINE
context.stroke();
//DETAILS
//nostril
context.beginPath();
context.moveTo(240,415)
context.quadraticCurveTo(240,420,245,425)
context.lineWidth = 2;
context.strokeStyle = "black"; // COLOR OF LINE
context.stroke();
//EYES
//EYE1
var egra = context.createRadialGradient(366,221,1,364,220,15);
egra.addColorStop(0,"#223DA5");
egra.addColorStop(0.7,"rgba(22,45,135,1.00)");
egra.addColorStop(1,"rgba(9,102,116,1.00)");
context.beginPath();
context.arc(364,220,20,0*Math.PI,2*Math.PI,false);
context.fillStyle = egra //COLOR OF TRIANGLE OR "rgba(0,0,0,0.5)", THEN HIGHLIGHT INSIDE THE QUOTATION MARKS, RIGHT CLICK, AND GO TO QUICKEDIT TO PICK CUSTOM COLOR.
context.fill();
context.lineWidth = 2;
context.stroke();
//pupil
context.beginPath();
context.arc(364,220,10,0*Math.PI,2*Math.PI,false);
context.fillStyle = "black" //COLOR OF TRIANGLE OR "rgba(0,0,0,0.5)", THEN HIGHLIGHT INSIDE THE QUOTATION MARKS, RIGHT CLICK, AND GO TO QUICKEDIT TO PICK CUSTOM COLOR.
context.fill();
context.lineWidth = 2;
context.stroke();
//white part of eye
context.beginPath();
context.arc(372,214,4,0*Math.PI,2*Math.PI,false);
context.fillStyle = "white" //COLOR OF TRIANGLE OR "rgba(0,0,0,0.5)", THEN HIGHLIGHT INSIDE THE QUOTATION MARKS, RIGHT CLICK, AND GO TO QUICKEDIT TO PICK CUSTOM COLOR.
context.fill();
context.lineWidth = 2;
context.stroke();
//bez curves
context.beginPath();
context.moveTo(665,466)
context.bezierCurveTo(633,597,694,488,755,600)
context.lineWidth = 2;
context.stroke();
//feather details
//eye details
context.beginPath();
context.moveTo(413,215)
context.bezierCurveTo(396,293,364,244,314,238)
context.bezierCurveTo(415,307,398,267,413,215)
context.moveTo(323,272)
context.bezierCurveTo(437,325,357,278,424,281)
context.bezierCurveTo(437,355,327,278,323,272)
context.fillStyle = "white"
context.fill();
context.lineWidth = 2;
context.stroke();
///more feather details
context.beginPath();
context.moveTo(380,460)
context.quadraticCurveTo(458,459,423,426)
context.quadraticCurveTo(503,410,456,388)
context.quadraticCurveTo(550,400,459,331)
context.lineWidth = 2;
context.stroke();
/
