Portfolio

For my portfolio project, I wanted to do something pretty simple. I found some inspiration online, and I particularly liked a design that had just three colors with one color being a "pop" of color. I chose to stick with gray, white, and then have a pop of color with the blue. I found the blue design online, and I decided to center my designs around it. I had some black areas, and I thought that just adding some simple lines added the effect I wanted. I added the gray half squares at the bottom of some of pages just so on my blog the edges of my pages were noticeable. I am happy with how my design came out. I think it incorporates all my projects very well. 

Business Cards

 

For my logo design, I had done a B to represent the first letter of name. The B is created by a leash and filled in by a dog's and a cat's paw print. I have always had a love for animals and volunteering at animal shelters which was my inspiration behind my logo. I mostly stuck to creating my initial sketches, but I tweaked a couple things just as I played around with inDesign. This project was one of the harder ones for me because I had never worked with inDesign before. Everything was a learning experience! My first card goes with my pink colored logo representing my favorite color. I started out by just having the background white, but after doing some experimenting, I discovered that the card popped a lot more when I did the pink background. Then, I made the part where my logo is white to contrast the two parts. I liked using the different colors for the backside because I thought it made it more interesting but still simple and legible.

My second logo was blue with a gradient in the paw prints. I made my logo a little bit bigger and had the paw prints trailing off the end of the leash to create a cool effect. I wanted to incorporate both blue colors again on the back, but I still wanted to keep things simple. My overall goal for all of my business cards was to keep them simple and to the point. I think this tactic makes it easier for employers to see who you are and get the important information. 

My last design focused on the brown and red logo. I liked using the colors in the logo in the card as well because I think it makes the card look organized. I decided to put the information on the front of the card for this one to do something different. I still wanted my logo on the front, so I outlined it with the brown color to make it more unique opposed to just a white background. I kept the backside pretty simple. I divided a paw print into the two colors and had that be the focus of the back. I thought this was cool design. My favorite card is the pink one. I really like how they all turned out though. The project took me about 2 hours to complete. I found that I had a lot of errors in my file and had to go through and fix each one. 

inDesign Tutorials

1.) https://www.youtube.com/watch?v=iHDy_nEvgd4
2.) https://www.indesignskills.com/tutorials/
3.) https://www.creativebloq.com/graphic-design-tips/indesign-tutorials-1232639

Somewhere

 

I was very excited about this project! The Office is one of my favorite shows that I just started rewatching again during quarantine, so I thought it was the perfect thing to photoshop myself into. I chose an image of the main characters sitting at a table. This way I could focus on the top half of my body. This picture also has a lot of light and little shadow. I chose to photoshop myself over where the character Pam is sitting. I took a picture of myself sitting the same way as her with my hands in my lap and my head tilted to the side. I had to clone stamp so parts of Pam that my shape didn't cover. I also redid the side of face with the shadows because the characters have light on their whole face. I had fun with this project, and I thought it turned out pretty seamless. I think it could fool some people. The project took me about 2 hours to complete. 

Photoshop Inspiration

I chose this image as the one I think would be hard to photoshop myself into. I think it would be hard because of all the different lighting and effects in the image. It would be hard to get it to be just right.

I chose this image as something that inspired me. This inspired me because it showed that you don't have to go with something that is expected. I wouldn't have thought to photoshop myself outside of the helicopter, so this image was very unique to me.

This image made me laugh. She asked to make him look like he wasn't uncomfortable, so the guy put a towel over his head. I just thought that was a funny way to solve the problem.

 This is the image that I would want to recreate. I thought it was amazing how she was photoshopped into looking like she was swimming. It is a beautiful image.

Autoscopy

For this project, I really wanted to do something that referenced an internal struggle I have that I think a lot of people can relate to. I chose to represent how I feel like society controls our decisions and how many people view their self worth. I think a lot of this negativity stems from social media, so I chose to show the puppeteer as the hand of social media. I have the puppet that social media is controlling. I wanted to also incorporate a cell phone because many people are glued to their phones and this is where we get a lot of the false standards of attractiveness and beauty from. I put my face behind the phone, but blended it in, so it looked like I was almost trapped in my phone. The swirl at the bottom is supposed to represent all the thoughts that go through my mind, how difficult it can be to navigate the rules and standards society has created. I added scissors to represent how I want to cut off the strings that tie me to social media and release me from its controls. The project took me around 3 hours to complete. I really like how it came out because I thought I represented my goal in a unique and interesting way. 

Photoshop Tutorials

1.) https://www.photoshopessentials.com

2.) https://www.youtube.com/watch?v=pFyOznL9UvA

3.) https://www.youtube.com/watch?v=2307e8iGDo0

BW to color

 


For my project, I wanted to choose a picture that wasn't just a selfie. I chose this picture because of the flower details in my dress. I thought the flowers would be fun to change the colors of and make an interesting project. The first design I did was the analogous one. I really liked the boldness of these colors. I thought they all matched together nicely and would accent the design in my dress. I stuck with using four of the colors for the flowers in my dress, and I used the first pink color for things like my hair and shoes. I wanted to do a background color, so I stuck with that same pink color. I made the background color very light, so you could focus on the other designs. I added the blue trees for some extra pop in the background.

Next, I worked on the triad design. These colors had the purples again, but changed things up by adding the yellow and greens. Instead of having different colors in the dress, I stuck with making the flowers all yellow and using this color in the trees as well. I wanted to add a pop of color again, so I did the green hair. Then, I used purple to highlight the deck which is something unique from my other designs.

Lastly, I did the double split complementary design. This color palette was my favorite because the colors were so bold and contrasting. I used two very contrasting colors for the flowers on my dress and a dark bold blue for the fabric in the middle of my dress. In this design, I changed the color of the dress from the background by making it purple. I stuck with matching my hair, bracelet, and shoes in a yellow color for something unique.

My favorite design is the analogous one. I really liked how the flowers in the dress turned out. I also really liked the pink hair. I enjoyed this project because it was fun to see how I could manipulate the colors in different ways. The project took me around three hours to complete because I had to outline each flower individually.

Logo

For my logo, I first was messing around with a couple ideas involving animals, health, and fitness. Those are the main things I thought represented me and would be good as a logo. In all of my designs, I created a B using different objects. I decided that the logo with the B made by a leash, a cat print, and a dog print was my favorite. I have always been a huge advocate for animals and have volunteered at animal shelters for most of my life. I wanted to be able to showcase for love for animals in my logo because they have always been such a huge part of my life. For my original design, I first was using two large dog paw prints, but decided making the top one smaller and a cat paw print would make the design come together. I added claws to the cat print to make them more distinguishable. Next, I needed something to outline the paw prints in order to make the B shape more noticeable. I decided using a leash would be unique and connect the whole logo together. The original black and white logo took me about an hour. It was not too complicated once I got the leash outline how I wanted it.

When moving on to adding color to my design, I wanted to keep it pretty simple. I first did the design using two different shades of pink. Pink is my favorite color, so the color tied the logo back to how it is supposed to represent me. I outlined the light pink leash with the darker pink color to tie everything together. Next, I did the blue logo. Again, I wanted to keep it simple but add a little bit of flare to the design. Blue is another one of my favorite colors and represents calm and peace. I wanted to try adding a gradient of some kind and landed on the white to blue. I thought it looked similar to the sky which brings again a peacefulness to the design. Lastly, I did the brown and red design. I thought these colors were the most realistic for the logo. Using brown on the paw prints is a common color you might see paw prints without just being black. The red leash is another basic color that makes the leash seem realistic. I am very happy with how my logo came out. My favorite design is the classic black and white version. Adding the colors only took me about 20-30 minutes. I enjoyed this project because I got to be very creative.

Tag Print

 

For this project, I started out with my simple black and white logo. When combining the logo with the different tags, I wanted to keep it pretty simple. I wanted all of the details of the dog leash and paw prints to still be noticeable. To make the inside of the B, I used a cat print and a dog print. I thought using the scratches tag in them made it look unique. The negative tag I focused mostly on the upper paw print because I didn't want it to fade away the detail in the leash. I used the soft brush outline to draw focus to the outline of the B, but I made the opacity less to make the outline less bold. I also used a spray tag in the background and made that less bold as well. The first part of the project only took me about an hour mainly because I redid the tag.

I enjoyed the second part of the project. I got to mess around with different colors and sizes. I ended up redoing this part as well because I didn't like the way it came out the first time. In my second attempt, I stuck with two tag prints. I did more of a neon color scheme for the top one. I overlapped a blue tag with a purple one. In the bottom corner, I did more dull colors. I overlapped green with pink. For both of the prints, I used colors that I thought contrasted each other so they would stand out. The second part only took me about 30 minutes to complete.
















For this

Propaganda Poster

For my initial portrait, I chose the picture I posted above. I wanted to do something out of the ordinary instead of making my image look exactly like me. I took inspiration from a portrait done of Marilyn Monroe on the internet. I liked how the image was broken up almost like a puzzle, and it used contrasting colors to stand out. The portrait took me about 3 hours. It was not as hard as I thought it was going to be. The eyes were the hardest part, but once I got the hang of it the rest went smoothly.

When I started working on the poster part, I wanted to incorporate a message that is relevant to now. I decided to focus on the coronavirus because it is changing life for everyone in the United States. I wanted to do something that was more on the happy side because everyone has been so down lately, and I am also smiling in my portrait. I incorporated the message about social distancing because it is something that is very important for people to do right now. I thought adding a little bit of humor to the message would help to make my message stand out and lighten the mood. I chose to do an analogous color scheme because I wanted to use contrasting colors on all ends of the color wheel. I chose pastel and bright colors to drive the message of trying to see the glass half full. The poster took me about 2 hours to complete. I am happy with how it turned out. 

Gradient Mesh Project

For my gradient mesh project I wanted to create a flower. In my room I have two fake pink flowers which I used for inspiration. I have always thought flowers were beautiful, and I thought it would be fun to try to recreate one using the gradient mesh. I decided to only do the bottom flower because of how time consuming the process was.

I was very unfamiliar with this tool when I started the project. I had to do each petal individually which took a lot of time and patience. I also had to really mess with the layers in order to get the petals to display correctly. I actually did not think the flower would look as good as it does. I think it looks like the actual flower. I am very happy with my final project. The assignment took me around 4 hours to complete.

Calligram Project- Midnight Train

For my calligram project, I chose to use the song "Don't Stop Believing" by Journey. This song has been a favorite of mine for years now. The lyrics talk about a boy and a girl who "take the midnight train" which is what inspired me to create a train shape. I created a simple train shape that depicts the front car of a train. The train is moving represented by the smoke coming from the car.

To make the train shape, I took ideas from a simple train drawing I saw online. I didn't want all of the words to be the same size. I wanted there to be originality in my design and have variety to it. I chose to change the font sizes in order to accomplish this goal and make the image more interesting. The smoke I made gray to represent the natural color of most smoke. I decided to make the train blue because in the song it says "midnight train" which makes me think of a dark blue night. I made the window light gray, so it would stand out from the blue and look more closely like a transparent window would. I made the tires and other parts black to stand out from the train car as well and create more variety in more design.

It was difficult at first for me to figure out how to curve the letters how I wanted to around the wheels and such. After I got the hang of manipulating the letters, it was fun to see how I could curve them and make them interesting. I have never done a project like this one before, so I really enjoyed the experience of using the words to make my image. The project took me about 3 hours to complete.

Ilustrator Tutorials

1.) https://www.creativebloq.com/digital-art/illustrator-tutorials-1232697

2.) https://www.youtube.com/watch?v=3GzumUieDPY

3.) https://www.youtube.com/watch?v=IBouhf4seWQ

Hello Kitty HTML Reflection

For my canvas project, I decided to code Hello Kitty. My project shows Hello Kitty sitting in the grass on a sunny day. I was initially inspired by other students' projects I saw of different cartoon characters. The artwork itself, is a combination of two different cartoon depictions of Hello Kitty I saw online. I took inspiration from one of her sitting and another of her standing, and I combined the two depictions together. 

This piece is meant to represent one of my favorite childhood cartoons. I was a fan of Hello Kitty when I was younger, so I thought the opportunity to learn to code her would be interesting and exciting for me. I believed that since she was a cartoon character with distinct shapes, she would be manageable to code. Once I started the project, I realized how much time the project would actually take. 

Overall, I was very proud of my finished project. It took a lot of time and work, but I'm happy that I was able to get it to how I wanted. Since I have never used Adobe Dreamweaver before, I was skeptical if I would be able to complete this project. I realized that once I got the hang of the different codes and how to manipulate them, the assignment came easier. The project took me around 15 hours in total time. 

Code:

//Background Gradient

var x = 0;

var y = 0;

var width = canvas.width;

var height = canvas.height;

var startx = 595;

var starty = 400;

var endx = 590;

var endy = 600;

context.beginPath();

context.rect(x, y, width, height);

 var grd = context.createLinearGradient(startx, starty, endx, endy);

grd.addColorStop(0, 'rgb(135, 206, 235)');

grd.addColorStop(1, 'rgb(86, 125, 70)');

context.fillStyle = grd;

context.fill();

context.stroke();

 //top arc

var centerX = 0;

        var centerY = 20

        var radius = 80;

        var startangle = 1.2* Math.PI;;

        var endangle =  0.5* Math.PI;

        context.beginPath();

        context.arc(centerX, centerY, radius, startangle, endangle, false);

        context.fillStyle = "yellow";

context.fill();

      context.lineWidth = 10;

        context.strokeStyle = "orange";

        context.stroke();

//hello kitty

 //white for left arm

var centerX = 355

var centerY = 392

var radius = 23

context.beginPath();

context.arc(centerX, centerY, radius, 0, 2*Math.PI, false);

context.lineWidth = 2;

context.strokeStyle = 'rgb(255,255,255)';

context.fillStyle ="rgb(255,255,255)"

context.fill();

context.stroke();

//pink for right arm 

var centerX = 473

var centerY = 360

var radius = 23

context.beginPath();

context.arc(centerX, centerY, radius, 0, 2*Math.PI, false);

context.lineWidth = 2;

context.strokeStyle = 'rgb(255,255,255)';

context.fillStyle ="rgb(255,192,203)"

context.fill();

context.stroke();

//white for right arm 2

var centerX = 483

var centerY = 400

var radius = 25

context.beginPath();

context.arc(centerX, centerY, radius, 0, 2*Math.PI, false);

context.lineWidth = 2;

context.strokeStyle = 'rgb(255,255,255)';

context.fillStyle ="rgb(255,255,255)"

context.fill();

context.stroke();

//pink for right arm 5

var centerX = 495

var centerY = 377

var radius = 11

context.beginPath();

context.arc(centerX, centerY, radius, 0, 2*Math.PI, false);

context.lineWidth = 2;

//context.strokeStyle = 'rgb(255,255,255)';

context.fillStyle ="rgb(255,192,203)"

context.fill();

//context.stroke();

//pink for left arm sleeve

var centerX = 372

var centerY = 355

var radius = 15

context.beginPath();

context.arc(centerX, centerY, radius, 0, 2*Math.PI, false);

context.lineWidth = 2;

context.strokeStyle = 'rgb(255,192,203)';

context.fillStyle ="rgb(255,192,203)"

context.fill();

context.stroke();

//pink for left arm sleeve 2

var centerX = 365

var centerY = 376

var radius = 10

context.beginPath();

context.arc(centerX, centerY, radius, 0, 2*Math.PI, false);

context.lineWidth = 2;

context.strokeStyle = 'rgb(255,192,203)';

context.fillStyle ="rgb(255,192,203)"

context.fill();

context.stroke();

// starting point coordinates body

var x = 465;

var y = 348;

// control point coordinates ( magnet )

var cpointX = canvas.width / 1 - 200;

var cpointY = canvas.height / 1 - 70;

// ending point coordinates

var x1 = 370;

var y1 = 500;

context.beginPath();

context.moveTo(x, y);

context.quadraticCurveTo(cpointX, cpointY, x1, y1);

context.lineWidth = 3;

context.strokeStyle = "rgb(0,0,0)";

context.stroke();

context.fillStyle = "rgb(255,8,127)"

context.fill();

 // starting point coordinates #2 body

var x = 370;

var y = 500;

// control point coordinates ( magnet )

var cpointX = canvas.width / 1 - 500;

var cpointY = canvas.height / 1 - 130;

// ending point coordinates

var x1 = 385;

var y1 = 348;

context.beginPath();

context.moveTo(x, y);

context.quadraticCurveTo(cpointX, cpointY, x1, y1);

context.lineWidth = 3;

context.strokeStyle = "rgb(0,0,0)";

context.stroke();

context.fillStyle = "rgb(255,8,127)"

context.fill();

// starting point coordinates left arm 1

var x = 345;

var y = 420;

// control point coordinates ( magnet )

var cpointX = canvas.width / 1 - 510;

var cpointY = canvas.height / 1 - 170;

// ending point coordinates

var x1 = 365;

var y1 = 340;

context.beginPath();

context.moveTo(x, y);

context.quadraticCurveTo(cpointX, cpointY, x1, y1);

context.lineWidth = 3;

context.strokeStyle = "rgb(0,0,0)";

context.stroke();

context.fillStyle = 'rgb(255,255,255)';

context.fill();

//pink for left arm sleeve 2

var centerX = 356

var centerY = 370

var radius = 10

context.beginPath();

context.arc(centerX, centerY, radius, 0, 2*Math.PI, false);

context.lineWidth = 2;

context.strokeStyle = 'rgb(255,192,203)';

context.fillStyle ="rgb(255,192,203)"

context.fill();

context.stroke();

//pink for left arm sleeve 3

var centerX = 362

var centerY = 360

var radius = 10

context.beginPath();

context.arc(centerX, centerY, radius, 0, 2*Math.PI, false);

context.lineWidth = 2;

context.strokeStyle = 'rgb(255,192,203)';

context.fillStyle ="rgb(255,192,203)"

context.fill();

context.stroke();

//pink for left arm sleeve 4

var centerX = 367

var centerY = 354

var radius = 10

context.beginPath();

context.arc(centerX, centerY, radius, 0, 2*Math.PI, false);

context.lineWidth = 2;

context.strokeStyle = 'rgb(255,192,203)';

context.fillStyle ="rgb(255,192,203)"

context.fill();

context.stroke();

// starting point coordinates right arm 2

var x = 485;

var y = 340;

// control point coordinates ( magnet )

var cpointX = canvas.width / 1 - 247;

var cpointY = canvas.height / 1 - 172;

// ending point coordinates

var x1 = 508;

var y1 = 420;

context.beginPath();

context.moveTo(x, y);

context.quadraticCurveTo(cpointX, cpointY, x1, y1);

context.lineWidth = 3;

context.strokeStyle = "rgb(0,0,0)";

context.stroke();

context.fillStyle = 'rgb(255,255,255)';

context.fill();

//pink for right arm 

var centerX = 480

var centerY = 350

var radius = 10

context.beginPath();

context.arc(centerX, centerY, radius, 0, 2*Math.PI, false);

context.lineWidth = 2;

//context.strokeStyle = 'rgb(255,255,255)';

context.fillStyle ="rgb(255,192,203)"

context.fill();

//context.stroke();

//pink for right arm 2

var centerX = 487

var centerY = 358

var radius = 10

context.beginPath();

context.arc(centerX, centerY, radius, 0, 2*Math.PI, false);

context.lineWidth = 2;

//context.strokeStyle = 'rgb(255,255,255)';

context.fillStyle ="rgb(255,192,203)"

context.fill();

//context.stroke();

//pink for right arm 3

var centerX = 493

var centerY = 367

var radius = 10

context.beginPath();

context.arc(centerX, centerY, radius, 0, 2*Math.PI, false);

context.lineWidth = 2;

//context.strokeStyle = 'rgb(255,255,255)';

context.fillStyle ="rgb(255,192,203)"

context.fill();

//context.stroke();

//pink for right arm 4

var centerX = 495

var centerY = 370

var radius = 10

context.beginPath();

context.arc(centerX, centerY, radius, 0, 2*Math.PI, false);

context.lineWidth = 2;

//context.strokeStyle = 'rgb(255,255,255)';

context.fillStyle ="rgb(255,192,203)"

context.fill();

//context.stroke();

//Rectangle

var x=395;

var y=355;

var width = 60

var height= 100;

context.beginPath();

context.rect(x, y, width, height);

context.lineWidth = 10;

context.fillStyle = 'rgb(255,8,127)';

//context.strokeStyle = 'rgb(255,0,0)';

context.fill();

//context.stroke();

//Rectangle 1

var x=405;

var y=345;

var width = 60

var height= 100;

context.beginPath();

context.rect(x, y, width, height);

context.lineWidth = 10;

context.fillStyle = 'rgb(255,8,127)';

//context.strokeStyle = 'rgb(255,0,0)';

context.fill();

//context.stroke();

//Rectangle 1.5

var x=384;

var y=345;

var width = 60

var height= 100;

context.beginPath();

context.rect(x, y, width, height);

context.lineWidth = 10;

context.fillStyle = 'rgb(255,8,127)';

//context.strokeStyle = 'rgb(255,0,0)';

context.fill();

//context.stroke();

//Rectangle 1.8

var x=375;

var y=365;

var width = 60

var height= 100;

context.beginPath();

context.rect(x, y, width, height);

context.lineWidth = 10;

context.fillStyle = 'rgb(255,8,127)';

//context.strokeStyle = 'rgb(255,0,0)';

context.fill();

//context.stroke();

//Rectangle 2

var x=387;

var y=365;

var width = 40

var height= 100;

context.beginPath();

context.rect(x, y, width, height);

context.lineWidth = 10;

context.fillStyle = 'rgb(255,8,127)';

//context.strokeStyle = 'rgb(255,0,0)';

context.fill();

//context.stroke();

//Rectangle 3

var x=378;

var y=378;

var width = 40

var height= 100;

context.beginPath();

context.rect(x, y, width, height);

context.lineWidth = 10;

context.fillStyle = 'rgb(255,8,127)';

//context.strokeStyle = 'rgb(255,0,0)';

context.fill();

//context.stroke();

//botom arc pink shirt

       

var centerX = canvas.width / 1.88;

        var centerY = canvas.height / 1.80;

        var radius = 30;

        var startangle = 0.5;

        var endangle =  0.85* Math.PI;

        context.beginPath();

        context.arc(centerX, centerY, radius, startangle, endangle, false);

      context.lineWidth = 3;

context.fillStyle = "pink";

context.fill();

        context.strokeStyle = "black";

        context.stroke();

// starting point coordinates cheek 1

var x = 530;

var y = 290;

// control point coordinates ( magnet )

var cpointX = canvas.width / 1 - 300;

var cpointY = canvas.height / 1 - 225;

// ending point coordinates

var x1 = 340;

var y1 = 335;

context.beginPath();

context.moveTo(x, y);

context.quadraticCurveTo(cpointX, cpointY, x1, y1);

context.lineWidth = 3;

context.strokeStyle = "rgb(0,0,0)";

context.stroke();

context.fillStyle = "rgb(255,255,255)"

context.fill();

// starting point coordinates cheek 2

var x = 400;

var y = 205;

// control point coordinates ( magnet )

var cpointX = canvas.width / 1 - 250;

var cpointY = canvas.height / 1 - 405;

// ending point coordinates

var x1 = 530;

var y1 = 290;

context.beginPath();

context.moveTo(x, y);

context.quadraticCurveTo(cpointX, cpointY, x1, y1);

context.lineWidth = 3;

context.strokeStyle = "rgb(0,0,0)";

context.stroke();

context.fillStyle = "rgb(255,255,255)"

context.fill();

// cheek left 

var x = 400;

var y = 205;

// control point coordinates ( magnet )

var cpointX = canvas.width / 2 - 110;

var cpointY = canvas.height / 2 - 84;

// ending point coordinates

var x1 = 310;

var y1 = 290;

context.beginPath();

context.moveTo(x, y);

context.quadraticCurveTo(cpointX, cpointY, x1, y1);

context.lineWidth = 3;

context.strokeStyle = "rgb(0,0,0)";

context.stroke();

context.fillStyle = "rgb(255,255,255)"

context.fill();

// cheek left bottom

var x = 310;

var y = 290;

// control point coordinates ( magnet )

var cpointX = canvas.width / 2 - 85;

var cpointY = canvas.height / 1 - 285;

// ending point coordinates

var x1 = 340;

var y1 = 335;

context.beginPath();

context.moveTo(x, y);

context.quadraticCurveTo(cpointX, cpointY, x1, y1);

context.lineWidth = 3;

context.strokeStyle = "rgb(0,0,0)";

context.stroke();

context.fillStyle = "rgb(255,255,255)"

context.fill();

//right ear

var x = 520;

var y = 218;

var controlX = 530;

var controlY = 190;

var x1 = 512;

var y1 = 174;

var controlX1 = 490;

var controlY1 = 170;

var x2 = 465;

var y2 = 206;

context.beginPath();

context.moveTo(x, y);

context.quadraticCurveTo(controlX, controlY, x1, y1);

context.quadraticCurveTo(controlX1, controlY1, x2, y2);

context.fillStyle = 'rgb(255, 255, 255)';

context.fill();

context.lineWidth = 3;

context.strokeStyle = "rgb(0,0,0)";

context.stroke();

//left ear

var x = 380;

var y = 208;

var controlX = 380;

var controlY = 190;

var x1 = 332;

var y1 = 174;

var controlX1 = 310;

var controlY1 = 210;

var x2 = 325;

var y2 = 226;

context.beginPath();

context.moveTo(x, y);

context.quadraticCurveTo(controlX, controlY, x1, y1);

context.quadraticCurveTo(controlX1, controlY1, x2, y2);

context.fillStyle = 'rgb(255, 255, 255)';

context.fill();

context.lineWidth = 3;

context.strokeStyle = "rgb(0,0,0)";

context.stroke();

//left white fill circle 

var centerX = 392

var centerY = 273

var radius = 67

context.beginPath();

context.arc(centerX, centerY, radius, 0, 2*Math.PI, false);

context.lineWidth = 2;

//context.strokeStyle = 'rgb(0,0,0)';

context.fillStyle ="rgb(255,255,255)"

context.fill();

//context.stroke();

//left white fill circle 2

var centerX = 462

var centerY = 273

var radius = 67

context.beginPath();

context.arc(centerX, centerY, radius, 0, 2*Math.PI, false);

context.lineWidth = 2;

//context.strokeStyle = 'rgb(0,0,0)';

context.fillStyle ="rgb(255,255,255)"

context.fill();

//context.stroke();

//bow

//side of bow

 // starting point coordinates

var x = 473;

var y = 235;

// control point 1 coordinates ( magnet )

var cpointX1 = canvas.width / 1.9;

var cpointY1 = canvas.height / 2 - 8;

// control point 2 coordinates ( magnet )

var cpointX2 = canvas.width / 1.9;

var cpointY2 = canvas.height / 2 - 165; 

// ending point coordinates 

var x1 = 476;

var y1 = 210;

context.beginPath();

context.moveTo(x, y);

context.bezierCurveTo(cpointX1, cpointY1, cpointX2, cpointY2, x1, y1);

context.lineWidth = 6;

context.strokeStyle = "rgb(0,0,0)";

context.lineCap = 'round' 

context.stroke();

context.fillStyle ="rgb(255,8,127)"

context.fill(); 

//side of bow right

 // starting point coordinates

var x = 508;

var y = 217;

// control point 1 coordinates ( magnet )

var cpointX1 = canvas.width / 1.35;

var cpointY1 = canvas.height / 2 - 108;

// control point 2 coordinates ( magnet )

var cpointX2 = canvas.width / 1.6;

var cpointY2 = canvas.height / 2 - 1; 

// ending point coordinates 

var x1 = 505;

var y1 = 240;

context.beginPath();

context.moveTo(x, y);

context.bezierCurveTo(cpointX1, cpointY1, cpointX2, cpointY2, x1, y1);

context.lineWidth = 6;

context.strokeStyle = "rgb(0,0,0)";

context.lineCap = 'round' 

context.stroke();

context.fillStyle ="rgb(255,8,127)"

context.fill();

//circle of bow

var centerX = 490

var centerY = 227

var radius = 17

context.beginPath();

context.arc(centerX, centerY, radius, 0, 2*Math.PI, false);

context.lineWidth = 4;

context.strokeStyle = 'rgb(0,0,0)';

context.fillStyle ="rgb(255,8,127)"

context.fill();

context.stroke();

//nose

var centerX = 426

var centerY = 307

var radius = 6

context.beginPath();

context.arc(centerX, centerY, radius, 0, 2*Math.PI, false);

context.lineWidth = 2;

context.strokeStyle = 'rgb(0,0,0)';

context.fillStyle ="rgb(248,222,126)"

context.fill();

context.stroke();

//right eye

var centerX = 470

var centerY = 277

var radius = 9

context.beginPath();

context.arc(centerX, centerY, radius, 0, 2*Math.PI, false);

context.lineWidth = 2;

context.strokeStyle = 'rgb(0,0,0)';

context.fillStyle ="rgb(0,0,0)"

context.fill();

context.stroke();

//whiskers 1

context.moveTo(505,305); // COORDINATES OF STARTING POINT

context.lineTo(545,318); // COORDS OF ENDING POINT 1

context.lineWidth = 3; // STROKE WIDTH

context.stroke(); // STROKE

//middle right

context.moveTo(505,290); // COORDINATES OF STARTING POINT

context.lineTo(545,295); // COORDS OF ENDING POINT 1

context.lineWidth = 3; // STROKE WIDTH

context.stroke(); // STROKE

//top right

context.moveTo(505,280); // COORDINATES OF STARTING POINT

context.lineTo(548,270); // COORDS OF ENDING POINT 1

context.lineWidth = 3; // STROKE WIDTH

context.stroke(); // STROKE

//left top foot

// starting point coordinates

var x = 335;

var y = 455;

// control point coordinates ( magnet )

var cpointX = canvas.width / 2 - 35;

var cpointY = canvas.height / 2 + 125;

// ending point coordinates

var x1 = 395;

var y1 = 455;

context.beginPath();

context.moveTo(x, y);

context.quadraticCurveTo(cpointX, cpointY, x1, y1);

context.lineWidth = 5;

context.strokeStyle = "rgb(0,0,0)";

context.stroke();

context.fillStyle = "rgb(255,255,255)"

context.fill();

//left bottom foot

// starting point coordinates

var x = 335;

var y = 455;

// control point coordinates ( magnet )

var cpointX = canvas.width / 2 - 75;

var cpointY = canvas.height / 1 - 105;

// ending point coordinates

var x1 = 345;

var y1 = 510;

context.beginPath();

context.moveTo(x, y);

context.quadraticCurveTo(cpointX, cpointY, x1, y1);

context.lineWidth = 5;

context.strokeStyle = "rgb(0,0,0)";

context.stroke();

context.fillStyle = "rgb(255,255,255)"

context.fill();

//leftt bottom foot2

// starting point coordinates

var x = 335;

var y = 455;

// control point coordinates ( magnet )

var cpointX = canvas.width / 2 - 75;

var cpointY = canvas.height / 1 - 105;

// ending point coordinates

var x1 = 345;

var y1 = 510;

context.beginPath();

context.moveTo(x, y);

context.quadraticCurveTo(cpointX, cpointY, x1, y1);

context.lineWidth = 5;

context.strokeStyle = "rgb(0,0,0)";

context.stroke();

context.fillStyle = "rgb(255,255,255)"

context.fill();

//left bottom foot 3

// starting point coordinates

var x = 345;

var y = 510;

// control point coordinates ( magnet )

var cpointX = canvas.width / 1 - 395;

var cpointY = canvas.height / 1 - 78;

// ending point coordinates

var x1 = 395;

var y1 = 455;

context.beginPath();

context.moveTo(x, y);

context.quadraticCurveTo(cpointX, cpointY, x1, y1);

context.lineWidth = 5;

context.strokeStyle = "rgb(0,0,0)";

context.stroke();

context.fillStyle = "rgb(255,255,255)"

context.fill();

//right bottom foot2

// starting point coordinates

var x = 455;

var y = 450;

// control point coordinates ( magnet )

var cpointX = canvas.width / 1 - 355;

var cpointY = canvas.height / 1 - 105;

// ending point coordinates

var x1 = 470;

var y1 = 510;

context.beginPath();

context.moveTo(x, y);

context.quadraticCurveTo(cpointX, cpointY, x1, y1);

context.lineWidth = 5;

context.strokeStyle = "rgb(0,0,0)";

context.stroke();

context.fillStyle = "rgb(255,255,255)"

context.fill();

//right bottom foot 3

// starting point coordinates

var x = 470;

var y = 510;

// control point coordinates ( magnet )

var cpointX = canvas.width / 1 - 273;

var cpointY = canvas.height / 2 + 215;

// ending point coordinates

var x1 = 515;

var y1 = 450;

context.beginPath();

context.moveTo(x, y);

context.quadraticCurveTo(cpointX, cpointY, x1, y1);

context.lineWidth = 5;

context.strokeStyle = "rgb(0,0,0)";

context.stroke();

context.fillStyle = "rgb(255,255,255)"

context.fill();

//right top foot

// starting point coordinates

var x = 455;

var y = 450;

// control point coordinates ( magnet )

var cpointX = canvas.width / 1 - 315;

var cpointY = canvas.height / 2 + 125;

// ending point coordinates

var x1 = 515;

var y1 = 450;

context.beginPath();

context.moveTo(x, y);

context.quadraticCurveTo(cpointX, cpointY, x1, y1);

context.lineWidth = 5;

context.strokeStyle = "rgb(0,0,0)";

context.stroke();

context.fillStyle = "rgb(255,255,255)"

context.fill();

//white for right foot 

var centerX = 492

var centerY = 463

var radius = 24

context.beginPath();

context.arc(centerX, centerY, radius, 0, 2*Math.PI, false);

context.lineWidth = 2;

context.strokeStyle = 'rgb(255,255,255)';

context.fillStyle ="rgb(255,255,255)"

context.fill();

context.stroke();

//white for right foot 2

var centerX = 478

var centerY = 463

var radius = 24

context.beginPath();

context.arc(centerX, centerY, radius, 0, 2*Math.PI, false);

context.lineWidth = 2;

context.strokeStyle = 'rgb(255,255,255)';

context.fillStyle ="rgb(255,255,255)"

context.fill();

context.stroke();

//white for right foot 3

var centerX = 478

var centerY = 484.5

var radius = 24

context.beginPath();

context.arc(centerX, centerY, radius, 0, 2*Math.PI, false);

context.lineWidth = 2;

context.strokeStyle = 'rgb(255,255,255)';

context.fillStyle ="rgb(255,255,255)"

context.fill();

context.stroke();

//white for left foot 3

var centerX = 358

var centerY = 487

var radius = 24

context.beginPath();

context.arc(centerX, centerY, radius, 0, 2*Math.PI, false);

context.lineWidth = 2;

context.strokeStyle = 'rgb(255,255,255)';

context.fillStyle ="rgb(255,255,255)"

context.fill();

context.stroke();

//white for left foot 2

var centerX = 365

var centerY = 472

var radius = 31

context.beginPath();

context.arc(centerX, centerY, radius, 0, 2*Math.PI, false);

context.lineWidth = 2;

context.strokeStyle = 'rgb(255,255,255)';

context.fillStyle ="rgb(255,255,255)"

context.fill();

context.stroke();

//white for face

var centerX = 353

var centerY = 307

var radius = 29

context.beginPath();

context.arc(centerX, centerY, radius, 0, 2*Math.PI, false);

context.lineWidth = 2;

context.strokeStyle = 'rgb(255,255,255)';

context.fillStyle ="rgb(255,255,255)"

context.fill();

context.stroke();

//white for face 2

var centerX = 341.5

var centerY = 290

var radius = 29

context.beginPath();

context.arc(centerX, centerY, radius, 0, 2*Math.PI, false);

context.lineWidth = 2;

context.strokeStyle = 'rgb(255,255,255)';

context.fillStyle ="rgb(255,255,255)"

context.fill();

context.stroke();

//whiskers line 1

context.beginPath();

  context.moveTo(290,318);

  context.lineTo(330,305);

  context.lineWidth = 3;

  context.strokeStyle = 'rgb(0,0,0)';

  context.lineCap = 'square';

  context.stroke();

//whiskers line 2

context.beginPath();

  context.moveTo(288,295);

  context.lineTo(328,290);

  context.lineWidth = 3;

  context.strokeStyle = 'rgb(0,0,0)';

  context.lineCap = 'square';

  context.stroke();

//whiskers line 3

context.beginPath();

  context.moveTo(288,270);

  context.lineTo(328,280);

  context.lineWidth = 3;

  context.strokeStyle = 'rgb(0,0,0)';

  context.lineCap = 'square';

  context.stroke();

//left eye

var centerX = 377

var centerY = 277

var radius = 9

context.beginPath();

context.arc(centerX, centerY, radius, 0, 2*Math.PI, false);

context.lineWidth = 2;

context.strokeStyle = 'rgb(0,0,0)';

context.fillStyle ="rgb(0,0,0)"

context.fill();

context.stroke();

//pink shirt sleeve left arm 

context.beginPath();

  context.moveTo(342,370);

  context.lineTo(359,388);

  context.lineWidth = 3;

  context.strokeStyle = 'rgb(0,0,0)';

  context.lineCap = 'square';

  context.stroke();

//pink shirt sleeve right arm 

context.beginPath();

  context.moveTo(507,370);

  context.lineTo(495,388);

  context.lineWidth = 3;

  context.strokeStyle = 'rgb(0,0,0)';

  context.lineCap = 'square';

  context.stroke();