Tuesday, September 29, 2015

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>
Posted by at No comments:

Thursday, September 24, 2015

Illustrator: Panda Bear


Posted by at No comments:

Thursday, September 17, 2015

CANVAS HTML5: WORKING WITH TEXT AND GRADIENT

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title> here goes the title of your project </title>

<style type="text/css">
body,td,th {
font-family: Helvetica, Arial, sans-serif;
font-size: 12px;
color: #000;
}
body {
background-color: #FFF;
}
#myCanvas { border: rgb(102,0,255) medium dashed; }
</style>
</head>

<body>

<canvas id="myCanvas" width="400" height="400"></canvas>

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

//// >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> START HERE

context.beginPath();

///background

context.rect(0,0,400,400);
context.fillStyle = "rgb(46,35,46)";
context.fill();
context.stroke();
context.closePath();

 var text = "AMANDA HO";
 var textcolor = context.createLinearGradient(70,200,350,200);
 textcolor.addColorStop(0,"rgb(245,66,167)");
 textcolor.addColorStop(0.5,"lightpink");
 textcolor.addColorStop(1,"grey");

 context.font = 'bold 50px Monaco';
 context.fillStyle= textcolor;
 context.fillText(text,70,200);
 context.closePath();


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

</script>
</body>
</html>
Posted by at No comments:

Tuesday, September 15, 2015

CANVAS HTML5: WORKING WITH QUADRATIC AND BEZIER CURVES


HTML 5 CODE:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title> Hedwig </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="365" height="500"></canvas>

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

//// >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> START HERE

//background
var background = context.createRadialGradient(100,400,10,400,300,400);
background.addColorStop(0,"grey");
//background.addColorStop(0.5,"grey");
background.addColorStop(1,"black");
 context.beginPath();
 context.rect(0,0, canvas.width, canvas.height);
 context.fillStyle = background;
 context.fill();
 context.closePath();
 

///body and head
context.beginPath();
context.moveTo(70,310);
context.quadraticCurveTo(30,220,100,180);
context.lineTo(100,180);
context.bezierCurveTo(110,70,210,70,220,180);
context.lineTo(220,180);
context.quadraticCurveTo(280,210,230,300);
context.fillStyle = "white";
context.fill();
context.strokeStyle = "black";
context.stroke();
context.closePath();

//right wing
context.beginPath();
context.moveTo(220,180);
context.bezierCurveTo(250,130,200,30,310,120);
context.lineTo(310,120);
context.quadraticCurveTo(400,200,290,140);
context.quadraticCurveTo(400,210,270,150);
context.quadraticCurveTo(400,220,270,170);
context.quadraticCurveTo(400,230,270,190);
context.quadraticCurveTo(380,245,280,215);
context.quadraticCurveTo(350,270,285,240);
context.quadraticCurveTo(345,290,250,245);
context.quadraticCurveTo(320,293,245,260);
context.quadraticCurveTo(300,295,240,275);
context.quadraticCurveTo(290,300,238,285);
context.quadraticCurveTo(280,310,230,295);
context.fillStyle = "white";
context.fill();
context.strokeStyle = "black";
context.stroke();
context.closePath();



//book 1

context.beginPath();
context.moveTo(20,312);
context.lineTo(290,298);
context.lineTo(290,336);
context.lineTo(20,350);
context.lineTo(20,312);
context.lineWidth = 2;
context.fillStyle = "rgb(67,0,125)";
context.fill();
context.strokeStyle = "black";
context.stroke();
context.closePath();

context.beginPath();
context.moveTo(20,312);
context.quadraticCurveTo(10,331,20,350);
context.strokeStyle = "black";
context.fillStyle = "rgb(67,0,125)";
context.fill();
context.stroke();
context.closePath();

context.beginPath();
context.moveTo(290,298);
context.quadraticCurveTo(300,319,290,336);
context.strokeStyle = "black";
context.fillStyle = "rgb(67,0,125)";
context.fill();
context.stroke();
context.closePath();

context.beginPath();
context.moveTo(50,312);
context.lineTo(70,310);
context.lineTo(70,347);
context.lineTo(50,348);
context.lineTo(50,312);
context.fillStyle = "rgb(106,76,135)";
context.fill();
context.strokeStyle = "black";
context.stroke();
context.closePath();

context.beginPath();
context.moveTo(260,300);
context.lineTo(260,337);
context.lineTo(240,338);
context.lineTo(240,301);
context.lineTo(260,300);
context.fillStyle = "rgb(106,76,135)";
context.fill();
context.strokeStyle = "black";
context.font= '10pt Helvetica';
context.fillStyle ='gold';
context.fillText ('MAGICAL',95,330);
context.fillText ('THEORY',160,330);
context.stroke();
context.closePath();

///book 2

context.beginPath();
context.moveTo(65,348);
context.lineTo(320,339);
context.lineTo(320,374);
context.lineTo(65,383);
context.lineTo(65,348);
context.lineWidth = 1;
context.strokeStyle = "black";
context.fillStyle ="rgb(194,131,31)";
context.fill();
context.font= '10pt Arial';
context.fillStyle ='black';
context.fillText ('QUIDDITCH 101',145,365);
context.stroke();
context.closePath();

context.beginPath();
context.moveTo(65,348);
context.quadraticCurveTo(50,365,65,383);
context.moveTo(320,339);
context.quadraticCurveTo(335,358,320,374);
context.strokeStyle = "black";
context.fillStyle = "rgb(194,131,31)"
context.fill();
context.lineWidth = 1;
context.stroke();
context.closePath();

context.beginPath();
context.moveTo(95,348);
context.lineTo(130,381);
context.moveTo(130,346);
context.lineTo(95,382);
context.moveTo(250,342);
context.lineTo(290,374);
context.moveTo(290,340);
context.lineTo(250,376);
context.lineWidth = 2;
context.strokeStyle = "black";
context.fillStyle = "rgb(59,39,7)";
context.stroke();
context.fill();
context.closePath();

context.beginPath();
context.arc(113,364,5,0,2*Math.PI,false);
context.arc(270,358,5,0,2*Math.PI,false);
context.fillStyle = "rgb(59,39,7)";
context.fill();
context.closePath();

///book3

context.beginPath();
context.moveTo(15,385);
context.lineTo(340,376);
context.lineTo(340,411);
context.lineTo(15,420);
context.lineTo(15,385);
context.fillStyle = "rgb(12,1,130)";
context.strokeStyle = "black"
context.stroke();
context.fill();
context.closePath();

context.beginPath();
context.moveTo(15,385);
context.quadraticCurveTo(0,402,15,420);
context.moveTo(340,376);
context.quadraticCurveTo(355,393,340,411);
context.fillStyle = "rgb(12,1,130)";
context.strokeStyle = "black"
context.stroke();
context.fill();
context.closePath();

context.beginPath();
context.moveTo(40,385);
context.lineTo(48,385);
context.lineTo(48,419);
context.lineTo(40,419);
context.lineTo(40,385);
context.moveTo(315,378);
context.lineTo(307,378);
context.lineTo(307,412);
context.lineTo(315,412);
context.lineTo(315,378);
context.moveTo(285,378);
context.lineTo(277,378);
context.lineTo(277,412);
context.lineTo(285,412);
context.lineTo(285,378);
context.moveTo(70,384);
context.lineTo(78,384);
context.lineTo(78,418);
context.lineTo(70,418);
context.lineTo(70,384);
context.font= '10pt sans-serif';
context.fillStyle = 'rgb(110,106,158)';
context.fillText ('FANTASTIC',110,403);
context.fillText ('BEASTS',195,402);
context.fillStyle = "rgb(110,106,158)";
context.fill();
context.strokeStyle = "black";
context.stroke();
context.fill();
context.closePath();

context.beginPath();
context.moveTo(48,385);
context.lineTo(70,418);
context.moveTo(70,384);
context.lineTo(48,419);
context.moveTo(285,378);
context.lineTo(307,412);
context.moveTo(307,378);
context.lineTo(285,412);
context.lineWidth = 3;
context.fillStyle = "rgb(110,106,158)";
context.stroke();
context.fill();
context.closePath();



//mouth and beak

context.beginPath();
context.moveTo(100,180);
context.quadraticCurveTo(140,190,160,150);
context.quadraticCurveTo(180,190,220,180);
context.fillStyle = "grey";
context.strokeStyle = "grey";
context.fill();
context.stroke();
context.closePath();

context.beginPath();
context.moveTo(150,155);
context.quadraticCurveTo(160,145,170,155);
context.moveTo(150,155);
context.lineTo(160,175);
context.lineTo(170,155)
context.fillStyle = "black";
context.strokeStyle = "black";
context.fill();
context.stroke();
context.closePath();


//scarf
context.beginPath();
context.moveTo(100,180);
context.lineTo(220,180);
context.lineWidth = 1;
context.strokeStyle = "black";
context.fillStyle = "darkred";
context.stroke();
context.fill();
context.closePath();

context.beginPath();
context.moveTo(100,180);
context.quadraticCurveTo(160,205,220,180);
context.lineWidth = 1;
context.strokeStyle = "black";
context.fillStyle = "darkred";
context.stroke();
context.fill();
context.closePath();

context.beginPath();
context.moveTo(110,180);
context.lineTo(135,180);
context.lineTo(135,190);
context.lineTo(110,183);
context.lineTo(110,180);
context.strokeStyle = "black";
context.fillStyle = "gold";
context.fill();
context.stroke();
context.closePath();

context.beginPath();
context.moveTo(150,180);
context.lineTo(170,180);
context.lineTo(170,191);
context.lineTo(150,192);
context.lineTo(150,180);
context.strokeStyle = "black";
context.fillStyle = "gold";
context.fill();
context.stroke();
context.closePath();

context.beginPath();
context.moveTo(185,180);
context.lineTo(210,180);
context.lineTo(210,183);
context.lineTo(185,190);
context.lineTo(185,180);
context.strokeStyle = "black";
context.fillStyle = "gold";
context.fill();
context.stroke();
context.closePath();


context.beginPath();
context.moveTo(100,180);
context.quadraticCurveTo(80,200,110,220);
context.quadraticCurveTo(120,230,110,270);
context.lineWidth = 1;
context.strokeStyle = "black";
context.fillStyle = "darkred";
context.stroke();
context.fill();
context.closePath();


context.beginPath();
context.moveTo(94,190);
context.lineTo(101,195);
context.lineTo(102,205);
context.lineTo(92,196);
context.lineTo(94,190);
context.strokeStyle = "black";
context.fillStyle = "gold";
context.fill();
context.stroke();
context.closePath();


context.beginPath();
context.moveTo(110,270);
context.lineTo(100,260);
context.lineTo(105,216);
context.lineWidth = 1;
context.strokeStyle = "black";
context.fillStyle = "darkred";
context.stroke();
context.fill();
context.closePath();

context.beginPath();
context.moveTo(100,180);
context.bezierCurveTo(70,150,40,210,10,180);
context.lineWidth = 1;
context.strokeStyle = "black";
context.fillStyle = "darkred";
context.stroke();
context.fill();
context.closePath();

context.beginPath();
context.moveTo(10,180);
context.lineTo(20,190);
context.lineTo(50,183);
context.lineWidth = 1;
context.strokeStyle = "black";
context.fillStyle = "darkred";
context.stroke();
context.fill();
context.closePath();

context.beginPath();
context.moveTo(104,225);
context.lineTo(114,234);
context.lineTo(114,245);
context.lineTo(103,232);
context.lineTo(104,228);

context.moveTo(102,245);
context.lineTo(113,258);
context.lineTo(110,270);
context.lineTo(101,254);
context.lineTo(102,245);
context.strokeStyle = "black";
context.fillStyle = "gold";
context.fill();
context.stroke();
context.closePath();

context.moveTo(22,181);
context.lineTo(30,181);
context.lineTo(25,188);
context.lineTo(20,190);
context.lineTo(22,180);
context.strokeStyle = "black";
context.fillStyle = "gold";
context.fill();
context.stroke();
context.closePath();

context.moveTo(38,181);
context.lineTo(46,181);
context.lineTo(45,185);
context.lineTo(38,188);
context.lineTo(38,180);
context.strokeStyle = "black";
context.fillStyle = "gold";
context.fill();
context.stroke();
context.closePath();






//EYES

context.beginPath();
context.moveTo(120,135);
context.quadraticCurveTo(140,100,160,130);
context.moveTo(200,135);
context.quadraticCurveTo(180,100,160,130);
context.fillStyle = "white";
context.strokeStyle = "black";
context.stroke();
context.fill();
context.closePath();

//eye 1
context.beginPath();
context.arc(140,140,9,0,2*Math.PI,false);
context.fillStyle = "yellow";
context.fill();
context.stroke();
context.closePath();

//eye 2
context.beginPath();
context.arc(180,140,9,0,2*Math.PI,false);
context.fillStyle = "yellow";
context.fill();
context.stroke();
context.closePath();

//eye 1
context.beginPath();
context.arc(143,140,6,0,2*Math.PI,false);
context.fillStyle = "black";
context.fill();
context.stroke();
context.closePath();

//eye 2
context.beginPath();
context.arc(183,140,6,0,2*Math.PI,false);
context.fillStyle = "black";
context.fill();
context.stroke();
context.closePath();

//eye 1
context.beginPath();
context.arc(145,139,4,0,2*Math.PI,false);
context.fillStyle = "white";
context.fill();
context.stroke();
context.closePath();

//eye 2
context.beginPath();
context.arc(185,139,4,0,2*Math.PI,false);
context.fillStyle = "white";
context.fill();
context.stroke();
context.closePath();

///head markings

context.beginPath();
context.arc(160,105,.5,0,2*Math.PI,false);
context.fillStyle = "lightgrey";
context.fill();
context.stroke();
context.closePath();

context.beginPath();
context.arc(150,105,.5,0,2*Math.PI,false);
context.fillStyle = "lightgrey";
context.fill();
context.stroke();
context.closePath();

context.beginPath();
context.arc(170,105,.5,0,2*Math.PI,false);
context.fillStyle = "lightgrey";
context.fill();
context.stroke();
context.closePath();

context.beginPath();
context.arc(165,110,.5,0,2*Math.PI,false);
context.fillStyle = "lightgrey";
context.fill();
context.stroke();
context.closePath();

context.beginPath();
context.arc(155,110,.5,0,2*Math.PI,false);
context.fillStyle = "lightgrey";
context.fill();
context.stroke();
context.closePath();

context.beginPath();
context.arc(145,110,.5,0,2*Math.PI,false);
context.fillStyle = "lightgrey";
context.fill();
context.stroke();
context.closePath();

context.beginPath();
context.arc(175,110,.5,0,2*Math.PI,false);
context.fillStyle = "lightgrey";
context.fill();
context.stroke();
context.closePath();

context.beginPath();
context.arc(160,115,.5,0,2*Math.PI,false);
context.fillStyle = "lightgrey";
context.fill();
context.stroke();
context.closePath();

///last stripe

context.moveTo(73,172);
context.lineTo(84,171);
context.lineTo(87,179);
context.lineTo(80,179);
context.lineTo(73,172);
context.strokeStyle = "black";
context.fillStyle = "gold";
context.fill();
context.stroke();
context.closePath();

//leftwing
context.beginPath();
context.moveTo(61,220);
context.quadraticCurveTo(10,200,15,250);
context.quadraticCurveTo(15,280,30,248);
context.quadraticCurveTo(10,310,40,255);
context.quadraticCurveTo(8,320,45,260);
context.quadraticCurveTo(15,325,45,270);
context.quadraticCurveTo(17,335,47,280);
context.quadraticCurveTo(18,340,60,284);
context.lineWidth = 2;
context.fillStyle = "white";
context.strokeStyle = "black";
context.stroke();
context.fill();
context.closePath();


///chest
context.beginPath();
context.moveTo(105,200);
context.quadraticCurveTo(160,300,215,200);
context.lineWidth = 1;
context.fillStyle = "white"
context.strokeStyle = "black";
context.stroke();
context.fill();
context.closePath();

context.beginPath();
context.arc(115,203,1,0,2*Math.PI,false);
context.arc(125,203,1,0,2*Math.PI,false);
context.arc(135,203,1,0,2*Math.PI,false);
context.arc(145,203,1,0,2*Math.PI,false);
context.arc(155,203,1,0,2*Math.PI,false);
context.arc(165,203,1,0,2*Math.PI,false);
context.arc(175,203,1,0,2*Math.PI,false);
context.arc(185,203,1,0,2*Math.PI,false);
context.arc(195,203,1,0,2*Math.PI,false);
context.arc(205,203,1,0,2*Math.PI,false);
context.fillStyle = "gray";
context.fill();
context.closePath();

context.beginPath();
context.arc(120,208,1,0,2*Math.PI,false);
context.arc(130,208,1,0,2*Math.PI,false);
context.arc(140,208,1,0,2*Math.PI,false);
context.arc(150,208,1,0,2*Math.PI,false);
context.arc(160,208,1,0,2*Math.PI,false);
context.arc(170,208,1,0,2*Math.PI,false);
context.arc(180,208,1,0,2*Math.PI,false);
context.arc(190,208,1,0,2*Math.PI,false);
context.arc(200,208,1,0,2*Math.PI,false);
context.fillStyle = "gray";
context.fill();
context.closePath();

context.beginPath();
context.moveTo(120,213);
context.quadraticCurveTo(130,220,140,213);
context.quadraticCurveTo(150,220,160,213);
context.quadraticCurveTo(170,220,180,213);
context.quadraticCurveTo(190,220,200,213);
context.strokeStyle = "gray";
context.stroke();
context.closePath();

context.beginPath();
context.arc(125,220,1,0,2*Math.PI,false);
context.arc(135,220,1,0,2*Math.PI,false);
context.arc(145,220,1,0,2*Math.PI,false);
context.arc(155,220,1,0,2*Math.PI,false);
context.arc(165,220,1,0,2*Math.PI,false);
context.arc(175,220,1,0,2*Math.PI,false);
context.arc(185,220,1,0,2*Math.PI,false);
context.arc(195,220,1,0,2*Math.PI,false);
context.fillStyle = "gray";
context.fill();
context.closePath();

context.beginPath();
context.arc(130,225,1,0,2*Math.PI,false);
context.arc(140,225,1,0,2*Math.PI,false);
context.arc(150,225,1,0,2*Math.PI,false);
context.arc(160,225,1,0,2*Math.PI,false);
context.arc(170,225,1,0,2*Math.PI,false);
context.arc(180,225,1,0,2*Math.PI,false);
context.arc(190,225,1,0,2*Math.PI,false);
context.fillStyle = "gray";
context.fill();
context.closePath();

context.beginPath();
context.moveTo(130,230)
context.quadraticCurveTo(140,240,150,230);
context.quadraticCurveTo(160,240,170,230);
context.quadraticCurveTo(180,240,190,230);
context.strokeStyle = "gray";
context.stroke();
context.closePath();

context.beginPath();
context.arc(145,240,1,0,2*Math.PI,false);
context.arc(155,240,1,0,2*Math.PI,false);
context.arc(165,240,1,0,2*Math.PI,false);
context.arc(175,240,1,0,2*Math.PI,false);
context.fillStyle = "gray";
context.fill();
context.closePath();

context.beginPath();
context.arc(150,245,1,0,2*Math.PI,false);
context.arc(160,245,1,0,2*Math.PI,false);
context.arc(170,245,1,0,2*Math.PI,false);
context.fillStyle = "gray";
context.fill();
context.closePath();


//beak shadow
context.beginPath();
context.moveTo(163,155);
context.quadraticCurveTo(164,155,167,155);
context.lineTo(164,162);
context.lineTo(163,155);
context.fillStyle = "white";
context.strokeStyle = "white";
context.stroke();
context.fill();
context.closePath();

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

</script>
</body>
</html>
Posted by at No comments:

CANVAS HTML5: WORKING WITH ARCS


HTML5 CODE:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title> Turtle </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="400" height="400"></canvas>

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

//// >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> START HERE

//tail

context.beginPath();
context.moveTo(270,170);
context.lineTo(290,165);
context.lineTo(275,180);
context.lineTo(270,170);
context.lineWidth = 2;
context.fillStyle = "green";
context.strokeStyle = "green";
context.fill();
context.stroke();
context.closePath();

//SHELL
context.beginPath();
context.arc(200,200,75,0,Math.PI,true);
context.lineWidth = 4;
context.fillStyle = "rgb(79,69,6)";
context.strokeStyle = "rgb(66,58,4)";
context.fill();
context.stroke();
context.closePath();

context.beginPath();
context.moveTo(180,130);
context.lineTo(190,140);
context.lineTo(210,140);
context.lineTo(220,130);
context.lineWidth = 3;
context.fillStyle = "tan";
context.strokeStyle = "tan";
context.fill();
context.stroke();
context.closePath();

context.beginPath();
context.moveTo(190,150);
context.lineTo(210,150);
context.lineTo(220,160);
context.lineTo(210,170);
context.lineTo(190,170);
context.lineTo(180,160);
context.lineTo(190,150);
context.lineWidth = 3;
context.fillStyle = "tan";
context.strokeStyle = "tan";
context.fill();
context.stroke();
context.closePath();

context.beginPath();
context.moveTo(190,180);
context.lineTo(210,180);
context.lineTo(220,190);
context.lineTo(210,200);
context.lineTo(190,200);
context.lineTo(180,190);
context.lineTo(190,180);
context.lineWidth = 3;
context.fillStyle = "tan";
context.strokeStyle = "tan";
context.fill();
context.stroke();
context.closePath();

context.beginPath();
context.moveTo(240,180);
context.lineTo(260,180);
context.lineTo(270,190);
context.lineTo(260,200);
context.lineTo(240,200);
context.lineTo(230,190);
context.lineTo(240,180);
context.lineWidth = 3;
context.fillStyle = "tan";
context.strokeStyle = "tan";
context.fill();
context.stroke();
context.closePath();

context.beginPath();
context.moveTo(140,180);
context.lineTo(160,180);
context.lineTo(170,190);
context.lineTo(160,200);
context.lineTo(140,200);
context.lineTo(130,190);
context.lineTo(140,180);
context.lineWidth = 3;
context.fillStyle = "tan";
context.strokeStyle = "tan";
context.fill();
context.stroke();
context.closePath();

context.beginPath();
context.moveTo(230,160);
context.lineTo(240,150);
context.lineTo(250,150);
context.lineTo(255,160);
context.lineTo(250,170);
context.lineTo(240,170);
context.lineTo(230,160);
context.lineWidth = 3;
context.fillStyle = "tan";
context.strokeStyle = "tan";
context.fill();
context.stroke();
context.closePath();

context.beginPath();
context.moveTo(170,160);
context.lineTo(160,150);
context.lineTo(150,150);
context.lineTo(140,160);
context.lineTo(150,170);
context.lineTo(160,170);
context.lineTo(170,160);
context.lineWidth = 3;
context.fillStyle = "tan";
context.strokeStyle = "tan";
context.fill();
context.stroke();
context.closePath();

///leg 1
context.beginPath();
context.moveTo(150,200);
context.lineTo(170,200);
context.lineTo(170,220);
context.lineTo(150,220);
context.lineTo(150,200);
context.lineWidth = 3;
context.fillStyle = "green";
context.strokeStyle = "green";
context.fill();
context.stroke();
context.closePath();

//leg 2
context.beginPath();
context.moveTo(230,200);
context.lineTo(250,200);
context.lineTo(250,220);
context.lineTo(230,220);
context.lineTo(230,200);
context.lineWidth = 3;
context.fillStyle = "green";
context.strokeStyle = "green";
context.fill();
context.stroke();
context.closePath();

///bottom of shell
context.beginPath();
context.moveTo(115,200);
context.lineTo(285,200);
context.lineWidth = 10;
context.lineCap = "round";
context.strokeStyle = "rgb(66,58,4)";
context.stroke();
context.closePath();

//face

context.beginPath();
context.arc(105,140,40,0,2*Math.PI,false);
context.fillStyle = "green";
context.lineWidth = 5;
context.fill();
context.stroke();
context.closePath();

//SMILE
context.beginPath();
context.arc(105,145,20,0,Math.PI,false);
context.lineWidth = 3;
context.strokeStyle = "black";
context.stroke();
context.closePath();

//eye 1
context.beginPath();
context.arc(90,130,10,0,2*Math.PI,false);
context.fillStyle = "white";
context.fill();
context.stroke();
context.closePath();

//eye 2
context.beginPath();
context.arc(120,130,10,0,2*Math.PI,false);
context.fillStyle = "white";
context.fill();
context.stroke();
context.closePath();

//eye 1
context.beginPath();
context.arc(90,130,5,0,2*Math.PI,false);
context.fillStyle = "black";
context.fill();
context.stroke();
context.closePath();

//eye 2
context.beginPath();
context.arc(120,130,5,0,2*Math.PI,false);
context.fillStyle = "black";
context.fill();
context.stroke();
context.closePath();

//nose 1
context.beginPath();
context.arc(100,148,1,0,2*Math.PI,false);
context.fillStyle = "black";
context.fill();
context.stroke();
context.closePath();

//nose 2
context.beginPath();
context.arc(110,148,1,0,2*Math.PI,false);
context.fillStyle = "black";
context.fill();
context.stroke();
context.closePath();





 

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

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

Posted by at No comments:

Thursday, September 10, 2015

CANVAS HTML5: WORKING WITH RADIAL GRADIENT AND CIRCLES

HTML CODE:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title> Mickey Mouse </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="400" height="350"></canvas>

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

//// >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> START HERE
///background
 context.beginPath();
 context.rect(0,0, canvas.width, canvas.height);
 context.fillStyle = "red";
 context.fill();
 context.closePath();

 ///LINE 1
context.beginPath();
context.moveTo(0,0);
context.lineTo(400,350);
context.lineWidth = 5;
context.fillStyle = "yellow";
context.strokeStyle ="yellow";
context.stroke();
context.fill();
context.closePath();

 ///LINE 2
context.beginPath();
context.moveTo(400,0);
context.lineTo(0,350);
context.lineWidth = 5;
context.fillStyle = "yellow";
context.strokeStyle ="yellow";
context.stroke();
context.fill();
context.closePath();

///LINE 2
context.beginPath();
context.moveTo(0,180);
context.lineTo(400,180);
context.lineWidth = 5;
context.fillStyle = "yellow";
context.strokeStyle ="yellow";
context.stroke();
context.fill();
context.closePath();

///LINE 3
context.beginPath();
context.moveTo(205,0);
context.lineTo(205,350);
context.lineWidth = 5;
context.fillStyle = "yellow";
context.strokeStyle ="yellow";
context.stroke();
context.fill();
context.closePath();


///FIRST EAR

 var yippee = context.createRadialGradient(100,100,10,100,100,60);
yippee.addColorStop(0,"grey");
yippee.addColorStop(1,"black");

context.beginPath();
 context.arc(100, 100, 60, 0, 2* Math.PI, false);
 context.fillStyle = yippee;
 context.fill();
 context.lineWidth = 5;
 context.strokeStyle = 'black';
 context.stroke();
 context.closePath();

 //second ear
   var yippee = context.createRadialGradient(300,100,10,300,100,60);
yippee.addColorStop(0,"grey");
yippee.addColorStop(1,"black");

context.beginPath();
context.arc(300, 100, 60, 0, 2* Math.PI, false);
 context.fillStyle = yippee;
 context.fill();
 context.lineWidth = 5;
 context.strokeStyle = 'black';
 context.stroke();
 context.closePath();

 //big circle

  var yippee = context.createRadialGradient(200,215,100,200,215,50);
yippee.addColorStop(0,"black");
yippee.addColorStop(1,"grey");

 context.beginPath();
 context.arc(200, 215, 100, 0, 2* Math.PI, false);
 context.fillStyle = yippee;
 context.fill();
 context.lineWidth = 5;
 context.strokeStyle = 'black';
 context.stroke();
 context.closePath();


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

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


Posted by at No comments:

CANVAS HTML5: WORKING WITH LINEAR GRADIANT AND LINES

HTML5 CODE:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title> ARROW </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="400" height="400"></canvas>

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

//// >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> START HERE

// BACKGROUND

 var yippee = context.createLinearGradient(0,0, canvas.width, canvas.height);
yippee.addColorStop(0,"grey");
yippee.addColorStop(0.25,"maroon");
yippee.addColorStop(0.5,"gold");
yippee.addColorStop(0.75,"maroon");
yippee.addColorStop(1,"grey");
context.beginPath();
 context.rect(0,0, canvas.width, canvas.height);
 context.fillStyle = yippee;
 context.fill();
 context.closePath();

///ARROW TRIANGLE

context.beginPath();
context.moveTo(100,100);
context.lineTo(160,100);
context.lineTo(100,160);
context.lineTo(100,100);
context.lineWidth = 10;
context.lineCap = "square";
context.lineJoin = "miter";
context.fillStyle = "white";
context.strokeStyle ="white";
context.fill();
context.stroke();

//STEM OF ARROW

context.beginPath();
context.moveTo(130,130);
context.lineTo(260,260);
context.lineWidth = 10;
context.lineCap = "square";
context.lineJoin = "miter";
context.fillStyle = "white";
context.strokeStyle ="white";
context.fill();
context.stroke();

//FIRST END

context.beginPath();
context.moveTo(260,260);
context.lineTo(300,260);
context.lineTo(320,280);
context.lineTo(280,280);
context.lineTo(280,320);
context.lineTo(260,300);
context.lineTo(260,260);
context.lineWidth = 5;
context.lineCap = "square";
context.lineJoin = "miter";
context.fillStyle = "white";
context.strokeStyle ="white";
context.fill();
context.stroke();

///SECOND END

context.beginPath();
context.moveTo(290,290);
context.lineTo(330,290);
context.lineTo(350,310);
context.lineTo(310,310);
context.lineTo(310,350);
context.lineTo(290,330);
context.lineTo(290,290);
context.lineWidth = 5;
context.lineCap = "square";
context.lineJoin = "miter";
context.fillStyle = "white";
context.strokeStyle ="white";
context.fill();
context.stroke();

 /// SECOND ARROW

 ///ARROW TRIANGLE
 context.beginPath();
context.moveTo(300,100);
context.lineTo(300,160);
context.lineTo(240,100);
context.lineTo(300,100);
context.lineWidth = 10;
context.lineCap = "square";
context.lineJoin = "miter";
context.fillStyle = "white";
context.strokeStyle ="white";
context.fill();
context.stroke();

//STEM OF ARROW

context.beginPath();
context.moveTo(270,130);
context.lineTo(140,260);
context.lineWidth = 10;
context.lineCap = "square";
context.lineJoin = "miter";
context.fillStyle = "white";
context.strokeStyle ="white";
context.fill();
context.stroke();

//FIRST END

context.beginPath();
context.moveTo(140,260);
context.lineTo(140,300);
context.lineTo(120,320);
context.lineTo(120,280);
context.lineTo(80,280);
context.lineTo(100,260);
context.lineTo(140,260);
context.lineWidth = 5;
context.lineCap = "square";
context.lineJoin = "miter";
context.fillStyle = "white";
context.strokeStyle ="white";
context.fill();
context.stroke();

///SECOND END

context.beginPath();
context.moveTo(110,290);
context.lineTo(110,330);
context.lineTo(90,350);
context.lineTo(90,310);
context.lineTo(50,310);
context.lineTo(70,290);
context.lineTo(110,290);
context.lineWidth = 5;
context.lineCap = "square";
context.lineJoin = "miter";
context.fillStyle = "white";
context.strokeStyle ="white";
context.fill();
context.stroke();



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

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

Posted by at No comments:

Wednesday, September 2, 2015

Rising to the Challenge

My name is Amanda Ho, and I'm eighteen years old. I am definitely by no means new to the Tampa area as I have proudly called it my home for the past fourteen years. 
However, I am a new incoming freshmen to the University of Tampa and have decided to major in Public Relations and Advertising. With that said, I was very enthused to take beginning digital arts. Even though, I will truthfully share after the first class I left the classroom quite intimidated by what all lies ahead in this class. I came into college expecting that there was going to be challenges coming left and right, and this course will just be the beginning. Personally I enjoy challenges and despite my intimidation from the first class I am expecting nothing but a great experience through the successes and failures to come. In the end,  I know this is all a part of the journey to obtaining my goals and future. I can't wait to grow in my knowledge by becoming more efficient in the world of graphic design. 
Posted by at No comments:
Subscribe to: Posts (Atom)