Exquisite Corpse

This is my exquisite corpse drawing. Very silly, I know, but it was a lot of fun creating it! The picture itself is based off my first pet I ever had, my cat Fluffy, and how she was always hungry all the time (hence the round belly). I decided to have fun with it and add the backyard looking background, too. This assignment not only let me use my creative side, but also let me enhance my skills in Illustrator. I used the "scallop" paintbrush tool to give the outline of the cat a "furry" look, a tool I never used before!

Meow!

The High Society Final Logo

This is my final logo for my "The High Society" monogram jewelry company. I choose the color of tan/beige to represent the color of gold since it is a jewelry company. The light teal/mint color is supposed to represent the sophistication of the brand, as to me it was the least "cheesy" or "cheap" color I thought of. The crown and diamond used to replace the i's in the title demonstrate the company's "high class" kind of feel. The overall logo title is written in a font titled "Last King's Quest," also giving the logo a royal tone. Since you may not be able to tell what exactly the company is based on just the title alone, I decided to add in the blurb "Custom monogram jewelry." This part of the logo is written on what looks like a gold plate, which I originally described in my first logo ideas that I wanted this company to include. I also chose to give the first letters of each word a different color than the rest of the word so they can be used just as "THS" on certain pieces of jewelry that may be too small to include the entire logo. Also, the idea of monograms just includes initials, and the larger "THS" portrays a sort of monogram in itself.

Typography Assignment: "Blackbird"

For the typography assignment I decided to outline a bird with the lyrics from the Beatles song "Blackbird." I really love what birds symbolize (freedom, flight adventure) so I wanted to ultimately create something that was important to me. I also really like the lyrics to this song and think it fit extremely well with the overall bird image/ideal. I had a  great time working with illustrator to make this image!

Logo Designs

These are some sketches of my logo for "High Society" monogram jewelry company.

Fictional Company Logos/Logo Critiques

Here are some fictional companies/products that I would like to design a logo for !

1. The Sweetest Touch - This company will primarily be a line for skin care, specializing in lotions, creams, and body butters. Each product will be individually wrapped in a clear packaging with a ribbon tied around it corresponding with the colors on the label of the product. The colors on the label will be a replication of the different scents available (ex. purple ribbon for lavender bath soap). The word "Sweetest" in the company name stands for all the varieties of flavors/scents available within the company. For the logo I was thinking just a simple hand print outline that can be shrunken/expanded easily for packaging. The hand print is something that I feel can be remembered and also is a good replication of the word "touch" in the company. A colored ribbon around one of the fingers also would be a good idea to add to the logo to give it some color and also tie it into the package design.

2. High Society - This company will be a jewelry company specializing in monograms (initial/name jewelry). From gold, silver, white gold, rose gold, etc., this company is all about specialization. From the plate that the monogram will be placed on, to the font of the monogram and down to the monogram's detail, almost everything is customizable. The company's name "High Society" is to correspond to the attitude of "getting it all" or "getting everything/anything you want" since the product relies solely on the buyer. The logo for this would be a crown with HS in the middle of it that will be engraved on the back of all the plates of jewelry.

3. Candied - This company is a cupcake company where each cupcake is topped off with something that is candied- candied fruit, candied bacon, candied mint, etc. It specializes in its unique cupcake selections and will pride itself on experimenting with making new cupcake flavors that have never been made before! "Candied" will deliver, where the delivery boxing will have its logo on top and a tough ribbon tying the package together. The logo itself will be the classic "sucker candy" looking design (the circle with the plastic pinched on each end) and the word Candied in script writing inside of it.

4. Fair-Haired - This will be a hair salon, hence the word "hair" in the name. The word "fair-haired," however, means to adored, admired, cared for, so this salon will put all their customers first to make sure they get those dearest looks that they want. Because it's a hair salon, I want the name to be in the logo so it can be recognized easily when it is displayed outside the stores. I think the logo will be exactly the name in a sort of script type, however, the "F" will be in the shape of a blowdryer and a different color than the rest of the name.

5. All Tied Up - This company will particularly be a womens'/girls' headband company that are handcrafted. With all different styles, from classic round ones, to hippie bands, to braided hair bands, to bow bands, to beaded bands with jewels, the selection is endless. The headbands will come in a colored pouch, that will vary in size depending on how many headbands purchased, with pull ties. The pouch will be very reusable! The logo will be the words "All Tied Up" literally all tied up and jumbled together giving the logo a stringy/lacy/tied look. 

Logo Critques

1. Twitter- The blue bird is a very recognizable symbol for Twitter. On Twitter, you can post little status updates on almost anything you'd like, which are called "tweets." As an animal, birds tweet and chirp, so I think making the bird symbol for this social media website was a phenomenal idea. People can correlate the sound birds make to the "tweets" people send out, making it a memorable logo overall. It also can easily be shrunken/enlarged in different sizes as well.

2. Chanel- I personally think this designer name brand has a fantastic logo. The creator of the brand's name is Coco Chanel and that is where the two C's come intertwined. Because the brand covers a variety of merchandise from bags to clothing, the logo is easily placed on anything that it needs to be because of its simple freshness. The clean cut of the overall logo relates to classiness, which is what the brand prides itself on.

3. This logo is for a social media network in which people can communicate with each other via webcam. I personally do not like this logo and think it could have been designed with more creativity. It is very blunt which may make it more noticeable, but it lacks originality and inspiration. It is extremely plain and it is hard to tell exactly what the blue part of the logo is (a cloud?). However, I do like that this company chose a creative name for its program that is very original!

4. This red logo is for a snowboarding/skiing/skating/surfing brand name, Quicksilver. I think this logo works great based on what kind of merchandise the company sells. The logo itself has what appears to be a big wave over a mountain top and the company sells products that go along with either of those things. It was clever that they put the wave and the mountain top together, giving the logo a more complete look. I also like how they used red because it is a very dominant, often bright color that sticks out perhaps more than a different one in the color scheme.

5. Java is a computer programming language that allows a computer to be able to do many things, from video chatting with others, to watching videos, to streaming live on a website. I think this logo is great because it is kind of a play on words. Although java is usually recognized as being associated with coffees, the company Java itself actually has nothing to do with "cup of Joe's." It is humorous in the sense that it takes the word's most associated meaning, coffee, and actually uses that as its symbol to work with. People easily recognized Java now as more than just coffees and as a computer programmer. Like Quicksilver, it also incorporates the vibrant color of red to attract more focus onto the logo.

Project 1

When I first found out that I was able to create some sort of landscape through HTML for my first project, I knew exactly that I wanted to do something involving water. Growing up on the shore of Long Island and always being on my family's boat all summer influenced this "under the sea" type of graphic. It was easy to create the gradient of the overall background image because the fading of blues made the "water" look  even more realistic. It wasn't until I got to the fish that I had to take more time carefully graphing out where I wanted them to be placed and having to connect the fin completely so the color could be filled properly. I tried to make a "Nemo" like figure with the first fish, but got creative and made a more dangerous looking one later on with curves. The shark took time and precision also, since I used a bezier curve for most of it. Quadratic and bezier curves were also used for the tan colored bottom ocean floor surface, giving it the look of sand. Sharp lines were used for the starfish connecting to make a complete star that could be filled with a pattern. I thought the overall image needed a little something else to make it stand out when I thought it was completed, so I added a bubbly, fun treasure chest at the bottom!
There is also a loop running through the picture starting at points (0,0). I thought by adding this the water appeared to be rippled, or perhaps just have some reflection within it going on.

Overall, I had a lot of fun with this project and did not mind spending a long time on it. It made me really get into coding and HTML processes a lot, so I'm excited for future projects.

<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");

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







context.beginPath();
 context.rect(0, 0, canvas.width, canvas.height);
   context.fillStyle = 'rgb(200,69,141)';
  context.fill();
 context.stroke();

context.fillStyle = "#pink";




  var grd = context.createLinearGradient(400, 0, 400, 600);
        // light blue
        grd.addColorStop(0, 'rgb(102,204,205)');
        // dark blue
        grd.addColorStop(.5, "#004CB3");
        grd.addColorStop(1, 'rgb(0,0,204)');
        context.fillStyle = grd;
        context.fill();

        // add stroke
        context.lineWidth = 5;
        context.strokeStyle = "blue";
        context.stroke();
        
                         context.beginPath();
                         context.fillStyle = "#pink";
   context.arc(190, 430, 2, 0 , 2 * Math.PI, false);
    context.arc(194, 439, 3, 0 , 2 * Math.PI, false);
    context.arc(199, 441, 2, 0 , 2 * Math.PI, false);
    context.arc(190, 448, 3, 0 , 2 * Math.PI, false);
    context.arc(192, 453, 2, 0 , 2 * Math.PI, false);
    context.arc(199, 459, 2, 0 , 2 * Math.PI, false);
    context.arc(192, 465, 2, 0 , 2 * Math.PI, false);
   context.arc(190, 469, 2, 0 , 2 * Math.PI, false);
  context.arc(194, 465, 2, 0 , 2 * Math.PI, false);
            context.strokeStyle = "#660033";
        context.stroke();

        context.fill();
        context.stroke();        



/* 
triangle
context.beginPath();
context.moveTo(400,50);
context.lineTo(250,500);
context.lineTo(600,500);
context.lineTo(400,50);
context.stroke();
*/


                        context.beginPath();
   context.arc(240, 430, 2, 0 , 2 * Math.PI, false);
    context.arc(244, 439, 3, 0 , 2 * Math.PI, false);
    context.arc(249, 441, 2, 0 , 2 * Math.PI, false);
    context.arc(240, 448, 3, 0 , 2 * Math.PI, false);
    context.arc(242, 453, 2, 0 , 2 * Math.PI, false);
    context.arc(249, 459, 2, 0 , 2 * Math.PI, false);
    context.arc(242, 465, 2, 0 , 2 * Math.PI, false);
   context.arc(249, 469, 2, 0 , 2 * Math.PI, false);
  context.arc(249, 465, 2, 0 , 2 * Math.PI, false);
            context.strokeStyle = "#660033";
            context.fillStyle = "#pink";
        context.stroke();

                        context.beginPath();
   context.arc(160, 430, 2, 0 , 2 * Math.PI, false);
    context.arc(164, 439, 3, 0 , 2 * Math.PI, false);
    context.arc(169, 441, 2, 0 , 2 * Math.PI, false);
    context.arc(160, 448, 3, 0 , 2 * Math.PI, false);
    context.arc(162, 453, 2, 0 , 2 * Math.PI, false);
    context.arc(169, 459, 2, 0 , 2 * Math.PI, false);
    context.arc(162, 465, 2, 0 , 2 * Math.PI, false);
   context.arc(169, 469, 2, 0 , 2 * Math.PI, false);
  context.arc(163, 465, 2, 0 , 2 * Math.PI, false);
            context.strokeStyle = "#660033";
            context.fillStyle = "#pink";
        context.stroke();


context.beginPath();
        context.arc(150, 150, 14, 0, 2 * Math.PI, false);
        context.fillStyle = "orange";
        context.fill();
        context.lineWidth = 2;
        context.strokeStyle = "orange";
        context.stroke();
  var x1=0;
var y1=0;
var x2=canvas.width;

for (var i=0; i<canvas.height/1; i+=19){
context.beginPath();
context.moveTo(x1,y1);
context.lineTo(x2,i);
        context.lineWidth = 1;
        context.strokeStyle = 'rgb(51,102,204)';
context.stroke();
}              




        

        context.beginPath();
  context.moveTo(150,150);
  context.lineTo(190,200);
  context.lineTo(190,120);
  context.strokeStyle = "orange";
  context.fillStyle = "orange";
  context.fill();
  context.stroke();

context.beginPath();
        context.arc(145, 147, 1, 0, 2 * Math.PI, false);
        context.fillStyle = "black";
        context.fill();
        context.lineWidth = 2;
        context.strokeStyle = "black";
        context.stroke();

context.beginPath();
        context.arc(690, 459, 16, 0, 2 * Math.PI, false);
        context.fillStyle = "#black";
        context.fill();
        context.lineWidth = 5;
        context.strokeStyle = "black";
        context.stroke();


        


context.beginPath();
context.moveTo(300,690)
context.bezierCurveTo(200, 400, 750, 600, 699, 699);
       context.fillStyle = "tan";
        context.fill();
context.strokeStyle = "tan";
context.stroke();

context.beginPath();
context.moveTo(560,670)
context.bezierCurveTo(600, 490, 750, 600, 869, 699);
       context.fillStyle = "tan";
        context.fill();
context.strokeStyle = "tan";
context.stroke();

context.beginPath();
context.moveTo(560,670)
context.bezierCurveTo(600, 490, 750, 600, 1469, 619);
       context.fillStyle = "tan";
        context.fill();
context.strokeStyle = "tan";
context.stroke();

context.beginPath();
context.moveTo(160,670)
context.bezierCurveTo(100, 490, 150, 500, 469, 619);
       context.fillStyle = "tan";
        context.fill();
context.strokeStyle = "tan";
context.stroke();

context.beginPath();
context.moveTo(0,670)
context.bezierCurveTo(100, 490, 150, 500, 469, 619);
       context.fillStyle = "tan";
        context.fill();
context.strokeStyle = "tan";
context.stroke();

context.beginPath();
context.moveTo(0,670)
context.bezierCurveTo(0, 420, 0, 380, 469, 619);
       context.fillStyle = "tan";
        context.fill();
context.strokeStyle = "tan";
context.stroke();


//PEBBLES
 context.beginPath();
   context.arc(782, 580, 2, 0 , 2 * Math.PI, false);
       context.fillStyle = "#666666";
               context.strokeStyle = "#666666";
        context.stroke();
        context.fill();
        context.stroke();
         context.beginPath();
   context.arc(772, 590, 3, 0 , 2 * Math.PI/4, false);
       context.fillStyle = "#666666";
               context.strokeStyle = "#666666";
        context.stroke();
        context.fill();
        context.stroke();
        
         context.beginPath();
   context.arc(765, 588, 1, 0 , 2 * Math.PI, false);
       context.fillStyle = "#666666";
               context.strokeStyle = "#666666";
        context.stroke();
        context.fill();
        context.stroke();
        
         context.beginPath();
   context.arc(794, 584, 3, 0 , 2 * Math.PI/3, false);
       context.fillStyle = "#666666";
               context.strokeStyle = "#666666";
        context.stroke();
        context.fill();
        context.stroke();
        
         context.beginPath();
   context.arc(789, 594, 4, 0 , 2 * Math.PI/5, false);
       context.fillStyle = "#666666";
               context.strokeStyle = "#666666";
        context.stroke();
        context.fill();
        context.stroke();

        context.beginPath();
   context.arc(120, 100, 2, 0 , 2 * Math.PI, false);
   context.strokeStyle = "lightblue";
context.stroke();
        context.stroke();


        context.beginPath();
   context.arc(90, 89, 3.5, 0 , 2 * Math.PI, false);
       context.fillStyle = "lightblue";
        context.fill();
        context.stroke();
        
                context.beginPath();
   context.arc(130, 130, 2.8, 0 , 2 * Math.PI, false);
           context.fillStyle = "lightblue";
        context.fill();
        context.stroke();
        
         context.beginPath();
   context.arc(112, 110, 2, 0 , 2 * Math.PI, false);
       context.fillStyle = "lightblue";
        context.fill();
        context.stroke();
        
                 context.beginPath();
   context.arc(122, 114, 1, 0 , 2 * Math.PI, false);
       context.fillStyle = "lightblue";
        context.fill();
        context.stroke();
        
        
        
context.beginPath();
        context.moveTo(328, 230);
        context.bezierCurveTo(140, 100, 288, 120, 488, 150);
        context.quadraticCurveTo(958, 249, 325, 228);
        context.lineWidth = 8;
               context.fillStyle = "gray";
        context.fill();
        // line color
        context.strokeStyle = "gray";
        context.stroke();
        
context.beginPath();

        context.lineWidth = 10;
        // line color
        context.strokeStyle = "gray";
        context.stroke();
        
             context.beginPath();
   context.arc(282, 150, 2, 0 , 2 * Math.PI, false);
       context.fillStyle = "black";
               context.strokeStyle = "black";
               
        context.stroke();
        context.fill();
        context.stroke();
        
        


//seaweed
                context.beginPath();
   context.arc(350, 530, 5, 0 , 2 * Math.PI, false);
   context.lineWidth = 10;
           context.fillStyle = "green";
      context.strokeStyle = "green";
        context.fill();
        context.stroke();
  context.beginPath();
   context.arc(350, 541, 7, 0 , 2 * Math.PI, false);
   context.arc(350, 552, 4, 0 , 2 * Math.PI, false);
   context.arc(353, 561, 3, 0 , 2 * Math.PI, false);
   context.arc(352, 569, 5, 0 , 2 * Math.PI, false);
   context.arc(348, 576, 4, 0 , 2 * Math.PI, false);
   context.arc(349, 584, 5, 0 , 2 * Math.PI, false);
   context.arc(350, 599, 7, 0 , 2 * Math.PI, false);
           context.fillStyle = "green";
      context.strokeStyle = "green";
        context.fill();
        context.stroke();
        
        
context.beginPath();
   context.arc(450, 541, 7, 0 , 2 * Math.PI, false);
   context.arc(450, 552, 4, 0 , 2 * Math.PI, false);
   context.arc(453, 561, 3, 0 , 2 * Math.PI, false);
   context.arc(452, 569, 5, 0 , 2 * Math.PI, false);
   context.arc(448, 576, 4, 0 , 2 * Math.PI, false);
   context.arc(449, 584, 5, 0 , 2 * Math.PI, false);
   context.arc(450, 599, 7, 0 , 2 * Math.PI, false);
           context.fillStyle = "#009900";
      context.strokeStyle = "#009900";
        context.fill();
        context.stroke();
        
        
context.beginPath();
   context.arc(389, 550, 5, 0 , 2 * Math.PI, false);
   context.arc(393, 561, 3, 0 , 2 * Math.PI, false);
   context.arc(392, 569, 5, 0 , 2 * Math.PI, false);
   context.arc(390, 576, 4, 0 , 2 * Math.PI, false);
   context.arc(396, 584, 5, 0 , 2 * Math.PI, false);
   context.arc(390, 599, 7, 0 , 2 * Math.PI, false);
           context.fillStyle = "#009933";
      context.strokeStyle = "#009933";
        context.fill();
        context.stroke();
        
        context.beginPath();
        context.arc(419, 518, 5, 0 , 2 * Math.PI, false);
        context.arc(423, 520, 3, 0 , 2 * Math.PI, false);
        context.arc(420, 527, 6, 0 , 2 * Math.PI, false);
        context.arc(419, 533, 4, 0 , 2 * Math.PI, false);
        context.arc(418, 539, 7, 0 , 2 * Math.PI, false);
   context.arc(420, 541, 7, 0 , 2 * Math.PI, false);
   context.arc(422, 552, 4, 0 , 2 * Math.PI, false);
   context.arc(423, 561, 3, 0 , 2 * Math.PI, false);
   context.arc(420, 569, 5, 0 , 2 * Math.PI, false);
   context.arc(425, 576, 4, 0 , 2 * Math.PI, false);
   context.arc(422, 584, 5, 0 , 2 * Math.PI, false);
   context.arc(420, 599, 7, 0 , 2 * Math.PI, false);
           context.fillStyle = "#006600";
      context.strokeStyle = "#006600";
        context.fill();
        context.stroke();

  context.beginPath();
        context.moveTo(319, 229);
        context.lineTo(389, 189);
        context.lineTo(306, 219);
                context.lineWidth = 6;
        context.lineJoin = "round";
        context.strokeStyle = "black";
               context.fillStyle = "white";
               context.fill();
        context.stroke();
        
                context.beginPath();
        context.moveTo(439, 150);
        context.lineTo(499, 50);
        context.lineTo(529, 190);
        context.lineJoin = "miter";
context.fillStyle = "gray";
        context.fill();
        context.strokeStyle = "gray";
        context.stroke();
        
        
        context.beginPath();
        context.moveTo(600, 190);
        context.lineTo(690, 310);
        context.lineTo(690, 110);
        context.lineTo(610, 190);
        context.fillStyle = "gray";
        context.fill();
        context.stroke();
        
                context.beginPath();
                context.fillStyle = "black";
        context.moveTo(450, 190);
        context.lineTo(420, 234);
      context.strokeStyle = "black";
       context.lineWidth = 2;
        context.stroke();
        
                
                context.beginPath();
        context.moveTo(480, 190);
        context.lineTo(460, 234);
      context.strokeStyle = "black";
       context.lineWidth = 2;
        context.stroke();
        
        context.beginPath();
        context.arc(636, 435, 40, 0, Math.PI/3, false);
        context.arc(639, 435, 40, 0, Math.PI/3, false);
        context.closePath();
        context.lineWidth = 5;
        context.fillStyle = "#black";
        context.fill();
        context.strokeStyle = "black";
        context.stroke();
        
                context.beginPath();
        context.arc(630, 430, 40, 0, Math.PI/3, false);
        context.arc(625, 425, 40, 0, Math.PI/3, false);
        context.arc(620, 424, 40, 0, Math.PI/3, false);
        context.arc(619, 422, 40, 0, Math.PI/3, false);
        context.arc(620, 424, 40, 0, Math.PI/2, false);
        context.arc(620, 419, 40, 0, Math.PI/3, false);
        context.arc(620, 410, 40, 0, Math.PI/3, false);
           context.closePath();
        context.lineWidth = 5;
        context.fillStyle = "#black";
        context.fill();
        context.strokeStyle = "black";
        context.stroke();
                context.closePath();
        context.lineWidth = 5;
        
                         context.beginPath();
   context.arc(742, 444, 1, 0 , 2 * Math.PI, false);
       context.fillStyle = "lightblue";
               context.strokeStyle = "lightblue";
        context.fill();
        context.stroke();
        
                                 context.beginPath();
   context.arc(732, 434, 2, 0 , 2 * Math.PI, false);
       context.fillStyle = "lightblue";
               context.strokeStyle = "lightblue";
        context.fill();
        context.stroke();
        
                                 context.beginPath();
   context.arc(755, 424, 2, 0 , 2 * Math.PI, false);
       context.fillStyle = "lightblue";
               context.strokeStyle = "lightblue";
        context.fill();
        context.stroke();
        
                                 context.beginPath();
   context.arc(722, 454, 1, 0 , 2 * Math.PI, false);
       context.fillStyle = "lightblue";
               context.strokeStyle = "lightblue";
        context.fill();
        context.stroke();
        
        
                                context.beginPath();
       context.fillStyle = "pink";
        context.fill();
        context.stroke();
        
        context.beginPath();
        context.arc(695, 449, 1.5, 0, Math.PI, true);
        context.closePath();
        context.lineWidth = 5;
        context.fillStyle = "#yellow";
        context.fill();
        context.strokeStyle = "yellow";
        context.stroke();
        
        context.beginPath();
        context.moveTo(709, 463);
        context.lineTo(690, 460);
        context.lineWidth = 1;
        context.stroke();
        
        
                        context.beginPath();
        context.moveTo(510, 190);
        context.lineTo(490, 234);
      context.strokeStyle = "black";
       context.lineWidth = 2;
        context.stroke();


    
    
        context.beginPath();
        context.arc(208, 425, 50, 0, Math.PI, true);
        context.closePath();
        context.lineWidth = 5;
context.fillStyle = "#pink";
        context.strokeStyle = "#660033";
        context.fill();
        context.stroke();
        
        
        context.beginPath();
   context.fillStyle = "#pink";
           context.strokeStyle = "#660033";
                   context.fillStyle = "#660033";
                   context.lineWidth = 6;

        context.fill();
        context.stroke();
                 context.beginPath();
   context.arc(212, 430, 2, 0 , 2 * Math.PI, false);
    context.arc(217, 439, 2, 0 , 2 * Math.PI, false);
    context.arc(216, 441, 2, 0 , 2 * Math.PI, false);
    context.arc(215, 445, 2, 0 , 2 * Math.PI, false);
    context.arc(210, 452, 3, 0 , 2 * Math.PI, false);
     context.arc(218, 460, 2, 0 , 2 * Math.PI, false);
     context.arc(211, 468, 2, 0 , 2 * Math.PI, false);
    context.arc(206, 468, 2, 0 , 2 * Math.PI, false);
   context.arc(210, 473, 2, 0 , 2 * Math.PI, false);
           context.fill();
        context.stroke();
        
        
       //STARFISH
               context.beginPath();
  context.moveTo(155,550);
  context.lineTo(160,530);
  context.lineTo(170,550);
  context.lineTo(185,550);
  context.lineTo(170,561);
  context.lineTo(185,576);
  context.lineTo(163,569);
  context.lineTo(147,579);
  context.lineTo(152,562);
  context.lineTo(136,557);
  context.lineTo(155,550);
  context.lineCap = 'round';
                    context.lineWidth = 4;
                    context.strokeStyle = "#ff3333";
                   context.fillStyle = "#FF6666";
  context.stroke();
  context.fill();
  
  
   context.beginPath();
   context.arc(157, 560, 2, 0 , 2 * Math.PI, false);
                         context.fillStyle = "#white";
                      context.strokeStyle = "#white";
  context.stroke();
  context.fill();
  
     context.beginPath();
   context.arc(167, 563, 1, 0 , 2 * Math.PI, false);
                      context.fillStyle = "#white";
                      context.strokeStyle = "#";
  context.stroke();
  context.fill();

   context.beginPath();
   context.arc(165, 555, 2, 0 , 2 * Math.PI, false);
                         context.fillStyle = "#white";
                      context.strokeStyle = "#";
  context.stroke();
  context.fill();
  
     context.beginPath();
   context.arc(162, 544, 1, 0 , 2 * Math.PI, false);
                         context.fillStyle = "#white";
                      context.strokeStyle = "#";
  context.stroke();
  context.fill();

   context.beginPath();
   context.arc(146, 555, 1, 0 , 2 * Math.PI, false);
                         context.fillStyle = "#white";
                      context.strokeStyle = "#";
  context.stroke();
  context.fill();

   context.beginPath();
   context.arc(154, 570, 2, 0 , 2 * Math.PI, false);
                         context.fillStyle = "#white";
                      context.strokeStyle = "#";
  context.stroke();
  context.fill();
  
     context.beginPath();
   context.arc(177, 571, 1, 0 , 2 * Math.PI, false);
                         context.fillStyle = "#white";
                      context.strokeStyle = "#";
  context.stroke();
  context.fill();
        
        
                context.beginPath();
        context.moveTo(500, 650);
        context.lineTo(500, 550);
        context.lineTo(670, 550);
        context.lineTo(670, 650);
        context.lineTo(500, 650);
                   context.fillStyle = 'rgb(102,51,0)';
      context.strokeStyle = 'rgb(102,51,0)';
        context.stroke();
        context.fill();
        
                        context.beginPath();
        context.moveTo(540, 650);
        context.lineTo(540, 549);
      context.strokeStyle = "black";
       context.lineWidth = 4;
        context.stroke();
        
        
                                context.beginPath();
        context.moveTo(630, 650);
        context.lineTo(630, 549);
      context.strokeStyle = "black";
       context.lineWidth = 4;
        context.stroke();
        
                                        context.beginPath();
        context.moveTo(500, 560);
        context.lineTo(670, 560);
      context.strokeStyle = "black";
       context.lineWidth = 4;
        context.stroke();
        
        context.beginPath();
        context.lineCap = 'round'; 
        context.moveTo(560, 550);
        context.lineTo(610, 550);
context.lineTo(610, 580);
context.lineTo(560, 580);
context.lineTo(560, 550);
                   context.fillStyle = "#yellow";
      context.strokeStyle = "#yellow";
        context.stroke();
        context.fill();
        
        context.beginPath();
   context.arc(586, 566, 6, 0 , 2 * Math.PI, false);
                         context.fillStyle = "#black";
                      context.strokeStyle = "#black";
                              context.stroke();
        context.fill();
        
        
        
                
       
        
////////////////////////////////////// end above this line ˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆ

};

</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>