Logo Critiques

1. This logo is just a simple silhouette but it is still very memorable. Kids will recognize it as a Disney symbol and know that the movie is meant for them when the logo shows up before the film. Even without Walt Disney's signature, the logo is just as recognizable as a Disney figure. Recently, before films they have been using a really detailed CGI version of the castle instead of just the silhouette. They are trying to keep the logo as timeless as possible. 

2. I like this logo because it is extremely simple, on consisting of words with a simple font, yet it is still recognizable and memorable. The simplicity of the colors makes it stick out more than if it was just the words FedEx. I really like that an arrow forms between the E and X, giving the impression to the customers that their product is always moving forward. Even though the company stands for Federal Express, the abbreviation, FedEx, is catchier and more unique. This logo has great usability, it could be on anything at any size, from their planes and buses to a small package. It is very durable as well, I do not think they have ever changed their logo and since it is so simple, their logo design is timeless.

3. This company Quiksilver/Roxy was smart enough to release two separate brands, surfing gear/clothes for men and women. I really love how they simply used the Quiksilver logo, rotated and doubled it, to make the Roxy logo, which happens to form the shape of a heart. I think they used this for the girls to make it seem "girlier" and more appealing to girls for a surfing brand. The company has great durability, they have not changed either logo since they have released the company. Sometimes on t-shirts they will add textures and different colors, but never drastically altering with the logo.

4. This is the logo for the popular social media website Twitter. The website revolves around "tweets" which is why the creators chose a bird for the logo. I like this logo because it doesn't need any words to get it's purpose across. Which also makes it very universal. People from all over the world of different nationalities and cultures use this website, and all it takes is a bird and a recognizable blue color to be recognized. This logo is seen as small as an app on a phone or it could be on a huge billboard, it has great usability. They have only modified the bird slightly since releasing the website to keep it as up to date as possible.

5. Before XBOX was released, I had never heard the term before. It's name is so unique that you could never confuse the name with another company. When the gaming system first came out, their logo was slightly different. Now they have changed it to seem more futuristic and new. In this day and age, the words "XBOX 360" do not need to be there in order to be recognized. People from around the world use this system and clearly know the XBOX sign when they see one.

My Company/Product Ideas

1. Cerberus: Cerberus is a 3 headed dog in Greek and Roman mythology. I would use this figure as a symbol for a hot dog restaurant and maybe incorporate the 3 headed dog holding or eating hot dogs. The logo could be on the restaurant sign as well as their napkins and possibly t-shirts.

2. Smell O' Vision: A TV that excretes scents as you watch a program. The logo would have a giant nose and possibly a TV underneath it.

3. WallFlower Productions: I like the idea of a simple, lone flower design for a production company. This design would be shown before movies or extremely small at the bottom of posters.

4. Big Foot: A shoe company for people with oversized feet. The logo could be either a gorilla or just a simple footprint. The logo would be seen on the product's box and the bottom of the shoes.

5. Submerged: A scuba diving company selling all of their own scuba gear. Logo would be on everything from goggles to fins. Might have to be small so the design would have to be quite simple.

Ascii Pac-Man Project

From the moment we received this assignment I knew I wanted to do a Pac-Man game for my graphic.  I started by printing out a graph and drawing the layout of the game, looking at a Google image of a Pac-Man game to make sure everything looked the same.  At first the graph helped me immensely with the coding for the border, however, once it was time to create the ghosts, some of the points had to be guesstimated.  In order to get the exact colors from the game I uploaded the Google image of the Pac-Man game onto PhotoShop. Then I used the eyedropper tool to pick up the different colors and used their RGB codes to enter into TextWrangler.  The borders of the game, as well as some of the odd shapes, were made with lines.  Some of the other boxes were made using  rectangles.  Pac-Man was made using 2 circles; I just played around with the points until it made just what I wanted!  The ghosts were started using quadratic curves and then finished off using lines. In order to make the cherry’s stems I used quadratic and Bezier curves. The actual cherry and the circles that Pac-Man eats are simply just made of circles.

I think my piece is successful because it is immediately recognizable. Most people know Pac-Man, have played the game, or at least know what the game is about. I love the way the graphic turned out and I am extremely proud of it.  Below is the Google image I used as a reference, the graph I drew on as a guide, and my code.

CODE:

<!DOCTYPE HTML>

<html>

<head>

<script>

window.onload = function() {

var canvas = document.getElementById("myCanvas");

var context = canvas.getContext("2d");

////////////////////////////////////// start below this line ˇˇˇˇˇˇˇˇˇˇ

//BLACK BACKGROUND

context.beginPath();

context.rect(0, 0, 800, 600);

//COLOR FILL

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

context.fill();

context.stroke();

//LEFT LINE

context.beginPath();

context.moveTo(5, 200);

context.lineTo(5, 5);

context.lineTo(375, 5);

context.lineTo(375, 100);

context.lineTo(425, 100);

context.lineTo(425, 5);

context.lineTo(795, 5);

context.lineTo(795, 200);

context.lineTo(650, 200);

context.lineTo(650, 280);

context.lineTo(795, 280);

context.lineTo(795, 340);

context.lineTo(650, 340);

context.lineTo(650, 420);

context.lineTo(796, 420);

context.lineTo(795, 500);

context.lineTo(720, 500);

context.lineTo(720, 530);

context.lineTo(795, 530);

context.lineTo(795, 595);

context.lineTo(5, 595);

context.lineTo(5, 530);

//LEFT SIDE BOTTOM

context.lineTo(90, 530);

context.lineTo(90, 500);

context.lineTo(5, 500);

context.lineTo(5, 420);

context.lineTo(150, 420);

context.lineTo(150, 340);

context.lineTo(5, 340);

context.lineTo(5, 280);

context.lineTo(150, 280);

context.lineTo(150, 200);

context.lineTo(5, 200);

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

context.lineWidth = 4;

context.stroke();

//INNER RECTANGLE

context.beginPath();

context.moveTo(375, 280);

context.lineTo(300, 280);

context.lineTo(300, 380);

context.lineTo(500, 380);

context.lineTo(500, 280);

context.lineTo(425, 280);

context.lineWidth = 5;

context.stroke();

//LINE ABOVE INNER RECTANGLE

context.beginPath();

context.moveTo(375, 278);

context.lineTo(425, 278);

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

context.lineWidth = 3.5;

context.stroke();

//MAZE UNDER BOX

context.beginPath();

context.moveTo(300, 430);

context.lineTo(500, 430);

context.lineTo(500, 450);

context.lineTo(430, 450);

context.lineTo(430, 489);

context.lineTo(380, 489);

context.lineTo(380, 450);

context.lineTo(300, 450);

context.lineTo(300, 430);

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

context.lineWidth = 3;

context.stroke();

//MAZE UNDER BOX2

context.beginPath();

context.moveTo(300, 530);

context.lineTo(500, 530);

context.lineTo(500, 550);

context.lineTo(430, 550);

context.lineTo(430, 585);

context.lineTo(380, 585);

context.lineTo(380, 550);

context.lineTo(300, 550);

context.lineTo(300, 530);

context.stroke();

//LEFT BOX TOP-BOTTOM

context.beginPath();

context.rect(50, 140, 130, 30);

context.stroke();

//MIDDLE MAZE-LEFT SIDE

context.beginPath();

context.moveTo(220, 170);

context.lineTo(220, 340);

context.lineTo(240, 340);

context.lineTo(240, 255);

context.lineTo(280, 255);

context.lineTo(280, 235);

context.lineTo(240, 235);

context.lineTo(240, 170);

context.lineTo(220, 170);

context.stroke();

//MIDDLE MAZE-RIGHT SIDE

context.beginPath();

context.moveTo(580, 170);

context.lineTo(580, 340);

context.lineTo(560, 340);

context.lineTo(560, 255);

context.lineTo(520, 255);

context.lineTo(520, 235);

context.lineTo(560, 235);

context.lineTo(560, 170);

context.lineTo(580, 170);

context.stroke();

//UNDERNEATH MIDDLE MAZE-LEFT

context.beginPath();

context.moveTo(220, 400);

context.lineTo(220, 460);

context.lineTo(240, 460);

context.lineTo(240, 400);

context.lineTo(220, 400);

context.stroke();

//BOTTOM MAZE--LEFT

context.beginPath();

context.moveTo(220, 520);

context.lineTo(220, 555);

context.lineTo(128, 555);

context.lineTo(128, 578);

context.lineTo(250, 578);

context.lineTo(250, 520);

context.lineTo(220, 520);

context.stroke();

//BOTTOM MAZE--RIGHT***

context.beginPath();

context.moveTo(580, 520);

context.lineTo(580, 555);

context.lineTo(672, 555);

context.lineTo(672, 578);

context.lineTo(550, 578);

context.lineTo(550, 520);

context.lineTo(580, 520);

context.stroke();

//UNDERNEATH MIDDLE MAZE--RIGHT

context.beginPath();

context.moveTo(580, 400);

context.lineTo(580, 460);

context.lineTo(560, 460);

context.lineTo(560, 400);

context.lineTo(580, 400);

context.stroke();

//LEFT SIDE CORNER MAZE

context.beginPath();

context.moveTo(60, 455);

context.lineTo(155, 455);

context.lineTo(155, 530);

context.lineTo(130, 530);

context.lineTo(130, 480);

context.lineTo(60, 480);

context.lineTo(60, 455);

context.stroke();

//RIGHT SIDE CORNER MAZE

context.beginPath();

context.moveTo(740, 455);

context.lineTo(645, 455);

context.lineTo(645, 530);

context.lineTo(670, 530);

context.lineTo(670, 480);

context.lineTo(740, 480);

context.lineTo(740, 455);

context.stroke();

//BIG--ENERGY CIRCLE

context.beginPath();

context.arc(28, 60, 13, 0 , 2 * Math.PI, true);

context.lineWidth = 3;

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

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

context.fill();

context.stroke();

//BIG--ENERGY CIRCLE2 (RIGHT SIDE)

context.beginPath();

context.arc(768, 470, 13, 0 , 2 * Math.PI, true);

context.lineWidth = 3;

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

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

context.fill();

context.stroke();

//SMALL ENERGY CIRCLE1

context.beginPath();

context.arc(28, 90, 3 , 0 , 2 * Math.PI, true);

context.lineWidth = 3;

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

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

context.fill();

context.stroke();

//SMALL ENERGY CIRCLE2

context.beginPath();

context.arc(28, 115, 3 , 0 , 2 * Math.PI, true);

context.lineWidth = 3;

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

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

context.fill();

context.stroke();

//SMALL ENERGY CIRCLE3

context.beginPath();

context.arc(55, 115, 3 , 0 , 2 * Math.PI, true);

context.lineWidth = 3;

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

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

context.fill();

context.stroke();

//SMALL ENERGY CIRCLE4

context.beginPath();

context.arc(85, 115, 3 , 0 , 2 * Math.PI, true);

context.lineWidth = 3;

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

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

context.fill();

context.stroke();

//SMALL ENERGY CIRCLE5

context.beginPath();

context.arc(115, 115, 3 , 0 , 2 * Math.PI, true);

context.lineWidth = 3;

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

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

context.fill();

context.stroke();

//SMALL ENERGY CIRCLE6

context.beginPath();

context.arc(145, 115, 3 , 0 , 2 * Math.PI, true);

context.lineWidth = 3;

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

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

context.fill();

context.stroke();

//SMALL ENERGY CIRCLE7

context.beginPath();

context.arc(175, 115, 3 , 0 , 2 * Math.PI, true);

context.lineWidth = 3;

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

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

context.fill();

context.stroke();

//SMALL ENERGY CIRCLE8

context.beginPath();

context.arc(205, 115, 3 , 0 , 2 * Math.PI, true);

context.lineWidth = 3;

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

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

context.fill();

context.stroke();

//SMALL ENERGY1--RIGHT SIDE

context.beginPath();

context.arc(650, 438, 3 , 0 , 2 * Math.PI, true);

context.lineWidth = 3;

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

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

context.fill();

context.stroke();

//SMALL ENERGY2--RIGHT SIDE

context.beginPath();

context.arc(680, 438, 3 , 0 , 2 * Math.PI, true);

context.lineWidth = 3;

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

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

context.fill();

context.stroke();

//SMALL ENERGY3--RIGHT SIDE

context.beginPath();

context.arc(710, 438, 3 , 0 , 2 * Math.PI, true);

context.lineWidth = 3;

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

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

context.fill();

context.stroke();

//SMALL ENERGY4--RIGHT SIDE

context.beginPath();

context.arc(740, 438, 3 , 0 , 2 * Math.PI, true);

context.lineWidth = 3;

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

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

context.fill();

context.stroke();

//SMALL ENERGY5--RIGHT SIDE

context.beginPath();

context.arc(770, 438, 3 , 0 , 2 * Math.PI, true);

context.lineWidth = 3;

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

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

context.fill();

context.stroke();

//SMALL ENERGY1--MIDDLE

context.beginPath();

context.arc(407, 510, 3 , 0 , 2 * Math.PI, true);

context.lineWidth = 3;

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

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

context.fill();

context.stroke();

//SMALL ENERGY2--MIDDLE

context.beginPath();

context.arc(437, 510, 3 , 0 , 2 * Math.PI, true);

context.lineWidth = 3;

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

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

context.fill();

context.stroke();

//SMALL ENERGY3--MIDDLE

context.beginPath();

context.arc(467, 510, 3 , 0 , 2 * Math.PI, true);

context.lineWidth = 3;

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

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

context.fill();

context.stroke();

//SMALL ENERGY4--MIDDLE

context.beginPath();

context.arc(497, 510, 3 , 0 , 2 * Math.PI, true);

context.lineWidth = 3;

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

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

context.fill();

context.stroke();

//SMALL ENERGY5--MIDDLE

context.beginPath();

context.arc(377, 510, 3 , 0 , 2 * Math.PI, true);

context.lineWidth = 3;

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

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

context.fill();

context.stroke();

//SMALL ENERGY6--MIDDLE

context.beginPath();

context.arc(347, 510, 3 , 0 , 2 * Math.PI, true);

context.lineWidth = 3;

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

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

context.fill();

context.stroke();

//SMALL ENERGY7--MIDDLE

context.beginPath();

context.arc(317, 510, 3 , 0 , 2 * Math.PI, true);

context.lineWidth = 3;

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

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

context.fill();

context.stroke();

//SMALL ENERGY1--TOP RIGHT

context.beginPath();

context.arc(772, 110, 3 , 0 , 2 * Math.PI, true);

context.lineWidth = 3;

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

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

context.fill();

context.stroke();

//SMALL ENERGY2--TOP RIGHT

context.beginPath();

context.arc(772, 140, 3 , 0 , 2 * Math.PI, true);

context.lineWidth = 3;

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

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

context.fill();

context.stroke();

//SMALL ENERGY3--TOP RIGHT

context.beginPath();

context.arc(772, 170, 3 , 0 , 2 * Math.PI, true);

context.lineWidth = 3;

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

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

context.fill();

context.stroke();

//SMALL ENERGY4--TOP RIGHT

context.beginPath();

context.arc(772, 80, 3 , 0 , 2 * Math.PI, true);

context.lineWidth = 3;

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

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

context.fill();

context.stroke();

//SMALL ENERGY5 --TOP RIGHT

context.beginPath();

context.arc(772, 50, 3 , 0 , 2 * Math.PI, true);

context.lineWidth = 3;

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

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

context.fill();

context.stroke();

//PACMAN

context.beginPath();

context.arc(250, 111, 19, 2.9, 2 * Math.PI, true);

context.lineWidth = 3;

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

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

context.fill();

context.arc(250, 111, 19, 3.7, 2 * Math.PI, false);

context.lineWidth = 3;

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

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

context.fill();

context.stroke();

//MAZE ABOVE BOX

context.beginPath();

context.moveTo(300, 140);

context.lineTo(500, 140);

context.lineTo(500, 160);

context.lineTo(430, 160);

context.lineTo(430, 200);

context.lineTo(380, 200);

context.lineTo(380, 160);

context.lineTo(300, 160);

context.lineTo(300, 140);

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

context.lineWidth = 3;

context.stroke();

//FIRST SQUARE FAR LEFT

context.beginPath();

context.rect(50, 30, 130, 55);

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

context.lineWidth = 3;

context.stroke();

//SQUARE 2 TOP LEFT 

context.beginPath();

context.rect(230, 30, 100, 55);

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

context.lineWidth = 3;

context.stroke();

//SQUARE 3 RIGHT SIDE

context.beginPath();

context.rect(475, 30, 100, 55);

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

context.lineWidth = 3;

context.stroke();

//SQUARE 4 FAR RIGHT

context.beginPath();

context.rect(620, 30, 130, 55);

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

context.lineWidth = 3;

context.stroke();

//UNDERNEARTH SQUARE 4--RIGHT SIDE

context.beginPath();

context.rect(620, 130, 130, 30);

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

context.lineWidth = 3;

context.stroke();

//GHOST1(ORANGE)

context.beginPath();

context.moveTo(400, 350);

context.quadraticCurveTo(425, 295, 455, 350);

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

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

context.fill();

context.stroke();

context.beginPath();

context.moveTo(400, 350);

context.lineTo(400, 375);

context.lineTo(417, 359);

context.lineTo(427, 375);

context.lineTo(435, 359);

context.lineTo(454, 375);

context.lineTo(455, 350);

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

context.fill();

context.stroke();

//ORANGE WHITE EYES

context.beginPath();

context.arc(415, 343, 6 , 0 , 2 * Math.PI, true);

context.lineWidth = 3;

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

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

context.fill();

context.stroke();

context.beginPath();

context.arc(437, 343, 6 , 0 , 2 * Math.PI, true);

context.lineWidth = 3;

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

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

context.fill();

context.stroke();

//ORANGE BLUE--EYES

context.beginPath();

context.arc(415, 346, 2 , 0 , 2 * Math.PI, true);

context.lineWidth = 3;

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

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

context.fill();

context.stroke();

context.beginPath();

context.arc(437, 346, 2 , 0 , 2 * Math.PI, true);

context.lineWidth = 3;

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

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

context.fill();

context.stroke();

//GREEN GHOST

context.beginPath();

context.moveTo(155, 250);

context.quadraticCurveTo(180, 200, 210, 250);

context.strokeStyle = 'rgb(39, 196, 40)';

context.fillStyle = 'rgb(39, 196, 40)';

context.fill();

context.stroke();

context.beginPath();

context.moveTo(155, 250);

context.lineTo(155, 275);

context.lineTo(172, 259);

context.lineTo(182, 275);

context.lineTo(190, 259);

context.lineTo(209, 275);

context.lineTo(210, 250);

context.fillStyle = 'rgb(39, 196, 40)';

context.fill();

context.stroke();

//GREEN--WHITE EYES

context.beginPath();

context.arc(171, 242, 6 , 0 , 2 * Math.PI, true);

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

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

context.fill();

context.lineWidth = 3;

context.stroke();

context.beginPath();

context.arc(193, 242, 6 , 0 , 2 * Math.PI, true);

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

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

context.fill();

context.lineWidth = 3;

context.stroke();

//GREEN GHOST--BLUE EYES

context.beginPath();

context.arc(171, 238, 2 , 0 , 2 * Math.PI, true);

context.lineWidth = 3;

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

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

context.fill();

context.stroke();

context.beginPath();

context.arc(193, 238, 2 , 0 , 2 * Math.PI, true);

context.lineWidth = 3;

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

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

context.fill();

context.stroke();

//CHERRY

context.beginPath();

context.arc(395, 415, 6 , 0 , 2 * Math.PI, true);

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

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

context.fill();

context.lineWidth = 4.5;

context.stroke();

context.beginPath();

context.arc(408, 418, 9 , 0 , 2 * Math.PI, true);

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

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

context.fill();

context.lineWidth = 1;

context.stroke();

//STEM

context.beginPath();

context.moveTo(397, 415);

context.bezierCurveTo(398, 405, 399, 400, 412, 393);

context.strokeStyle = 'rgb(222, 148, 82)';

context.fillStyle = 'rgb(222, 148, 82)';

context.lineWidth = 1.3

context.fill();

context.quadraticCurveTo(406, 395, 397, 415);

context.strokeStyle = 'rgb(222, 148, 82)';

context.fillStyle = 'rgb(222, 148, 82)';

context.fill();

context.stroke();

context.beginPath();

context.moveTo(412, 393);

context.quadraticCurveTo(406, 405, 408, 418);

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

context.fillStyle = 'rgb(222, 148, 82)';

context.fill();

context.quadraticCurveTo(408, 405, 412, 393);

context.strokeStyle = 'rgb(222, 148, 82)';

context.fill();

context.stroke();

////////////////////////////////////// end above this line ˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆ

};

</script>

</head>

<body>

<canvas id="myCanvas" width="800" height="600"></canvas>

</body>

</html>