<<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
////////////////////////////////////// start below this line ??????????
//Background variables
var startx = 0;
var starty = 0;
var width = canvas.width;
var height = canvas.height;
var grdstartx = 400;
var grdstarty = 0;
var grdendx = 400;
var grdendy = 600;
//BG
context.beginPath();
context.rect(startx, starty, width, height);
var grd = context.createLinearGradient(grdstartx, grdstarty, grdendx, grdendy);
grd.addColorStop(0, 'rgb(50, 150, 255)');
grd.addColorStop(.5, 'rgb(100, 150, 255)');
grd.addColorStop(1, 'rgb(0, 0, 0)');
context.fillStyle = grd;
context.fill();
//Field Back
context.beginPath();
context.rect(0, 280, 800, 350);
context.fillStyle = 'brown';
context.fill();
context.lineWidth = 3;
context.strokeStyle = 'white';
context.stroke();
//Field
context.beginPath();
context.rect(100, 340, 570, 200);
context.fillStyle = 'green';
context.fill();
context.lineWidth = 4;
context.strokeStyle = 'white';
context.stroke();
//Clouds
context.beginPath();
context.moveTo(170, 80);
context.bezierCurveTo(130, 100, 130, 150, 230, 150);
context.bezierCurveTo(250, 180, 320, 180, 340, 150);
context.bezierCurveTo(420, 150, 420, 120, 390, 100);
context.bezierCurveTo(430, 40, 370, 30, 340, 50);
context.bezierCurveTo(320, 5, 250, 20, 250, 50);
context.bezierCurveTo(200, 5, 150, 20, 170, 80);
//complete custom shape
context.closePath();
context.lineWidth = 5;
context.strokeStyle = 'white';
context.stroke();
//Sun
var centerX = canvas.width / 2;
var centerY = canvas.height / 2;
var radius = 80;
//Sun
context.beginPath();
context.arc(650, 100, radius, 0, 2 * Math.PI, false);
context.fillStyle = 'yellow';
context.fill();
context.lineWidth = 5;
context.strokeStyle = 'yellow';
context.stroke();
//Text
var x = 180;
var y = 250;
context.font = '50pt Block';
context.lineWidth = 3;
// stroke color
context.strokeStyle = 'black';
context.strokeText('GO SPARTANS!', x, y);
// Field Lines
context.beginPath();
context.moveTo(385, 340);
context.lineTo(385, 400);
context.lineWidth = 5;
context.beginPath();
context.moveTo(385, 340);
context.lineTo(385, 540);
context.lineWidth = 5;
// set line color
context.strokeStyle = 'white';
context.stroke();
context.beginPath();
context.moveTo(160, 385);
context.lineTo(160, 500);
context.lineWidth = 5;
// set line color
context.strokeStyle = 'white';
context.stroke();
context.beginPath();
context.moveTo(600, 385);
context.lineTo(600, 500);
context.lineWidth = 5;
// set line color
context.strokeStyle = 'white';
context.stroke();
//Field circle
var centerX = canvas.width / 2;
var centerY = canvas.height / 2;
var radius = 50;
context.beginPath();
context.arc(385, 440, radius, 0, 2 * Math.PI, false);
context.fillStyle = 'green';
context.fill();
context.lineWidth = 5;
context.strokeStyle = 'white';
context.stroke();
////////////////////////////////////// end above this line ˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆ
};
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>
Coco Chanel's logo is effective because it is the initials of the company and it is very iconic. It has been around for years. It hasn't changed. When someone sees the double see on a piece of clothing or jewelry, they know it is Chanel.
The U.S. Postal Service logo is an eagle and mail. It represents how the postal service is always reliable, like the bald eagle, the symbol of the U.S. It is simple so what ever size it is, you can see the details easily. It is not super busy.
Taco Bell's logo is good too. Even though it has changed over the years, it virtually still looks the same. I like the older one a little better because it has traditional Mexican colors. It better reflects the fact Taco Bell's food is Mexican. 
