Canvas Project- Drew Teddy Bear

 Morgan Kinsey 

Canvas Project



My first project in FMX 210- Drew Teddy Bear. 

As this being the first project in this class I was I little concerned that I would fall behind because I have never done anything like this, but as I watched more of the videos I started to get the hang out it. In the end I am really proud of myself and think that the results couldn't of came put better :)



                              `                          My Inspiration: the Drew Teddy Bear

     Part of my inspiration for this project was my love for Justin Bieber. I thought what a great idea to do my project on something I have passion about. I am so happy with the way it turned out I hope I lived up to Justin's expectations!



Final Canvas Project



Code printed below:


// BACKGROUND
var bkgdgrd = ctx.createRadialGradient(407,355,50, 407,355,600);
bkgdgrd.addColorStop(0,"rgba(172,139,187,1.00)");
bkgdgrd.addColorStop(0.2,"rgba(187,101,187,1.00)");
bkgdgrd.addColorStop(0.4,"rgba(97,47,128,1.00)");
bkgdgrd.addColorStop(0.6,"rgba(189,76,201,1.00)");
bkgdgrd.addColorStop(0.8,"rgba(169,147,205,1.00)");
bkgdgrd.addColorStop(1,"rgba(148,115,194,1.00)");
ctx.beginPath();
ctx.rect(0,0,canvas.width,canvas.height);
ctx.fillStyle = bkgdgrd;
ctx.fill();
ctx.closePath();
// EARS
//EAR 1
ctx.beginPath();
ctx.arc(210,150,60,0*Math.PI, 2*Math.PI, true);
ctx.closePath();
ctx.fillStyle = "rgba(213,154,58,1.00)";
ctx.fill();

ctx.lineWidth = 8;
ctx.lineCap = "round"
ctx.strokeStyle = "black"

ctx.stroke();

//EAR 2
ctx.beginPath();
ctx.arc(470,90,65,0*Math.PI, 2*Math.PI, false);
ctx.closePath();
ctx.fillStyle = "rgba(213,154,58,1.00)";
ctx.fill();

ctx.lineWidth = 8; 
ctx.lineCap = "round"
ctx.strokeStyle = "black"

ctx.stroke();
//BODY
ctx.beginPath();
ctx.moveTo(338,414);
ctx.lineTo(265,465);
ctx.lineTo(270,480);
ctx.quadraticCurveTo(228,496,255,543);
ctx.quadraticCurveTo(286,579,323,539);
ctx.quadraticCurveTo(316,560,317,577);
ctx.quadraticCurveTo(278,625,300,677);
ctx.quadraticCurveTo(325,729,387,717);
ctx.quadraticCurveTo(449,713,435,652);
ctx.quadraticCurveTo(441,639,442,629);
ctx.quadraticCurveTo(456,634,462,625);
ctx.quadraticCurveTo(469,640,480,644);
ctx.quadraticCurveTo(490,652,490,655);
ctx.quadraticCurveTo(551,710,587,622);
ctx.quadraticCurveTo(600,568,577,533);
ctx.quadraticCurveTo(561,511,544,514);
ctx.quadraticCurveTo(540,500,530,490);
ctx.quadraticCurveTo(579,514,595,485);
ctx.quadraticCurveTo(609,445,564,425);
ctx.lineTo(563,414);
ctx.lineTo(485,379);
ctx.quadraticCurveTo(402,353,338,414);

//ctx.closePath();
ctx.fillStyle = "rgba(213,154,58,1.00)";
ctx.fill();

ctx.lineWidth = 8
ctx.strokeStyle = "black"
ctx.stroke();
// FACE

ctx.beginPath();
ctx.moveTo(204,217);
ctx.bezierCurveTo(266,51,642,30,485,368);
ctx.bezierCurveTo(379,490,164,318,204,217);

ctx.closePath();
var face = ctx.createRadialGradient(241,307,50, 151,473,600);
face.addColorStop(0,"rgba(221,177,107,1.00)");
face.addColorStop(0.2,"rgba(213,154,59,1.00)");
face.addColorStop(0.4,"rgba(178,120,40,1.00)");
face.addColorStop(0.6,"rgba(213,154,59,1.00)");
face.addColorStop(0.8,"rgba(211,147,60,1.00)");
face.addColorStop(1,"rgba(178,120,40,1.00)");
ctx.fillStyle = face;
ctx.fill();
ctx.strokeStyle = "black";
ctx.lineWidth = 7;
ctx.stroke();



// SHIRT
ctx.beginPath();
ctx.moveTo(338,414);
ctx.lineTo(265,465);
ctx.quadraticCurveTo(294,529,322,535);
ctx.quadraticCurveTo(316,565,318,576);
ctx.quadraticCurveTo(376,537,410,584);
ctx.quadraticCurveTo(454,582,481,567);
ctx.quadraticCurveTo(497,517,539,516);
ctx.quadraticCurveTo(536,490,516,484);
ctx.quadraticCurveTo(553,464,564,418);
ctx.lineTo(485,379);
ctx.quadraticCurveTo(456,452,338,414)

ctx.closePath();

ctx.fillStyle = "rgba(232,194,63,1.00)";
ctx.fill();

ctx.lineWidth = 5

ctx.strokeStyle = "black"
ctx.stroke();


// EYES
//EYE 1
ctx.beginPath();
ctx.arc(298,217,30,0*Math.PI, 2*Math.PI, true);
ctx.closePath();
ctx.fillStyle = "rgba(0,0,0,1.00)";
ctx.fill();
ctx.lineWidth = 5;
ctx.lineCap = "round"
ctx.strokeStyle = "black"

ctx.stroke();
//EYE 2
ctx.beginPath();
ctx.arc(434,188,25,0*Math.PI, 2*Math.PI, true);
ctx.closePath();
ctx.fillStyle = "rgba(0,0,0,1.00)";
ctx.fill();
ctx.lineWidth = 5;
ctx.lineCap = "round"
ctx.strokeStyle = "black"

ctx.stroke();
//PUPIL
//PUPIL 1
ctx.beginPath();
ctx.arc(299,200,6,0*Math.PI, 2*Math.PI, true);
ctx.closePath();

ctx.fillStyle = "rgba(255,255,255,1.00)";
ctx.fill();
ctx.lineWidth = 3;
ctx.lineCap = "round"
ctx.strokeStyle = "black"

ctx.stroke();
ctx.beginPath();
ctx.arc(304,234,3,0*Math.PI, 2*Math.PI, true);
ctx.closePath();
ctx.fillStyle = "rgba(255,255,255,1.00)";
ctx.fill();
ctx.lineWidth = 2;
ctx.lineCap = "round"
ctx.strokeStyle = "black"

ctx.stroke();
//PUPIL 2
ctx.beginPath();
ctx.arc(429,173,6,0*Math.PI, 2*Math.PI, true);
ctx.closePath();
ctx.fillStyle = "rgba(255,255,255,1.00)";
ctx.fill();
ctx.lineWidth = 3;
ctx.lineCap = "round"
ctx.strokeStyle = "black"

ctx.stroke();
 
ctx.beginPath();
ctx.arc(446,202,3,0*Math.PI, 2*Math.PI, true);
ctx.closePath();
ctx.fillStyle = "rgba(255,255,255,1.00)";
ctx.fill();
ctx.lineWidth = 2;
ctx.lineCap = "round"
ctx.strokeStyle = "black"

ctx.stroke();

//MOUTH
ctx.beginPath();
ctx.moveTo(379,242);
ctx.bezierCurveTo(237,304,261,377,421,396);
ctx.bezierCurveTo(506,371,553,185,379,242);
ctx.fillStyle = "rgba(227,188,113,1.00)";
ctx.fill();

ctx.strokeStyle = "black";
ctx.lineWidth = 5;
ctx.stroke();

//NOSE
ctx.beginPath();
ctx.moveTo(355,273);
ctx.quadraticCurveTo(366,304,407,306);
ctx.quadraticCurveTo(435,284,432,249);
ctx.quadraticCurveTo(388,236,355,273);
ctx.closePath();
ctx.fillStyle = "rgba(90,55,92,1.00)";
ctx.fill();
ctx.lineWidth = 5

ctx.strokeStyle = "black"
ctx.stroke();
ctx.beginPath();
ctx.moveTo(400,250);
ctx.bezierCurveTo(406,264,421,263,426,252);
//ctx.quadraticCurveTo(410,268,426,252);
//ctx.closePath();
ctx.fillStyle = "rgba(240,240,240,1.00)";
ctx.fill();

ctx.lineWidth = 3

ctx.strokeStyle = "black"
ctx.stroke();
//line 1
ctx.beginPath();
ctx.moveTo(406,307);
ctx.lineTo(409,317);
ctx.lineWidth = 3

ctx.strokeStyle = "black"
ctx.stroke();
//line 2
ctx.beginPath();
ctx.moveTo(411,326);
ctx.lineTo(415,338);
ctx.lineWidth = 3

ctx.strokeStyle = "black"
ctx.stroke();

 
//line 3
ctx.beginPath();
ctx.moveTo(418,350);
ctx.lineTo(419,362);
ctx.lineWidth = 3

ctx.strokeStyle = "black"
ctx.stroke();
 

 //line 4
ctx.beginPath();
ctx.moveTo(420,371);
ctx.lineTo(421,383);
ctx.lineWidth = 3

ctx.strokeStyle = "black"
ctx.stroke();

 //line 5
ctx.beginPath();
ctx.moveTo(421,392);
ctx.lineTo(419,408);
ctx.lineWidth = 3

ctx.strokeStyle = "black"
ctx.stroke();
//PATCH
ctx.beginPath();
ctx.arc(436,496,60,0*Math.PI, 2*Math.PI, true);
ctx.closePath();
ctx.fillStyle = "rgba(236,193,36,1.00)";
ctx.fill();
ctx.lineWidth = 5;
ctx.lineCap = "round"
ctx.strokeStyle = "black"

ctx.stroke();
//EYES ON PATCH
//EYE 1


ctx.beginPath();
ctx.arc(415,479,10,0*Math.PI, 2*Math.PI, true);
ctx.closePath();
ctx.fillStyle = "rgba(0,0,0,1.00)";
ctx.fill();
ctx.lineWidth = 3;
ctx.lineCap = "round"
ctx.strokeStyle = "black"

ctx.stroke();
//EYE 2
ctx.beginPath();
ctx.arc(447,474,10,0*Math.PI, 2*Math.PI, true);
ctx.closePath();
ctx.fillStyle = "rgba(0,0,0,1.00)";
ctx.fill();
ctx.lineWidth = 3;
ctx.lineCap = "round"
ctx.strokeStyle = "black"

ctx.stroke();
// TEXT
//d
ctx.beginPath();
ctx.moveTo(416,520);
ctx.quadraticCurveTo(409,514,405,522);
ctx.quadraticCurveTo(405,534,419,528);
ctx.lineWidth = 3;
ctx.lineCap = "round"
ctx.strokeStyle = "black"

ctx.stroke();
ctx.beginPath();
ctx.moveTo(417,510);
ctx.lineTo(417,533);
ctx.lineWidth = 3;
ctx.lineCap = "round"
ctx.strokeStyle = "black"

ctx.stroke();
//r
ctx.beginPath();
ctx.moveTo(424,520);
ctx.lineTo(426,534);
ctx.lineWidth = 3;
ctx.lineCap = "round"
ctx.strokeStyle = "black"

ctx.stroke();
ctx.beginPath();
ctx.moveTo(426,524);
ctx.quadraticCurveTo(428,519,432,522);
ctx.lineWidth = 3;
ctx.lineCap = "round"
ctx.strokeStyle = "black"
ctx.stroke();
//e
ctx.beginPath();
ctx.moveTo(438,525);
ctx.lineTo(446,523);
ctx.lineWidth = 3;
ctx.lineCap = "round"
ctx.strokeStyle = "black"
ctx.stroke();
ctx.beginPath();
ctx.moveTo(446,523);
ctx.quadraticCurveTo(436,509,438,528);
ctx.quadraticCurveTo(439,534,449,532);
ctx.lineWidth = 3;
ctx.lineCap = "round"
ctx.strokeStyle = "black"
ctx.stroke();
//w
ctx.beginPath();
ctx.moveTo(454,517);
ctx.lineTo(458,524);
ctx.lineTo(461,513);
ctx.lineTo(467,522);
ctx.lineTo(468,507);
ctx.lineWidth = 3;
ctx.lineCap = "round"
ctx.strokeStyle = "black"
ctx.stroke();
//EXTRA LINES
//ON SHIRT
//left arm
ctx.beginPath();
ctx.moveTo(325,535);
ctx.lineTo(360,487);
ctx.lineWidth = 5;
ctx.lineCap = "round"
ctx.strokeStyle = "black"
ctx.stroke();
ctx.beginPath();
ctx.moveTo(350,504);
ctx.quadraticCurveTo(360,503,365,499);
ctx.lineWidth = 5;
ctx.lineCap = "round"
ctx.strokeStyle = "black"
ctx.stroke();
//shoulders
ctx.beginPath();
ctx.moveTo(340,418);
ctx.lineTo(346,430);
ctx.lineWidth = 5;
ctx.lineCap = "round"
ctx.strokeStyle = "black"
ctx.stroke();

ctx.beginPath();
ctx.moveTo(488,384);
ctx.lineTo(491,395);
ctx.lineWidth = 5;
ctx.lineCap = "round"
ctx.strokeStyle = "black"
ctx.stroke();
//on patch
ctx.beginPath();
ctx.moveTo(367,527);
ctx.lineTo(383,515);
ctx.lineWidth = 5;
ctx.lineCap = "round"
ctx.strokeStyle = "black"
ctx.stroke();
ctx.beginPath();
ctx.moveTo(467,432);
ctx.lineTo(460,453);
ctx.lineWidth = 5;
ctx.lineCap = "round"
ctx.strokeStyle = "black"
ctx.stroke();

ctx.beginPath();
ctx.moveTo(477,438);
ctx.lineTo(470,453);
ctx.lineWidth = 5;
ctx.lineCap = "round"
ctx.strokeStyle = "black"
ctx.stroke();
//right arm
ctx.beginPath();
ctx.moveTo(517,482);
ctx.quadraticCurveTo(513,443,490,437);
ctx.lineWidth = 5;
ctx.lineCap = "round"
ctx.strokeStyle = "black"
ctx.stroke();
//legs
ctx.beginPath();
ctx.moveTo(411,584);
ctx.quadraticCurveTo(415,594,413,602);
ctx.lineWidth = 5;
ctx.lineCap = "round"
ctx.strokeStyle = "black"
ctx.stroke();
ctx.beginPath();
ctx.moveTo(481,568);
ctx.lineTo(482,580)
ctx.lineWidth = 5;
ctx.lineCap = "round"
ctx.strokeStyle = "black"
ctx.stroke();
//feet
//feet 1
ctx.beginPath();
ctx.moveTo(317,583);
ctx.bezierCurveTo(258,639,311,732,378,721);
ctx.bezierCurveTo(434,658,377,562,317,583);
var feet = ctx.createRadialGradient(206,642,50, 151,473,600);
feet.addColorStop(0,"rgba(227,187,114,1.00)");
feet.addColorStop(0.2,"rgba(232,201,151,1.00)");
feet.addColorStop(0.4,"rgba(178,120,40,1.00)");
feet.addColorStop(0.6,"rgba(223,178,93,1.00)");
feet.addColorStop(0.8,"rgba(217,168,101,1.00)");
feet.addColorStop(1,"rgba(230,194,144,1.00)");
ctx.fillStyle = feet;
ctx.fill();
ctx.strokeStyle = "black";

ctx.closePath();
ctx.lineWidth = 5;
ctx.lineCap = "round"
ctx.strokeStyle = "black"
ctx.stroke();

  //feet 2
ctx.beginPath();
ctx.moveTo(573,533);
ctx.bezierCurveTo(510,519,499,674,540,675);
ctx.bezierCurveTo(600,653,605,547,573,533);
var feet = ctx.createRadialGradient(488,549,50, 151,473,600);
feet.addColorStop(0,"rgba(227,187,114,1.00)");
feet.addColorStop(0.2,"rgba(232,201,151,1.00)");
feet.addColorStop(0.4,"rgba(178,120,40,1.00)");
feet.addColorStop(0.6,"rgba(223,178,93,1.00)");
feet.addColorStop(0.8,"rgba(217,168,101,1.00)");
feet.addColorStop(1,"rgba(230,194,144,1.00)");
ctx.fillStyle = feet;
ctx.fill();
ctx.lineWidth = 5;
ctx.lineCap = "round"
ctx.strokeStyle = "black"
ctx.stroke();

//inside ear
//1
ctx.beginPath();
ctx.moveTo(208,169);
ctx.bezierCurveTo(166,128,217,102,238,143);

ctx.closePath();
ctx.fillStyle = "rgba(225,185,115,1.00)";
ctx.fill();

ctx.strokeStyle = "black";
ctx.lineWidth = 5;
ctx.stroke();
//2
ctx.beginPath();
ctx.moveTo(450,95);
ctx.bezierCurveTo(457,58,521,64,497,118);

ctx.closePath();
ctx.fillStyle = "rgba(225,185,115,1.00)";
ctx.fill();

ctx.strokeStyle = "black";
ctx.lineWidth = 5;
ctx.stroke();









Comments

Post a Comment

Popular posts from this blog

Calligram Assignment

Image
 For the calligram assignment we were asked to write a future letter to ourselves. After we wrote the letter we were asked to use these words and create a calligram of ourselves! Future Letter:  To my future self… in 20 years I hope to be a confident woman with a loving family. I hope to have a job with something in social media and striving to be the best version of myself. I hope that my children look up to me and see all the hard work that it took to get me to where I will be. Starting at a young age I was always a hard worker and a leader. However, as I began high school that did not stick with me. I was always worried about what other people would think of me and tried to conform to them, instead of being my true self and not worrying about others. Once I started college, I was still that scared little girl in the inside and was worried about being able to make friends. I started out being a nursing major because like I said before I was following what I thought was the r...
Read more

BLACK AND WHITE TO COLOR

Image
  For the black and white to color project we had to use photoshop to mask different areas of our face and create different colors. This was definitely not one of my favorite projects but once I got the hang of it, it was actually quite fun:) Above you can see 3 different versions with 3 different color pallets.  
Read more