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>