ART 210: FINAL CANVAS PROJECT: TENNESSEE VOLUNTEERS

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title> Tennessee Volunteers </title>

<style type="text/css">
body,td,th {
font-family: Helvetica, Arial, sans-serif;
font-size: 12px;
color: #000;
}
body {
background-color: #FFF;
}

</style>
</head>

<body>

<canvas id="myCanvas" width="800" height="600"></canvas>

<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
//// >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> START HERE

///Background
var background = context.createRadialGradient(400,300,100,400,300,350);
background.addColorStop(0,"rgb(225,225,225)");
background.addColorStop(.25,"rgb(215,215,215)");
background.addColorStop(.5,"rgb(200,200,200)");
background.addColorStop(0.75,"rgb(173,172,172)");
background.addColorStop(1,"rgb(153,151,151)");

context.beginPath();
context.rect(0,0, canvas.width, canvas.height);
context.fillStyle = background;
context.fill();
context.closePath();

//GREEN FIELD
var field = context.createRadialGradient(210,150,200,210,150,50);
field.addColorStop(0,"rgb(16,89,1)");
field.addColorStop(0.25,"rgb(20,115,1)");
field.addColorStop(0.5,"rgb(25,148,0)");
field.addColorStop(0.75,"rgb(31,181,0)");
field.addColorStop(1,"rgb(31,201,0)");

context.beginPath();
context.rect(0,0,420,300);
context.fillStyle = field;
context.fill();
context.closePath();

//LEFTENDZONE
var endzones = context.createLinearGradient(5,5,60,300);
endzones.addColorStop(0,"rgb(237,175,62)");
endzones.addColorStop(0.5,"rgb(245,167,22)");
endzones.addColorStop(1,"rgb(250,162,0)");

context.beginPath();
context.rect(0,0,60,300);
context.fillStyle = endzones;
context.fill();
context.closePath();

//whitesquares
context.beginPath();
context.moveTo(20,220);
context.lineTo(40,220);
context.lineTo(40,240);
context.lineTo(20,240);
context.lineTo(20,220);
context.fillStyle = "white";
context.fill();
context.closePath();

context.beginPath();
context.moveTo(20,180);
context.lineTo(40,180);
context.lineTo(40,200);
context.lineTo(20,200);
context.lineTo(20,180);
context.moveTo(20,20);
context.lineTo(40,20);
context.lineTo(40,40);
context.lineTo(20,40);
context.lineTo(20,20);
context.moveTo(20,60);
context.lineTo(40,60);
context.lineTo(40,80);
context.lineTo(20,80);
context.lineTo(20,60);
context.moveTo(20,100);
context.lineTo(40,100);
context.lineTo(40,120);
context.lineTo(20,120);
context.lineTo(20,100);
context.fillStyle = "white";
context.fill();
context.closePath();

context.beginPath();
context.moveTo(20,140);
context.lineTo(40,140);
context.lineTo(40,160);
context.lineTo(20,160);
context.lineTo(20,140);
context.fillStyle = "white";
context.fill();
context.closePath();

context.beginPath();
context.moveTo(0,200);
context.lineTo(20,200);
context.lineTo(20,220);
context.lineTo(0,220);
context.lineTo(0,200);
context.moveTo(0,0);
context.lineTo(20,0);
context.lineTo(20,20);
context.lineTo(0,20);
context.lineTo(0,0);
context.moveTo(0,40);
context.lineTo(20,40);
context.lineTo(20,60);
context.lineTo(0,60);
context.lineTo(0,40);
context.moveTo(0,80);
context.lineTo(20,80);
context.lineTo(20,100);
context.lineTo(0,100);
context.lineTo(0,80);
context.moveTo(0,120);
context.lineTo(20,120);
context.lineTo(20,140);
context.lineTo(0,140);
context.lineTo(0,120);
context.fillStyle = "white";
context.fill();
context.closePath();

context.beginPath();
context.moveTo(0,160);
context.lineTo(20,160);
context.lineTo(20,180);
context.lineTo(0,180);
context.lineTo(0,160);
context.moveTo(0,240);
context.lineTo(20,240);
context.lineTo(20,260);
context.lineTo(0,260);
context.lineTo(0,240);
context.moveTo(0,280);
context.lineTo(20,280);
context.lineTo(20,300);
context.lineTo(0,300);
context.lineTo(0,280);
context.moveTo(20,260);
context.lineTo(40,260);
context.lineTo(40,280);
context.lineTo(20,280);
context.lineTo(20,260);
context.moveTo(40,280);
context.lineTo(60,280);
context.lineTo(60,300);
context.lineTo(40,300);
context.lineTo(40,280);
context.moveTo(40,240);
context.lineTo(60,240);
context.lineTo(60,260);
context.lineTo(40,260);
context.lineTo(40,240);
context.fillStyle = "white";
context.fill();
context.closePath();

context.beginPath();
context.moveTo(40,200);
context.lineTo(60,200);
context.lineTo(60,220);
context.lineTo(40,220);
context.lineTo(40,200);
context.fillStyle = "white";
context.fill();
context.closePath();

context.beginPath();
context.moveTo(40,160);
context.lineTo(60,160);
context.lineTo(60,180);
context.lineTo(40,180);
context.lineTo(40,160);
context.fillStyle = "white";
context.fill();
context.closePath();

context.beginPath();
context.moveTo(40,120);
context.lineTo(60,120);
context.lineTo(60,140);
context.lineTo(40,140);
context.lineTo(40,120);
context.moveTo(40,80);
context.lineTo(60,80);
context.lineTo(60,100);
context.lineTo(40,100);
context.lineTo(40,100);
context.moveTo(40,40);
context.lineTo(60,40);
context.lineTo(60,60);
context.lineTo(40,60);
context.lineTo(40,40);
context.moveTo(40,0);
context.lineTo(60,0);
context.lineTo(60,20);
context.lineTo(40,20);
context.lineTo(40,0);
context.fillStyle = "white";
context.fill();
context.closePath();

//RIGHTENDZONE

var rightendzone = context.createLinearGradient(360,0,420,300);
rightendzone.addColorStop(0,"rgb(237,175,62)");
rightendzone.addColorStop(0.5,"rgb(245,167,22)");
rightendzone.addColorStop(1,"rgb(250,162,0)");

context.beginPath();
context.rect(360,0,60,300);
context.fillStyle = rightendzone;
context.fill();
context.closePath();

context.beginPath();
context.moveTo(360,0);
context.lineTo(380,0);
context.lineTo(380,20);
context.lineTo(360,20);
context.lineTo(360,0);
context.fillStyle= "white";
context.moveTo(360,40);
context.lineTo(380,40);
context.lineTo(380,60);
context.lineTo(360,60);
context.lineTo(360,40);
context.moveTo(360,80);
context.lineTo(380,80);
context.lineTo(380,100);
context.lineTo(360,100);
context.lineTo(360,80);
context.moveTo(360,120);
context.lineTo(380,120);
context.lineTo(380,140);
context.lineTo(360,140);
context.lineTo(360,120);
context.moveTo(360,160);
context.lineTo(380,160);
context.lineTo(380,180);
context.lineTo(360,180);
context.lineTo(360,160);
context.moveTo(360,200);
context.lineTo(380,200);
context.lineTo(380,220);
context.lineTo(360,220);
context.lineTo(360,200);
context.fill();
context.closePath();

context.beginPath();
context.moveTo(400,0);
context.lineTo(420,0);
context.lineTo(420,20);
context.lineTo(400,20);
context.lineTo(400,0);
context.fillStyle= "white";
context.moveTo(400,40);
context.lineTo(420,40);
context.lineTo(420,60);
context.lineTo(400,60);
context.lineTo(400,40);
context.moveTo(400,80);
context.lineTo(420,80);
context.lineTo(420,100);
context.lineTo(400,100);
context.lineTo(400,80);
context.moveTo(400,120);
context.lineTo(420,120);
context.lineTo(420,140);
context.lineTo(400,140);
context.lineTo(400,120);
context.moveTo(400,160);
context.lineTo(420,160);
context.lineTo(420,180);
context.lineTo(400,180);
context.lineTo(400,160);
context.moveTo(400,200);
context.lineTo(420,200);
context.lineTo(420,220);
context.lineTo(400,220);
context.lineTo(400,200);
context.fill();
context.closePath();

context.beginPath();
context.moveTo(380,20);
context.lineTo(400,20);
context.lineTo(400,40);
context.lineTo(380,40);
context.lineTo(380,20);
context.moveTo(380,60);
context.lineTo(400,60);
context.lineTo(400,80);
context.lineTo(380,80);
context.lineTo(380,60);
context.moveTo(380,100);
context.lineTo(400,100);
context.lineTo(400,120);
context.lineTo(380,120);
context.lineTo(380,100);
context.moveTo(380,140);
context.lineTo(400,140);
context.lineTo(400,160);
context.lineTo(380,160);
context.lineTo(380,140);
context.moveTo(380,180);
context.lineTo(400,180);
context.lineTo(400,200);
context.lineTo(380,200);
context.lineTo(380,180);
context.moveTo(380,220);
context.lineTo(400,220);
context.lineTo(400,240);
context.lineTo(380,240);
context.lineTo(380,220);
context.moveTo(360,240);
context.lineTo(380,240);
context.lineTo(380,260);
context.lineTo(360,260);
context.lineTo(360,240);
context.moveTo(360,280);
context.lineTo(380,280);
context.lineTo(380,300);
context.lineTo(360,300);
context.lineTo(360,280);
context.moveTo(380,260);
context.lineTo(400,260);
context.lineTo(400,280);
context.lineTo(380,280);
context.lineTo(380,260);
context.moveTo(400,240);
context.lineTo(420,240);
context.lineTo(420,260);
context.lineTo(400,260);
context.lineTo(400,240);
context.moveTo(400,280);
context.lineTo(420,280);
context.lineTo(420,300);
context.lineTo(400,300);
context.lineTo(400,280);
context.fillStyle = "white";
context.fill();
context.closePath();

//YARDLINES
context.beginPath();
context.moveTo(60,0);
context.lineTo(60,300);
context.moveTo(90,0);
context.lineTo(90,300);
context.moveTo(120,0);
context.lineTo(120,300);
context.moveTo(150,0);
context.lineTo(150,300);
context.moveTo(180,0);
context.lineTo(180,300);
context.moveTo(210,0);
context.lineTo(210,300);
context.moveTo(240,0);
context.lineTo(240,300);
context.moveTo(270,0);
context.lineTo(270,300);
context.moveTo(300,0);
context.lineTo(300,300);
context.moveTo(330,0);
context.lineTo(330,300);
context.moveTo(360,0);
context.lineTo(360,300);
context.fillStyle = "white";
context.fill();
context.lineWidth = 2;
context.strokeStyle = "white";
context.stroke();
context.closePath();

///T
var centert = context.createLinearGradient(200,90,240,150);
centert.addColorStop(0,"rgb(237,175,62)");
centert.addColorStop(0.5,"rgb(224,162,49)");
centert.addColorStop(1,"orange");

context.beginPath();
context.moveTo(145,90);
context.lineTo(270,90);
context.lineTo(270,125);
context.lineTo(245,125);
context.arc(233,125,8,0,Math.PI,true);
context.fillStyle = centert;
context.lineWidth = 8;
context.strokeStyle = "white";
context.stroke();
context.fill();
context.closePath();

context.beginPath();
context.moveTo(225,125);
context.lineTo(225,180);
context.quadraticCurveTo(225,200,250,200);
context.lineTo(250,225);
context.lineTo(165,225);
context.lineTo(165,200);
context.quadraticCurveTo(190,200,188,180);
context.lineTo(188,125);
context.arc(180,125,8.5,0,Math.PI,true);
context.lineTo(145,125);
context.lineTo(145,86);
context.lineJoin = "square";
context.lineWidth = 8;
context.strokeStyle = "white";
context.stroke();
context.fillStyle = centert;
context.fill();
context.closePath();

//yardlines
context.beginPath();
context.moveTo(65,300);
context.lineTo(65,290);
context.moveTo(72,300);
context.lineTo(72,290);
context.moveTo(78,300);
context.lineTo(78,290);
context.moveTo(85,300);
context.lineTo(85,290);
context.moveTo(65,0);
context.lineTo(65,10);
context.moveTo(72,0);
context.lineTo(72,10);
context.moveTo(78,0);
context.lineTo(78,10);
context.moveTo(85,0);
context.lineTo(85,10);
context.moveTo(65,65);
context.lineTo(65,75);
context.moveTo(72,65);
context.lineTo(72,75);
context.moveTo(78,65);
context.lineTo(78,75);
context.moveTo(85,65);
context.lineTo(85,75);
context.moveTo(65,235);
context.lineTo(65,245);
context.moveTo(72,235);
context.lineTo(72,245);
context.moveTo(78,235);
context.lineTo(78,245);
context.moveTo(85,235);
context.lineTo(85,245);
context.moveTo(95,300);
context.lineTo(95,290);
context.moveTo(102,300);
context.lineTo(102,290);
context.moveTo(108,300);
context.lineTo(108,290);
context.moveTo(115,300);
context.lineTo(115,290);
context.moveTo(95,0);
context.lineTo(95,10);
context.moveTo(102,0);
context.lineTo(102,10);
context.moveTo(108,0);
context.lineTo(108,10);
context.moveTo(115,0);
context.lineTo(115,10);
context.moveTo(95,65);
context.lineTo(95,75);
context.moveTo(102,65);
context.lineTo(102,75);
context.moveTo(108,65);
context.lineTo(108,75);
context.moveTo(115,65);
context.lineTo(115,75);
context.moveTo(95,235);
context.lineTo(95,245);
context.moveTo(102,235);
context.lineTo(102,245);
context.moveTo(108,235);
context.lineTo(108,245);
context.moveTo(115,235);
context.lineTo(115,245);
context.moveTo(125,300);
context.lineTo(125,290);
context.moveTo(132,300);
context.lineTo(132,290);
context.moveTo(138,300);
context.lineTo(138,290);
context.moveTo(145,300);
context.lineTo(145,290);
context.moveTo(125,0);
context.lineTo(125,10);
context.moveTo(132,0);
context.lineTo(132,10);
context.moveTo(138,0);
context.lineTo(138,10);
context.moveTo(145,0);
context.lineTo(145,10);
context.moveTo(125,235);
context.lineTo(125,245);
context.moveTo(132,235);
context.lineTo(132,245);
context.moveTo(138,235);
context.lineTo(138,245);
context.moveTo(145,235);
context.lineTo(145,245);
context.moveTo(125,65);
context.lineTo(125,75);
context.moveTo(132,65);
context.lineTo(132,75);
context.moveTo(138,65);
context.lineTo(138,75);
context.moveTo(145,65);
context.lineTo(145,75);
context.moveTo(155,300);
context.lineTo(155,290);
context.moveTo(162,300);
context.lineTo(162,290);
context.moveTo(168,300);
context.lineTo(168,290);
context.moveTo(175,300);
context.lineTo(175,290);
context.moveTo(155,0);
context.lineTo(155,10);
context.moveTo(162,0);
context.lineTo(162,10);
context.moveTo(168,0);
context.lineTo(168,10);
context.moveTo(175,0);
context.lineTo(175,10);
context.moveTo(155,235);
context.lineTo(155,245);
context.moveTo(162,235);
context.lineTo(162,245);
context.moveTo(168,235);
context.lineTo(168,245);
context.moveTo(175,235);
context.lineTo(175,245);
context.moveTo(155,65);
context.lineTo(155,75);
context.moveTo(162,65);
context.lineTo(162,75);
context.moveTo(168,65);
context.lineTo(168,75);
context.moveTo(175,65);
context.lineTo(175,75);
context.moveTo(185,235);
context.lineTo(185,245);
context.moveTo(192,235);
context.lineTo(192,245);
context.moveTo(198,235);
context.lineTo(198,245);
context.moveTo(205,235);
context.lineTo(205,245);
context.moveTo(185,65);
context.lineTo(185,75);
context.moveTo(192,65);
context.lineTo(192,75);
context.moveTo(198,65);
context.lineTo(198,75);
context.moveTo(205,65);
context.lineTo(205,75);
context.moveTo(185,0);
context.lineTo(185,10);
context.moveTo(192,0);
context.lineTo(192,10);
context.moveTo(198,0);
context.lineTo(198,10);
context.moveTo(205,0);
context.lineTo(205,10);
context.moveTo(185,300);
context.lineTo(185,290);
context.moveTo(192,300);
context.lineTo(192,290);
context.moveTo(198,300);
context.lineTo(198,290);
context.moveTo(205,300);
context.lineTo(205,290);
context.moveTo(215,0);
context.lineTo(215,10);
context.moveTo(222,0);
context.lineTo(222,10);
context.moveTo(228,0);
context.lineTo(228,10);
context.moveTo(235,0);
context.lineTo(235,10);
context.moveTo(215,300);
context.lineTo(215,290);
context.moveTo(222,300);
context.lineTo(222,290);
context.moveTo(228,300);
context.lineTo(228,290);
context.moveTo(235,300);
context.lineTo(235,290);
context.moveTo(215,65);
context.lineTo(215,75);
context.moveTo(222,65);
context.lineTo(222,75);
context.moveTo(228,65);
context.lineTo(228,75);
context.moveTo(235,65);
context.lineTo(235,75);
context.moveTo(215,235);
context.lineTo(215,245);
context.moveTo(222,235);
context.lineTo(222,245);
context.moveTo(228,235);
context.lineTo(228,245);
context.moveTo(235,235);
context.lineTo(235,245);
context.moveTo(245,65);
context.lineTo(245,75);
context.moveTo(252,65);
context.lineTo(252,75);
context.moveTo(258,65);
context.lineTo(258,75);
context.moveTo(265,65);
context.lineTo(265,75);
context.moveTo(245,235);
context.lineTo(245,245);
context.moveTo(252,235);
context.lineTo(252,245);
context.moveTo(258,235);
context.lineTo(258,245);
context.moveTo(265,235);
context.lineTo(265,245);
context.moveTo(245,0);
context.lineTo(245,10);
context.moveTo(252,0);
context.lineTo(252,10);
context.moveTo(258,0);
context.lineTo(258,10);
context.moveTo(265,0);
context.lineTo(265,10);
context.moveTo(245,300);
context.lineTo(245,290);
context.moveTo(252,300);
context.lineTo(252,290);
context.moveTo(258,300);
context.lineTo(258,290);
context.moveTo(265,300);
context.lineTo(265,290);
context.moveTo(275,0);
context.lineTo(275,10);
context.moveTo(282,0);
context.lineTo(282,10);
context.moveTo(288,0);
context.lineTo(288,10);
context.moveTo(295,0);
context.lineTo(295,10);
context.moveTo(275,300);
context.lineTo(275,290);
context.moveTo(282,300);
context.lineTo(282,290);
context.moveTo(288,300);
context.lineTo(288,290);
context.moveTo(295,300);
context.lineTo(295,290);
context.moveTo(275,65);
context.lineTo(275,75);
context.moveTo(282,65);
context.lineTo(282,75);
context.moveTo(288,65);
context.lineTo(288,75);
context.moveTo(295,65);
context.lineTo(295,75);
context.moveTo(275,235);
context.lineTo(275,245);
context.moveTo(282,235);
context.lineTo(282,245);
context.moveTo(288,235);
context.lineTo(288,245);
context.moveTo(295,235);
context.lineTo(295,245);
context.moveTo(305,65);
context.lineTo(305,75);
context.moveTo(312,65);
context.lineTo(312,75);
context.moveTo(318,65);
context.lineTo(318,75);
context.moveTo(325,65);
context.lineTo(325,75);
context.moveTo(305,235);
context.lineTo(305,245);
context.moveTo(312,235);
context.lineTo(312,245);
context.moveTo(318,235);
context.lineTo(318,245);
context.moveTo(325,235);
context.lineTo(325,245);
context.moveTo(305,0);
context.lineTo(305,10);
context.moveTo(312,0);
context.lineTo(312,10);
context.moveTo(318,0);
context.lineTo(318,10);
context.moveTo(325,0);
context.lineTo(325,10);
context.moveTo(305,300);
context.lineTo(305,290);
context.moveTo(312,300);
context.lineTo(312,290);
context.moveTo(318,300);
context.lineTo(318,290);
context.moveTo(325,300);
context.lineTo(325,290);
context.moveTo(335,0);
context.lineTo(335,10);
context.moveTo(342,0);
context.lineTo(342,10);
context.moveTo(348,0);
context.lineTo(348,10);
context.moveTo(355,0);
context.lineTo(355,10);
context.moveTo(335,300);
context.lineTo(335,290);
context.moveTo(342,300);
context.lineTo(342,290);
context.moveTo(348,300);
context.lineTo(348,290);
context.moveTo(355,300);
context.lineTo(355,290);
context.moveTo(335,65);
context.lineTo(335,75);
context.moveTo(342,65);
context.lineTo(342,75);
context.moveTo(348,65);
context.lineTo(348,75);
context.moveTo(355,65);
context.lineTo(355,75);
context.moveTo(335,235);
context.lineTo(335,245);
context.moveTo(342,235);
context.lineTo(342,245);
context.moveTo(348,235);
context.lineTo(348,245);
context.moveTo(355,235);
context.lineTo(355,245);
context.lineWidth = 2;
context.strokeStyle = "white";
context.fill();
context.stroke();
context.closePath();

//numbers
context.font = 'normal 22px Arial';
context.fillStyle= "white";
context.fillText(10,79,285);
context.fillText(10,79,40);
context.fillText(20,109,285);
context.fillText(20,109,40);
context.fillText(30,138,285);
context.fillText(30,138,40);
context.fillText(40,168,285);
context.fillText(40,168,40);
context.fillText(50,198,285);
context.fillText(50,198,40);
context.fillText(40,228,285);
context.fillText(40,228,40);
context.fillText(30,258,285);
context.fillText(30,258,40);
context.fillText(20,288,285);
context.fillText(20,288,40);
context.fillText(10,318,285);
context.fillText(10,318,40);
context.closePath();

//whiteline
context.beginPath();
context.moveTo(145,88);
context.lineTo(155,88);
context.lineWidth = 4;
context.strokeStyle = "white";
context.stroke();
context.closePath();

//smokeyleftarm
var leftarm = context.createLinearGradient(235,330,450,355);
leftarm.addColorStop(1,"rgb(77,76,75)");
leftarm.addColorStop(0.5,"rgb(54,53,52)");
leftarm.addColorStop(0,"black");

context.beginPath();
context.moveTo(240,350);
context.bezierCurveTo(200,345,200,315,215,305);
context.quadraticCurveTo(245,285,275,320);
context.moveTo(255,303);
context.lineTo(450,309);
context.lineTo(450,350);
context.lineTo(240,350);
context.fillStyle = leftarm;
context.fill();
context.strokeStyle = "rgb(64,65,55)";
context.stroke();
context.closePath();

///clawmarks
context.beginPath();
context.moveTo(221,300);
context.lineTo(222,313);
context.moveTo(233,300);
context.lineTo(234,313);
context.moveTo(244,300);
context.lineTo(245,313);
context.strokeStyle = "rgb(64,65,55)";
context.stroke();
context.closePath();

//rightarm
var rightarm = context.createLinearGradient(705,400,645,500);
rightarm.addColorStop(1,"rgb(77,76,75)");
rightarm.addColorStop(0.5,"rgb(54,53,52)");
rightarm.addColorStop(0,"black");

context.beginPath();
context.moveTo(700,390);
context.bezierCurveTo(730,420,730,460,640,470);
context.lineTo(640,515);
context.bezierCurveTo(760,470,760,470,750,400);
context.lineTo(725,350);
context.lineTo(700,390);
context.fillStyle = rightarm;
context.fill();
context.strokeStyle = "rgb(64,65,55)";
context.stroke();
context.closePath();

//jersey
var jersey = context.createLinearGradient(500,400,640,550);
jersey.addColorStop(0,"rgb(237,167,76)");
jersey.addColorStop(0.25,"rgb(247,159,45)");
jersey.addColorStop(0.5,"orange");
jersey.addColorStop(0.75,"rgb(250,146,10)");
jersey.addColorStop(1,"rgb(250,142,0)");

context.beginPath();
context.moveTo(450,385);
context.lineTo(430,295);
context.lineTo(520,285);
context.bezierCurveTo(550,315,610,315,640,285);
context.lineTo(730,345);
context.lineTo(700,410);
context.lineTo(640,370);
context.lineTo(640,550);
context.lineTo(500,540);
context.lineTo(505,375);
context.lineTo(450,385);
context.fillStyle = jersey;
context.fill();
context.strokeStyle = "darkorange";
context.stroke();
context.closePath();

context.beginPath();
context.moveTo(590,525);
context.lineTo(605,525);
context.lineTo(605,540);
context.lineTo(590,540);
context.lineTo(590,525);
context.lineWidth = 2;
context.fillStyle = "black";
context.fill();
context.strokeStyle = "black";
context.stroke();
context.closePath();

context.beginPath();
context.moveTo(605,525);
context.lineTo(625,525);
context.lineTo(625,540);
context.lineTo(605,540);
context.lineTo(605,525);
context.lineWidth = 2;
context.fillStyle = "white";
context.fill();
context.strokeStyle = "white";
context.stroke();
context.closePath();

context.beginPath();
context.moveTo(625,538);
context.lineTo(615,538);
context.strokeStyle = "darkorange";
context.fill();
context.stroke();
context.closePath();

context.beginPath();
context.moveTo(450,295);
context.lineTo(475,293);
context.lineTo(490,375);
context.lineTo(465,380);
context.strokeStyle = "white";
context.fill();
context.stroke();
context.closePath();

context.beginPath();
context.moveTo(705,333);
context.lineTo(685,320);
context.lineTo(665,382);
context.lineTo(685,395);
context.lineTo(705,333);
context.strokeStyle = "white";
context.stroke();
context.fill();
context.closePath();

//jerseynumber
var text = "00"
context.beginPath();
context.font ='bold 120px Palatino Linotype';
context.fillStyle = "white";
context.fillText(text,515,460);
context.closePath();

var text = "S"
context.beginPath();
context.font ='bold 12px Arial';
context.fillStyle = "black";
context.fillText(text,608,535);
context.closePath();

///head
var face = context.createRadialGradient(580,230,85,580,230,50);
face.addColorStop(1,"rgb(77,76,75)");
face.addColorStop(0.5,"rgb(54,53,52)");
face.addColorStop(0,"black");

context.beginPath();
context.arc(580,230,90,0,2*Math.PI,false);
context.strokeStyle = "rgb(64,65,55)";
context.fillStyle = face;
context.fill();
context.stroke();
context.lineWidth = 2;
context.closePath();

//facemarkings
context.beginPath();
context.moveTo(555,235);
context.bezierCurveTo(575,205,575,175,550,145);
context.bezierCurveTo(567,135,592,135,605,144);
context.bezierCurveTo(580,175,580,205,605,238);
context.lineTo(555,235);
context.strokeStyle = "rgb(64,65,55)";
context.fillStyle = "white";
context.fill();
context.stroke();
context.closePath();

//tongue
var tongue = context.createLinearGradient(558,278,595,325);
tongue.addColorStop(0,"rgb(176,0,123)");
tongue.addColorStop(1,"rgb(209,111,180)");
tongue.addColorStop(0.5,"rgb(207,93,172)");

context.beginPath();
context.moveTo(557,275);
context.bezierCurveTo(562,330,592,330,597,275);
context.lineTo(557,275);
context.fillStyle = tongue;
context.fill();
context.strokeStyle = "rgb(176,0,123)";
context.stroke();
context.closePath();

context.beginPath();
context.moveTo(577,315);
context.lineTo(577,285);
context.strokeStyle = "rgb(87,84,86)";
context.stroke();
context.closePath();

//snout
var snout = context.createLinearGradient(545,265,620,315);
snout.addColorStop(1,"rgb(59,41,9)");
snout.addColorStop(0.5,"rgb(120,79,8)");
snout.addColorStop(0,"rgb(59,41,9)");

context.beginPath();
context.moveTo(530,260);
context.bezierCurveTo(555,220,600,220,625,260);
context.bezierCurveTo(655,300,600,320,577,275);
context.bezierCurveTo(545,320,500,300,530,260);
context.fillStyle = snout;
context.fill();
context.strokeStyle = "rgb(59,41,9)";
context.stroke();
context.closePath();

var nose = context.createLinearGradient(577,280,590,245);
nose.addColorStop(1,"black");
nose.addColorStop(0.5,"rgb(69,69,68)");
nose.addColorStop(0,"rgb(97,96,95)");

context.beginPath();
context.moveTo(577,275);
context.lineTo(595,250);
context.bezierCurveTo(585,240,569,240,559,250);
context.lineTo(577,275);
context.fillStyle = nose;
context.fill();
context.strokeStyle = "black";
context.stroke();
context.closePath();

context.beginPath();
context.moveTo(590,250);
context.quadraticCurveTo(588,245,586,250);
context.lineTo(584,258);
context.lineTo(590,250);
context.fillStyle = "white";
context.stroke();
context.fill();
context.closePath();

//snoutdots
context.beginPath();
context.arc(550,260,2,0,2*Math.PI,false);
context.fillStyle = "black";
context.fill();
context.stroke();
context.closePath();

context.beginPath();
context.arc(557,270,2,0,2*Math.PI,false);
context.fillStyle = "black";
context.fill();
context.stroke();
context.closePath();

context.beginPath();
context.arc(543,270,2,0,2*Math.PI,false);
context.fillStyle = "black";
context.fill();
context.stroke();
context.closePath();

context.beginPath();
context.arc(604,260,2,0,2*Math.PI,false);
context.fillStyle = "black";
context.fill();
context.stroke();
context.closePath();

context.beginPath();
context.arc(597,270,2,0,2*Math.PI,false);
context.fillStyle = "black";
context.fill();
context.stroke();
context.closePath();

context.beginPath();
context.arc(611,270,2,0,2*Math.PI,false);
context.fillStyle = "black";
context.fill();
context.stroke();
context.closePath();

///eyes
context.beginPath();
context.arc(545,200,10,0,2*Math.PI,false);
context.fillStyle = "white";
context.fill();
context.closePath();

context.beginPath();
context.arc(545,200,8,0,2*Math.PI,false);
context.fillStyle = "black";
context.fill();
context.closePath();

context.beginPath();
context.arc(548,200,3,0,2*Math.PI,false);
context.fillStyle = "white";
context.fill();
context.closePath();

context.beginPath();
context.arc(610,200,10,0,2*Math.PI,false);
context.fillStyle = "white";
context.fill();
context.closePath();

context.beginPath();
context.arc(610,200,8,0,2*Math.PI,false);
context.fillStyle = "black";
context.fill();
context.closePath();

context.beginPath();
context.arc(613,200,3,0,2*Math.PI,false);
context.fillStyle = "white";
context.fill();
context.closePath();

//eyebrows
var eyebrows = context.createLinearGradient(530,175,548,185);
eyebrows.addColorStop(1,"rgb(59,41,9)");
eyebrows.addColorStop(0.5,"rgb(120,79,8)");
eyebrows.addColorStop(0,"rgb(59,41,9)");

context.beginPath();
context.moveTo(525,190);
context.lineTo(548,180);
context.quadraticCurveTo(550,175,545,170);
context.lineTo(522,179);
context.quadraticCurveTo(520,184,525,190);
context.fillStyle = eyebrows;
context.fill();
context.strokeStyle = "rgb(59,41,9)";
context.stroke();
context.closePath();

var eyebrows1 = context.createLinearGradient(610,182,630,188);
eyebrows1.addColorStop(1,"rgb(59,41,9)");
eyebrows1.addColorStop(0.5,"rgb(120,79,8)");
eyebrows1.addColorStop(0,"rgb(59,41,9)");

context.beginPath();
context.moveTo(607,180);
context.lineTo(630,190);
context.quadraticCurveTo(640,185,629,178);
context.lineTo(609,170);
context.quadraticCurveTo(597,173,607,180);
context.fillStyle = eyebrows1;
context.fill();
context.strokeStyle = "rgb(59,41,9)";
context.stroke();
context.closePath();

///leftear
var leftear = context.createLinearGradient(520,180,450,130);
leftear.addColorStop(1,"rgb(77,76,75)");
leftear.addColorStop(0.5,"rgb(54,53,52)");
leftear.addColorStop(0,"black");

context.beginPath();
context.moveTo(535,150);
context.bezierCurveTo(400,120,415,230,450,250);
context.quadraticCurveTo(475,265,500,200);
context.fillStyle = leftear;
context.fill();
context.strokeStyle = "rgb(64,65,55)";
context.stroke();
context.closePath();

//rightear
var rightear = context.createLinearGradient(620,250,765,280);
rightear.addColorStop(1,"rgb(77,76,75)");
rightear.addColorStop(0.5,"rgb(54,53,52)");
rightear.addColorStop(0,"black");

context.beginPath();
context.moveTo(620,150);
context.bezierCurveTo(755,120,770,230,730,245);
context.quadraticCurveTo(700,255,665,200);
context.fillStyle = rightear;
context.fill();
context.strokeStyle = "rgb(64,65,55)";
context.stroke();
context.closePath();

//
context.beginPath();
var textcolor = "darkorange";
var text = "Amanda Ho";
context.font ='bold 15px Lucida Grande';
context.fillStyle = textcolor;
context.fillText(text,700,580);
context.closePath();

//// <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< END HERE

</script>
</body>
</html>

ART 210

Tuesday, September 29, 2015

FINAL CANVAS PROJECT: TENNESSEE VOLUNTEERS

No comments:

Post a Comment