CANVAS FINAL: JACK JACK
 |
| INSPIRATION |
 |
| OUTCOME |
HAD SO MUCH FUN WITH THIS PROJECT!
Did it over the course of a week on multiple days, just a few hours a day.
444 lines of code.
(Side Note: background also moves)
CODE:
///RECT BACKGROUND COLOR
var bkgrnd = context.createRadialGradient(mouseX,mouseY,50,mouseX,mouseY,300);
bkgrnd.addColorStop(0,"rgba(255,255,255,.25)");
bkgrnd.addColorStop(0.5,"#717171");
bkgrnd.addColorStop(1,"rgba(40,40,40,1.00)");
context.beginPath();
context.rect(0,0,600,600);
context.closePath();
context.fillStyle = bkgrnd;
context.fill();
///LEFT CORNER SHORT LAYER COLOR
var lftst = context.createLinearGradient(87,574,149,564);
lftst.addColorStop(0.05,"rgba(228,95,98,1.00)")
lftst.addColorStop(0.30,"rgba(197,22,25,1.00)")
///LEFT CORNER SHIRT LAYER
context.beginPath();
context.moveTo(71,600);
context.bezierCurveTo(103,542,102,541,118,544);
context.bezierCurveTo(139,511,133,514,160,600)
context.closePath();
context.fillStyle = lftst;
context.fill();
context.stroke();
///MID SHIRT LAYER COLOR
var midst = context.createLinearGradient(194,600,199,448);
midst.addColorStop(0.05,"rgba(228,95,98,1.00)")
midst.addColorStop(0.2,"rgba(197,22,25,1.00)")
midst.addColorStop(1,"rgba(25,25,25,1.00)")
///MIDDLE SHIRT LAYER
context.beginPath();
context.moveTo(159,600);
context.bezierCurveTo(196,599,271,680,221,476);
context.quadraticCurveTo(184,398,136,525);
context.closePath();
context.fillStyle = midst;
context.fill();
context.stroke();
///RGHT SHT COLOR
var rghst = context.createLinearGradient(281,600,272,497);
rghst.addColorStop(0.05,"rgba(228,95,98,1.00)")
rghst.addColorStop(0.30,"rgba(197,22,25,1.00)")
//rghst.addColorStop(1,"rgba(25,25,25,1.00)")
///RIGHT CORNER SHIRT LAYER
context.beginPath();
context.moveTo(329,600);
context.quadraticCurveTo(326,520,301,484);
context.bezierCurveTo(272,503,290,502,206,452);
context.bezierCurveTo(274,650,181,601,329,600);
context.closePath();
context.fillStyle = rghst;
context.fill();
context.stroke();
///COLLAR
context.beginPath();
context.moveTo(288,469);
context.bezierCurveTo(303,486,305,486,292,492);
context.bezierCurveTo(278,497,268,496,252,484);
context.bezierCurveTo(210,464,202,456,217,435);
context.quadraticCurveTo(225,482,274,484);
context.closePath();
context.fillStyle = "black";
context.fill();
context.strokeStyle = 5;
context.stroke();
///NECK
context.beginPath();
context.moveTo(288,461);
context.bezierCurveTo(281,517,209,457,217,435);
context.bezierCurveTo(271,466,301,453,283,467);
context.closePath();
context.fillStyle = "rgba(223,167,112,1.00)";
context.fill();
context.stroke();
///LEFT EAR COLOR
var lftear = context.createLinearGradient(78,295,132,296);
lftear.addColorStop(0.8,"rgba(227,178,130,0.85)");
lftear.addColorStop(1,"rgba(205,176,208,.75)");
///LEFT EAR
context.beginPath();
context.moveTo(127,335);
context.bezierCurveTo(100,361,85,335,75,297);
context.bezierCurveTo(82,265,87,260,113,255);
context.bezierCurveTo(117,253,127,258,136,265);
context.closePath();
context.fillStyle = lftear;
context.fill();
//context.stroke();
///LEFT INNER EAR
context.beginPath();
context.moveTo(126,306);
context.bezierCurveTo(115,238,90,280,88,288);
context.quadraticCurveTo(94,314,96,306);
context.quadraticCurveTo(111,271,126,306);
context.closePath();
context.fillStyle = "rgba(227,178,130,0.85)"
context.fill();
///RIGHT EAR COLOR
var rghter = context.createRadialGradient(474,408,25,463,449,100);
rghter.addColorStop(0,"rgba(216,151,87,0.85)");
rghter.addColorStop(.4,"rgba(227,178,130,0.85)");
///RIGHT EAR
context.beginPath();
context.moveTo(431,424);
context.bezierCurveTo(445,451,446,453,483,436);
context.bezierCurveTo(519,424,529,362,467,358);
context.closePath();
context.fillStyle = rghter;
context.fill();
//context.stroke();
///RIGHT INNER EAR
context.beginPath();
context.moveTo(464,385);
context.quadraticCurveTo(496,361,500,401);
context.closePath();
context.fillStyle = "rgba(227,178,130,0.85)"
context.fill();
///HEAD COLOR
var head = context.createRadialGradient(373,256,50,324,282,190);
head.addColorStop(0,"rgba(238,217,155,1.00)");
head.addColorStop(.99,"rgba(223,167,112,1.00)");
//head.addColorStop(1,"rgba(205,176,208,.75)");
///HEAD
context.beginPath();
context.moveTo(254,453);
context.bezierCurveTo(205,432,144,386,127,335);
context.bezierCurveTo(129,206,201,111,320,137);
context.bezierCurveTo(434,150,534,273,431,424);
context.quadraticCurveTo(336,475,254,453);
context.closePath();
context.fillStyle = head;
context.fill();
//context.stroke();
///MOUTH
context.beginPath();
context.moveTo(224,316);
context.bezierCurveTo(211,409,238,431,303,365);
context.bezierCurveTo(268,371,244,373,226,330);
context.closePath();
context.fillStyle = "black";
context.fill();
context.stroke();
///TEETH
context.beginPath();
context.moveTo(229,342);
context.bezierCurveTo(219,360,283,388,303,366);
context.quadraticCurveTo(249,367,231,341);
context.closePath();
context.fillStyle = "rgba(231,122,122,0.91)";
context.fill();
context.stroke();
///TONGUE COLOR
var tongue = context.createLinearGradient(272,385,274,394);
tongue.addColorStop(0,"rgba(242,90,90,0.75)");
tongue.addColorStop(1,"rgba(255,138,174,1.00)");
///TONGUE
context.beginPath();
context.moveTo(227,377);
context.bezierCurveTo(225,403,244,412,271,392);
context.closePath();
context.fillStyle = tongue;
context.fill();
context.stroke();
///NOSE
context.beginPath();
context.moveTo(255,312)
context.bezierCurveTo(260,338,269,343,291,334);
context.bezierCurveTo(296,317,278,305,255,312);
context.closePath();
context.fillStyle = "rgba(224,171,120,1.00)";
context.fill();
//context.stroke();
///EYEMASK COLOR
var eymsk = context.createRadialGradient(362,292,50,372,302,100);
eymsk.addColorStop(0,"rgba(0,0,0,1)");
eymsk.addColorStop(.5,"rgba(50,50,50,1.00)");
eymsk.addColorStop(1,"rgba(0,0,0,1)");
///EYEMASK
context.beginPath();
context.moveTo(282,308);
context.bezierCurveTo(45,301,225,124,273,178);
context.bezierCurveTo(315,223,308,214,344,216);
context.bezierCurveTo(335,220,424,187,431,302);
context.bezierCurveTo(442,372,314,349,282,308);
context.closePath();
context.fillStyle = eymsk;
context.fill();
context.stroke();
///LEFT EYE COLOR
var lfteye = context.createRadialGradient(239,266,5,254,264,100);
lfteye.addColorStop(0,"rgba(255,255,255,1.00)");
lfteye.addColorStop(1,"rgba(0,0,0,1)");
///LEFT EYE
context.beginPath();
context.moveTo(256,297);
context.bezierCurveTo(275,246,263,234,236,223);
context.bezierCurveTo(205,234,197,241,194,273);
context.closePath();
context.fillStyle = lfteye;
context.fill();
context.stroke();
///RIGHT EYE COLOR
var rhteye = context.createRadialGradient(343,299,5,417,305,100);
rhteye.addColorStop(0,"rgba(255,255,255,1.00)");
rhteye.addColorStop(1,"rgba(132,132,132,1.00)");
///RIGHT EYE
context.beginPath();
context.moveTo(309,310);
context.bezierCurveTo(316,268,347,247,381,272);
context.bezierCurveTo(400,294,405,344,343,333);
context.closePath();
context.fillStyle = rhteye;
context.fill();
context.stroke();
///LEFT PUPIL COLOR
var lftpup = context.createLinearGradient(222,266,260,270);
lftpup.addColorStop(0,"rgba(0,155,255,.75)");
lftpup.addColorStop(.5,"rgba(1,0,155,.85)");
///LEFT PUPIL
context.beginPath();
context.arc(240,268,19,Math.PI*0,Math.PI*2,true);
context.closePath();
context.fillStyle = lftpup;
context.fill();
context.stroke();
///LEFT INSIDE PUPIL
context.beginPath();
context.arc(239,268,7,Math.PI*0,Math.PI*2,true);
context.closePath();
context.fillStyle = "black";
context.fill();
context.stroke();
///LEFT PUPIL SHADOW
context.beginPath();
context.arc(253,263,4.5,Math.PI*0,Math.PI*2,true);
context.closePath();
context.fillStyle = "#808080";
context.fill();
///RIGHT PUPIL COLOR
var rhtpup = context.createLinearGradient(322,296,359,299);
rhtpup.addColorStop(0,"rgba(0,155,255,.75)");
rhtpup.addColorStop(.55,"rgba(1,0,155,.85)");
///RIGHT PUPIL
context.beginPath();
context.arc(340,297,19.5,Math.PI*0,Math.PI*2,true);
context.closePath();
context.fillStyle = rhtpup;
context.fill();
context.stroke();
///RIGHT INSIDE PUPIL
context.beginPath();
context.arc(340,297,8,Math.PI*0,Math.PI*2,true);
context.closePath();
context.fillStyle = "black";
context.fill();
context.stroke();
///RIGHT PUPIL SHADOW
context.beginPath();
context.arc(352,294,4.5,Math.PI*0,Math.PI*2,true);
context.closePath();
context.fillStyle = "#808080";
context.fill();
///HAIR COLOR
var hair = context.createLinearGradient(348,147,394,9);
hair.addColorStop(0,"rgba(150,74,0,1.00)");
hair.addColorStop(.75,"rgba(229,106,0,1.00)");
///HAIR
context.beginPath();
context.moveTo(324,138);
context.bezierCurveTo(338,108,346,123,393,5);
context.bezierCurveTo(375,113,368,128,378,155);
context.closePath();
context.fillStyle = hair;
context.fill();
//context.stroke();
Comments
Post a Comment