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

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 whi...
Read more

Wise Guy

Image
For the exquisite corpse project I chose to use the Wise Guy illustration and this is the image I created. I decided to leave the character as a rather cartoony image with black outlines and bold colors. But I decided to contrast it with a more realistic background with detailed sand and a gradient ocean with bubble details. 
Read more

Vector Illustration

Image
I chose to do this photo I took of my boyfriend because I love the image I think the sunset and the water are so pretty and I thought the background would be a hard but the outcome would be worth it. I would say the hardest part was the water because when I used the same colors as the original photo I couldn't really get it to read as water and I had to play around a lot to get it to have a water like texture and I still do not really love it.
Read more