The New England Patriots are Not Done

For my HTML code project, I chose to recreate the New England Patriots playoff slogan logo. As a huge New England Patriots fan it is always exciting to see them perform well, especially in the post season. Every time they are in the post season they seem to come up with a slogan to motivate the payers and unify the fans. This year it is the saying "not done" and I decided to remake the logo to support the team.

This is the original reference image-


This is the graph I made-



And here is my final result-


                           

Here is the code used to create the image 

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

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

//canvas color
context.beginPath();
context.rect(0, 0, 800, 600)
context.fillStyle = "rgb(0, 25, 60)";
context.fill();

//left shape outline
context.beginPath();
context.moveTo(30, 350); //lower left point
context.lineTo(75, 200);
context.lineTo(425, 200);
context.lineTo(297, 350);
context.lineTo(30, 350);
context.strokeStyle = "white";
context.fillStyle = "white";
context.fill();
context.stroke();

//right shape outline
context.beginPath();
context.moveTo(280, 400); //lower left point
context.lineTo(420, 240);
context.lineTo(775, 240);
context.lineTo(730, 400);
context.lineTo(280, 400);
context.strokeStyle = 'white';
context.fillStyle = 'white';
context.fill();
context.stroke();

//N in Not
context.beginPath();
context.moveTo(50, 335); //lower left point
context.lineTo(85, 220);
context.lineTo(130, 220);
context.lineTo(140, 260);
context.lineTo(150, 220); //5
context.lineTo(190, 220);
context.lineTo(153, 335);
context.lineTo(115, 335);
context.lineTo(102, 295);
context.lineTo(90, 335);
context.lineTo(50, 335);
context.strokeStyle = "rgb(0, 25, 60)";
context.fillStyle = "rgb(0, 25, 60)";
context.fill();
context.stroke();


 //O in Not
context.beginPath();
context.moveTo(183, 335);
context.lineTo(172, 320);
context.lineTo(197, 235);
context.lineTo(213, 220);
context.lineTo(267, 220); //5
context.lineTo(277, 235);
context.lineTo(253, 320);
context.lineTo(235, 335);
context.lineTo(183, 335);
context.strokeStyle = "rgb(0, 25, 60)";
context.fillStyle = "rgb(0, 25, 60)";
context.fill();
context.stroke();


//Center of O in Not
context.beginPath();
context.moveTo(226, 245);
context.lineTo(241, 245);
context.lineTo(223, 310);
context.lineTo(208, 310);
context.lineTo(226, 245);
context.strokeStyle = 'white';
context.fillStyle = 'white';
context.fill();
context.stroke();

//T in Not
context.beginPath();
context.moveTo(290, 330);
context.lineTo(313, 245);
context.lineTo(285, 245);
context.lineTo(295, 220);
context.lineTo(380, 220);
context.lineTo(363, 245);
context.lineTo(348, 245);
context.lineTo(343, 263);
context.lineTo(290, 330);
context.strokeStyle = "rgb(0, 25, 60)";
context.fillStyle = "rgb(0, 25, 60)";
context.fill();
context.stroke();


//D in Done
context.beginPath();
context.moveTo(337, 375);
context.lineTo(348, 340);
context.lineTo(417, 257);
context.lineTo(440, 257);
context.lineTo(450, 275); //5
context.lineTo(430, 357);
context.lineTo(413, 375);
context.lineTo(337, 375);
context.strokeStyle = "rgb(0, 25, 60)";
context.fillStyle = "rgb(0, 25, 60)";
context.fill();
context.stroke();


//Center of D in Done 
context.beginPath();
context.moveTo(381, 348);
context.lineTo(398, 285);
context.lineTo(413, 285);
context.lineTo(397, 348);
context.lineTo(381, 348);
context.strokeStyle = 'white';
context.fillStyle = 'white';
context.fill();
context.stroke();

//O in Done
context.beginPath();
context.moveTo(453, 375);
context.lineTo(443, 357);
context.lineTo(463, 275);
context.lineTo(480, 257);
context.lineTo(540, 257); //5
context.lineTo(550, 275);
context.lineTo(530, 357);
context.lineTo(510, 375);
context.lineTo(453, 375);
context.strokeStyle = "rgb(0, 25, 60)";
context.fillStyle = "rgb(0, 25, 60)";
context.fill();
context.stroke();

//Center of O in Done
context.beginPath();
context.moveTo(481, 348);
context.lineTo(495, 285);
context.lineTo(513, 285);
context.lineTo(499, 348);
context.lineTo(481, 348);
context.strokeStyle = 'white';
context.fillStyle = 'white';
context.fill();
context.stroke();


//N in Done
context.beginPath();
context.moveTo(535, 375);
context.lineTo(565, 257);
context.lineTo(603, 257);
context.lineTo(610, 298);
context.lineTo(623, 257); //5
context.lineTo(660, 257);
context.lineTo(628, 375);
context.lineTo(590, 375);
context.lineTo(580, 338);
context.lineTo(570, 375);
context.lineTo(535, 375);
context.strokeStyle = "rgb(0, 25, 60)";
context.fillStyle = "rgb(0, 25, 60)";
context.fill();
context.stroke();


//Face in N
context.beginPath();
context.moveTo(590, 307);
context.lineTo(610, 307);
context.lineTo(612, 295);
context.lineTo(620, 295);
context.lineTo(624, 324); //5 tip of the nose
context.lineTo(610, 323);
context.lineTo(608, 326);
context.lineTo(615, 327);
context.lineTo(615, 331);
context.lineTo(608, 330);
context.lineTo(603, 334);
context.lineTo(614, 334);
context.quadraticCurveTo(614, 341, 608, 337); //left right, up down, point
context.lineTo(607, 338);
context.lineTo(613, 344);
context.quadraticCurveTo(615, 350, 610, 357);
context.quadraticCurveTo(585, 330, 560, 315);
context.bezierCurveTo(578, 308, 580, 318, 595, 330)
context.lineTo(591, 315);
context.lineTo(570, 302);
context.bezierCurveTo(570, 290, 610, 290, 610, 295);
context.lineTo(610, 295);
context.quadraticCurveTo(587, 295, 590, 307);
context.strokeStyle = 'white';
context.fillStyle = 'white';
context.fill();
context.stroke();

//Star in N
context.beginPath();
context.moveTo(630, 284);
context.lineTo(634, 276.5);
context.lineTo(630, 272);
context.lineTo(636, 273); 
context.lineTo(640, 267); //tip
context.lineTo(642, 274);
context.lineTo(648, 276);
context.lineTo(642, 279);
context.lineTo(642, 286);
context.lineTo(637, 279.5);
context.lineTo(630, 284);
context.fillStyle = 'white';
context.fill();
context.strokeStyle = 'white';
context.stroke();


//E in Done
context.beginPath();
context.moveTo(655, 375);
context.lineTo(645, 357);
context.lineTo(667, 275);
context.lineTo(685, 257);
context.lineTo(755, 257); //5
context.lineTo(746, 285);
context.lineTo(698, 285);
context.lineTo(693, 303);
context.lineTo(740, 303);
context.lineTo(733, 328); //10
context.lineTo(690, 328);
context.lineTo(685, 347);
context.lineTo(729, 347);
context.lineTo(722, 375);
context.lineTo(655, 375);
context.strokeStyle = "rgb(0, 25, 60)";
context.fillStyle = "rgb(0, 25, 60)";
context.fill();
context.stroke();



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

};

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









Comments

Post a Comment

Popular posts from this blog

Rotoscope

I have been a figure skater all my life, so I thought it would be cool to do a figure skater for the rotoscope. I chose Yulia Lipnitskaya, who was a 15 year old sensation at the 2012 Winter Olympics in Sochi.
Read more

Welcome to The Stu

Image
For my logo I decided to make a design for one of my good friends father's gym. My boyfriend and him go to the gym every day, the gym is called The Fitness Studio, but they have nicknamed it "the stu". The gym is a personal trainer service, and Connor's dad has not put a single dollar into advertising, he only gains clients by recommendation and word of mouth, so I decided he needed a logo. I chose to give the stu a simple logo that was clean and sleek because I feel that fits the aesthetic of the gym, simple but sleek and effective. I  didn't want the logo to be flashy or colorful because that is not his style, he is simple but effective in his work. I chose to make the T in 'stu' a body builder to give the feel of the gym, but I didn't want it to just be a flat silhouette, which is why I chose to give him some subtle definition in a muted grey color, to give it the effect of muscle, but nothing too harsh or bold which would throw off the logo
Read more

About Me

Image
My name is Julia Hurley, I'm eighteen years old and from Rumford, Rhode Island. Since the age of three I have been a figure skater, and I have been a runner since the age of eleven. Back home I have two siblings and a cat named Henrietta. I enjoy spending time by the river and at the beach. One of my favorite places to be in the world is at the lake my family visits every year in Waterford, Maine. The lake has the most peaceful atmosphere, and the most beautiful sunsets (as seen in the photo). I am currently a marketing major, although I am not exactly sure what area of marketing I am interested in. I am hoping that through this class I will be able to decide if I am interested in the advertising and graphic design side of marketing, or more the logistical business side. I do not have much art background, so I am not entirely sure how I will do with these new programs and techniques, but I am excited to be able to learn a new skill.
Read more