ADVANCED DIGITAL ARTS
Final
<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
////////////////////Background
var grd6=context.createRadialGradient(50,50,60,80,80,600);
grd6.addColorStop(0, "yellow");
grd6.addColorStop(.1,"lightCyan");
grd6.addColorStop(.6, "skyblue");
context.beginPath();
context.rect(0,0,canvas.width,canvas.height);
context.fill;
context.fill();
context.stroke;
context.stroke();
context.beginPath();
context.arc(400,200-100,25,.4*Math.PI,1.6*Math.PI);
context.quadraticCurveTo(440,140-100,475,175-100);
context.bezierCurveTo(500,100-100,575,150-100,550,180-100);
context.quadraticCurveTo(600,180-100,560,220-100);
context.bezierCurveTo(650,200-100,650,300-100,550,250-100);
context.bezierCurveTo(500,300-100,450,250-100,450,250-100);
context.quadraticCurveTo(400,240-100,410,225-100);
context.closePath();
context.fillStyle = "white";
context.fill();
context.beginPath();
context.rect(0,500,700,200);
context.fill;
context.fill();
context.stroke();
//context.beginPath();
//context.arc(50,50,100,0,2*Math.PI,true);
//context.fill;
//context.fill();
context.beginPath();
context.moveTo(0,550);
context.quadraticCurveTo(350,500,700,550);
context.lineTo(700,400);
context.quadraticCurveTo(350,350,0,400);
context.closePath();
context.fill;
context.lineWidth="1";
context.fill();
context.stroke();
var grd=context.createRadialGradient(305, 270, 5, 310, 290, 100);
grd.addColorStop(0, "white");
grd.addColorStop(.3,"#8b7e51");
grd.addColorStop(1, "#58543b");
////////////////ShieldColor
var grd5 = context.createRadialGradient(86,246,10,106,256,200);
grd5.addColorStop(0, "#2b2f1e");
grd5.addColorStop(1, "#b09d7d");
/////////////////////////////////////////////////////////////shield
context.beginPath();
context.moveTo(109,205);
context.bezierCurveTo(35,245,35,515,172,515);
context.bezierCurveTo(240,510,225,205,109,205);
context.closePath();
context.fill;
context.fill();
context.stroke();
////////////////////Cape
var grd3=context.createRadialGradient(328, 275, 10, 328, 275, 250);
grd3.addColorStop(0, "#42311f");
grd3.addColorStop(.1, "#914b41");
grd3.addColorStop(.7,"#8e2e1c");
context.beginPath();
context.moveTo(200,360);
context.bezierCurveTo(240,406,270,470,295,495);
context.quadraticCurveTo(313,474,370,430);
context.bezierCurveTo(370,441,425,441,425,425);
context.quadraticCurveTo(430,404,450,375);
context.quadraticCurveTo(470,395,504,405);
context.bezierCurveTo(575,405,575,265,570,265);
context.bezierCurveTo(525,270,500,270,500,250);
context.quadraticCurveTo(420,255,365,175)
context.closePath();
context.fill;
context.fill();
context.stroke();
////////////////////spearbackend
context.beginPath();
context.moveTo(395,77);
context.lineTo(607,98);
context.quadraticCurveTo(610,94,608,91);
context.lineTo(395,69);
context.closePath();
context.fill;
context.fill();
context.stroke();
////////////////////Body
context.beginPath();
context.moveTo(340,340);
context.bezierCurveTo(330,306,355,270,360,233);
context.bezierCurveTo(378,210,378,230,425,180);
context.quadraticCurveTo(430,170,403,91);
context.lineTo(403,64);
context.quadraticCurveTo(402,57,392,57);
context.quadraticCurveTo(392,55,387,56);
context.quadraticCurveTo(382,55,378,58);
context.quadraticCurveTo(373,56,367,66);
context.bezierCurveTo(374,71,374,100,384,100);
context.lineTo(386,164);
context.quadraticCurveTo(370,170,358,182);
context.lineTo(310,200);
context.lineTo(310,340);
context.lineTo
context.closePath();
context.fill;
context.fill();
context.stroke();
///////////////spearfront
context.beginPath();
context.moveTo(376,74);
context.lineTo(193,60);
context.quadraticCurveTo(196,56,193,50);
context.lineTo(374,66);
context.quadraticCurveTo(378,68,376,74);
context.closePath();
context.fill;
context.fill();
context.stroke();
////////////////////Spearhead
context.beginPath();
context.moveTo(122,52);
context.quadraticCurveTo(144,40,175,40);
context.lineTo(185,48);
context.lineTo(194,50);
context.quadraticCurveTo(196,55,194,60);
context.lineTo(187,60);
context.lineTo(176,67);
context.quadraticCurveTo(144,67,122,52);
context.fill;
context.fill();
context.stroke();
////////////////////Helmet
context.beginPath();
context.moveTo(253,170);
context.quadraticCurveTo(258,151,260,149);
context.lineTo(253,140);
context.quadraticCurveTo(310,150,310,190);
context.closePath();
context.fill;
context.fill()
context.closePath();
context.stroke();
////////////////////Head
context.beginPath();
context.moveTo(300,220);
context.lineTo(292,170);
context.lineTo(288,170);
context.lineTo(255,170);
context.lineTo(259,170);
context.quadraticCurveTo(255,206,265,210);
context.lineTo(265,228);
context.fill;
context.fill();
context.stroke();
///////////////////EYES
context.beginPath();
context.moveTo(255,173);
context.lineTo(259,183);
context.lineTo(289,178);
context.lineTo(289,173);
context.closePath();
context.fill;
context.lineWidth="3";
context.fill();
context.stroke()
////////////////Helmetpart2
context.beginPath();
context.moveTo(276,212);
context.lineTo(312,190);
context.bezierCurveTo(305,165,285,175,256,157);
context.quadraticCurveTo(260,166,250,167);
context.bezierCurveTo(265,200,236,201,263,215);
context.quadraticCurveTo(257,197,261,183);
context.lineTo(256,180);
context.lineTo(265,175);
context.lineTo(263,197);
context.lineTo(271,193);
context.lineTo(273,178);
context.lineTo(276,173);
context.lineTo(290,175);
context.lineTo(280,180);
context.fill;
context.fill()
context.lineWidth="1.5";
context.closePath();
context.stroke();
////////////////////LeftArmBand
context.beginPath();
context.moveTo(425,158);
context.lineTo(405,95);
context.quadraticCurveTo(395,95,377,105);
context.bezierCurveTo(384,125,383,160,383,160);
context.quadraticCurveTo(406,150,425,158);
context.fill;
context.fill();
context.closePath();
context.stroke();
////////////Rocks
var rock=context.createRadialGradient(300,580,50,350,580,100);
rock.addColorStop(0,"#b3ac99");
rock.addColorStop(1,"#656559");
context.beginPath();
context.moveTo(280,600);
context.quadraticCurveTo(375,520,450,600);
context.quadraticCurveTo(450,644,336,650);
context.quadraticCurveTo(274,655,275,623);
context.closePath();
context.fill;
context.fill();
context.stroke()
context.beginPath();
context.moveTo(414,638)
context.bezierCurveTo(414,595,500,595,505,613);
context.bezierCurveTo(524,658,413,645,414,638);
context.fill;
context.fill();
context.stroke();
////////////////////LEGS
context.beginPath();
context.moveTo(342,355);
context.quadraticCurveTo(365,385,373,417);
context.quadraticCurveTo(373,420,374,435);
context.lineTo(360,535);
context.lineTo(372,550);
context.bezierCurveTo(380,557,370,547,390,563);
context.quadraticCurveTo(387,567,383,565);
context.quadraticCurveTo(378,566,370,564);
context.quadraticCurveTo(367,566,360,565);
context.quadraticCurveTo(352,570,344,568);
context.quadraticCurveTo(334,574,327,567);
context.quadraticCurveTo(337,550,340,541);
context.quadraticCurveTo(335,535,360,535);
context.lineTo(310,426);
context.quadraticCurveTo(299,353,342,355);
context.closePath();
context.fill;
context.fill();
context.stroke();
context.beginPath();
context.moveTo(234,377);
context.quadraticCurveTo(183,467,183,485);
context.lineTo(251,557);
context.quadraticCurveTo(248,530,233,515);
context.bezierCurveTo(216,503,250,470,288,360);
context.fill;
context.fill();
context.stroke();
context.beginPath()
context.moveTo(255,610)
context.quadraticCurveTo(280,615,270,625);
context.bezierCurveTo(250,645,250,665,225,675);
context.quadraticCurveTo(223,675,219,672);
context.quadraticCurveTo(214,674,208,672);
context.quadraticCurveTo(204,673,202,671);
context.quadraticCurveTo(200,671,197,670);
context.quadraticCurveTo(196,670,194,669);
context.bezierCurveTo(194,655,233,640,232,611);
context.closePath();
context.fill;
context.fill();
context.stroke();
////////////////////ShinGuards
context.beginPath();
context.moveTo(320,405);
context.bezierCurveTo(315,353,340,353,351,409);
context.bezierCurveTo(383,445,358,504,370,540);
context.bezierCurveTo(370,540,355,532,336,540);
context.bezierCurveTo(350,512,309,450,315,420);
context.closePath();
context.fill;
context.fill();
context.stroke();
context.beginPath();
context.moveTo(233,513);
context.bezierCurveTo(200,532,205,480,160,475);
context.bezierCurveTo(173,535,230,560,230,620);
context.quadraticCurveTo(242,610,248,614);
context.quadraticCurveTo(270,607,260,595);
context.bezierCurveTo(250,556,255,540,233,513);
context.fill;
context.fill();
context.stroke();
////////////////////kiltthingy
var kilt=context.createRadialGradient(244,358,30,244,358,100);
kilt.addColorStop(0,"#9d9885");
kilt.addColorStop(1,"#575546");
context.beginPath();
context.moveTo(265,350);
context.quadraticCurveTo(234,360,222,381);
context.bezierCurveTo(240,380,288,440,310,423);
context.quadraticCurveTo(298,372,357,352);
context.lineTo(324,330);
context.closePath();
context.fill;
context.fill();
context.lineWidth="2";
context.stroke();
////////////////////ShieldStrap1
context.beginPath();
context.moveTo(140-40,320+10);
context.lineTo(150-40,315+10);
context.lineTo(155-40,320+10);
context.quadraticCurveTo(180-40,360+10,175-40,396+10)
context.lineTo(175-40,405+10);
context.lineTo(165-40,410+10);
context.lineTo(165-40,400+10);
context.quadraticCurveTo(170-40,360+10,145-40,325+10);
context.fill;
context.fill();
context.closePath();
context.lineWidth="1";
context.stroke()
////////////////////handpart1
context.beginPath();
context.moveTo(117,356);
context.bezierCurveTo(112,356,117,370,125,364);
context.quadraticCurveTo(120,365,124,375);
context.quadraticCurveTo(120,380,132,383);
context.quadraticCurveTo(130,385,144,376);
context.quadraticCurveTo(149,380,152,358);
context.fill;
context.fill();
context.closePath();
context.stroke();
////////////////////handpart2
context.beginPath();
context.moveTo(150,360);
context.bezierCurveTo(145,352,140,345,130,348);
context.lineTo(124,358);
context.bezierCurveTo(125,366,125,366,134,358);
context.bezierCurveTo(135,345,124,375,154,370);
context.lineTo(160,360);
context.closePath();
context.fill;
context.fill();
context.stroke();
/////////////////////RightArm
context.beginPath();
context.moveTo(220,355);
context.lineTo(155,370);
context.quadraticCurveTo(155,360,145,355);
context.lineTo(185,335);
context.fill;
context.fill();
context.stroke();
////////////////////ShieldStrap2
context.beginPath();
context.moveTo(140,320);
context.lineTo(150,315);
context.lineTo(155,320);
context.quadraticCurveTo(180,360,175,396)
context.lineTo(175,405);
context.lineTo(165,410);
context.lineTo(165,400);
context.quadraticCurveTo(170,360,145,325);
context
context.closePath();
context.fill;
context.fill();
context.stroke();
////////////////////breastplate
context.beginPath();
context.moveTo(310,317);
context.lineTo(340,317);
context.lineTo(340,312);
context.lineTo(310,312);
context.closePath();
context.fill;
context.fill();
context.stroke();
context.beginPath();
context.moveTo(320,255);
context.lineTo(353,269);
context.lineTo(357,257);
context.lineTo(320,246);
context.closePath();
context.fill;
context.fill();
context.stroke();
context.beginPath();
context.moveTo(250,340);
context.lineTo(280,370);
context.lineTo(325,340);
context.quadraticCurveTo(320,318,330,260);
context.quadraticCurveTo(320,225,315,225);
context.lineTo(250,235);
context.fill;
context.fill();
context.closePath();
context.stroke();
context.beginPath();
context.moveTo(255,340);
context.lineTo(280,365);
context.lineTo(320,340);
context.quadraticCurveTo(315,318,325,260);
context.quadraticCurveTo(315,230,315,235);
context.lineTo(255,240);
context.fill;
context.fill();
context.closePath();
context.stroke();
////////////////////cloackpiecetop
var grd2=context.createRadialGradient(296,226,30,296,226,100);
grd2.addColorStop(0, "#533c2c");
grd2.addColorStop(1, "#8e2e1c");
context.beginPath();
context.moveTo(220,360);
context.quadraticCurveTo(200,340,170,330);
context.quadraticCurveTo(175,320,185,320);
context.quadraticCurveTo(185,315,200,315);
context.quadraticCurveTo(198,300,215,290);
context.quadraticCurveTo(213,280,215,270);
context.lineTo(222,268);
context.lineTo(222,252);
context.quadraticCurveTo(252,220,300,212);
context.quadraticCurveTo(310,185,312,185);
context.lineTo(327,185);
context.bezierCurveTo(327,172,365,172,365,177);
context.lineTo(359,181);
context.bezierCurveTo(340,190,340,210,315,220);
context.lineTo(300,233);
context.quadraticCurveTo(270,306,220,360);
context.lineWidth="2";
context.fill;
context.fill();
context.stroke();
var grd1=context.createRadialGradient(303, 225, 11, 309, 219, 3);
grd1.addColorStop(0, "#c18934");
grd1.addColorStop(1, "#faf5fb");
context.beginPath();
context.moveTo(300,215);
context.bezierCurveTo(310,212,315,215,315,225);
context.quadraticCurveTo(315,230,300,240);
context.bezierCurveTo(280,250,280,225,300,215);
context.lineWidth="2";
context.fill;
context.fill();
context.stroke();
};
</script>
</head>
<body>
<canvas id="myCanvas" width="700" height="700"></canvas>
</body>
</html>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
////////////////////Background
var grd6=context.createRadialGradient(50,50,60,80,80,600);
grd6.addColorStop(0, "yellow");
grd6.addColorStop(.1,"lightCyan");
grd6.addColorStop(.6, "skyblue");
context.beginPath();
context.rect(0,0,canvas.width,canvas.height);
context.fill;
context.fill();
context.stroke;
context.stroke();
context.beginPath();
context.arc(400,200-100,25,.4*Math.PI,1.6*Math.PI);
context.quadraticCurveTo(440,140-100,475,175-100);
context.bezierCurveTo(500,100-100,575,150-100,550,180-100);
context.quadraticCurveTo(600,180-100,560,220-100);
context.bezierCurveTo(650,200-100,650,300-100,550,250-100);
context.bezierCurveTo(500,300-100,450,250-100,450,250-100);
context.quadraticCurveTo(400,240-100,410,225-100);
context.closePath();
context.fillStyle = "white";
context.fill();
context.beginPath();
context.rect(0,500,700,200);
context.fill;
context.fill();
context.stroke();
//context.beginPath();
//context.arc(50,50,100,0,2*Math.PI,true);
//context.fill;
//context.fill();
context.beginPath();
context.moveTo(0,550);
context.quadraticCurveTo(350,500,700,550);
context.lineTo(700,400);
context.quadraticCurveTo(350,350,0,400);
context.closePath();
context.fill;
context.lineWidth="1";
context.fill();
context.stroke();
var grd=context.createRadialGradient(305, 270, 5, 310, 290, 100);
grd.addColorStop(0, "white");
grd.addColorStop(.3,"#8b7e51");
grd.addColorStop(1, "#58543b");
////////////////ShieldColor
var grd5 = context.createRadialGradient(86,246,10,106,256,200);
grd5.addColorStop(0, "#2b2f1e");
grd5.addColorStop(1, "#b09d7d");
/////////////////////////////////////////////////////////////shield
context.beginPath();
context.moveTo(109,205);
context.bezierCurveTo(35,245,35,515,172,515);
context.bezierCurveTo(240,510,225,205,109,205);
context.closePath();
context.fill;
context.fill();
context.stroke();
////////////////////Cape
var grd3=context.createRadialGradient(328, 275, 10, 328, 275, 250);
grd3.addColorStop(0, "#42311f");
grd3.addColorStop(.1, "#914b41");
grd3.addColorStop(.7,"#8e2e1c");
context.beginPath();
context.moveTo(200,360);
context.bezierCurveTo(240,406,270,470,295,495);
context.quadraticCurveTo(313,474,370,430);
context.bezierCurveTo(370,441,425,441,425,425);
context.quadraticCurveTo(430,404,450,375);
context.quadraticCurveTo(470,395,504,405);
context.bezierCurveTo(575,405,575,265,570,265);
context.bezierCurveTo(525,270,500,270,500,250);
context.quadraticCurveTo(420,255,365,175)
context.closePath();
context.fill;
context.fill();
context.stroke();
////////////////////spearbackend
context.beginPath();
context.moveTo(395,77);
context.lineTo(607,98);
context.quadraticCurveTo(610,94,608,91);
context.lineTo(395,69);
context.closePath();
context.fill;
context.fill();
context.stroke();
////////////////////Body
context.beginPath();
context.moveTo(340,340);
context.bezierCurveTo(330,306,355,270,360,233);
context.bezierCurveTo(378,210,378,230,425,180);
context.quadraticCurveTo(430,170,403,91);
context.lineTo(403,64);
context.quadraticCurveTo(402,57,392,57);
context.quadraticCurveTo(392,55,387,56);
context.quadraticCurveTo(382,55,378,58);
context.quadraticCurveTo(373,56,367,66);
context.bezierCurveTo(374,71,374,100,384,100);
context.lineTo(386,164);
context.quadraticCurveTo(370,170,358,182);
context.lineTo(310,200);
context.lineTo(310,340);
context.lineTo
context.closePath();
context.fill;
context.fill();
context.stroke();
///////////////spearfront
context.beginPath();
context.moveTo(376,74);
context.lineTo(193,60);
context.quadraticCurveTo(196,56,193,50);
context.lineTo(374,66);
context.quadraticCurveTo(378,68,376,74);
context.closePath();
context.fill;
context.fill();
context.stroke();
////////////////////Spearhead
context.beginPath();
context.moveTo(122,52);
context.quadraticCurveTo(144,40,175,40);
context.lineTo(185,48);
context.lineTo(194,50);
context.quadraticCurveTo(196,55,194,60);
context.lineTo(187,60);
context.lineTo(176,67);
context.quadraticCurveTo(144,67,122,52);
context.fill;
context.fill();
context.stroke();
////////////////////Helmet
context.beginPath();
context.moveTo(253,170);
context.quadraticCurveTo(258,151,260,149);
context.lineTo(253,140);
context.quadraticCurveTo(310,150,310,190);
context.closePath();
context.fill;
context.fill()
context.closePath();
context.stroke();
////////////////////Head
context.beginPath();
context.moveTo(300,220);
context.lineTo(292,170);
context.lineTo(288,170);
context.lineTo(255,170);
context.lineTo(259,170);
context.quadraticCurveTo(255,206,265,210);
context.lineTo(265,228);
context.fill;
context.fill();
context.stroke();
///////////////////EYES
context.beginPath();
context.moveTo(255,173);
context.lineTo(259,183);
context.lineTo(289,178);
context.lineTo(289,173);
context.closePath();
context.fill;
context.lineWidth="3";
context.fill();
context.stroke()
////////////////Helmetpart2
context.beginPath();
context.moveTo(276,212);
context.lineTo(312,190);
context.bezierCurveTo(305,165,285,175,256,157);
context.quadraticCurveTo(260,166,250,167);
context.bezierCurveTo(265,200,236,201,263,215);
context.quadraticCurveTo(257,197,261,183);
context.lineTo(256,180);
context.lineTo(265,175);
context.lineTo(263,197);
context.lineTo(271,193);
context.lineTo(273,178);
context.lineTo(276,173);
context.lineTo(290,175);
context.lineTo(280,180);
context.fill;
context.fill()
context.lineWidth="1.5";
context.closePath();
context.stroke();
////////////////////LeftArmBand
context.beginPath();
context.moveTo(425,158);
context.lineTo(405,95);
context.quadraticCurveTo(395,95,377,105);
context.bezierCurveTo(384,125,383,160,383,160);
context.quadraticCurveTo(406,150,425,158);
context.fill;
context.fill();
context.closePath();
context.stroke();
////////////Rocks
var rock=context.createRadialGradient(300,580,50,350,580,100);
rock.addColorStop(0,"#b3ac99");
rock.addColorStop(1,"#656559");
context.beginPath();
context.moveTo(280,600);
context.quadraticCurveTo(375,520,450,600);
context.quadraticCurveTo(450,644,336,650);
context.quadraticCurveTo(274,655,275,623);
context.closePath();
context.fill;
context.fill();
context.stroke()
context.beginPath();
context.moveTo(414,638)
context.bezierCurveTo(414,595,500,595,505,613);
context.bezierCurveTo(524,658,413,645,414,638);
context.fill;
context.fill();
context.stroke();
////////////////////LEGS
context.beginPath();
context.moveTo(342,355);
context.quadraticCurveTo(365,385,373,417);
context.quadraticCurveTo(373,420,374,435);
context.lineTo(360,535);
context.lineTo(372,550);
context.bezierCurveTo(380,557,370,547,390,563);
context.quadraticCurveTo(387,567,383,565);
context.quadraticCurveTo(378,566,370,564);
context.quadraticCurveTo(367,566,360,565);
context.quadraticCurveTo(352,570,344,568);
context.quadraticCurveTo(334,574,327,567);
context.quadraticCurveTo(337,550,340,541);
context.quadraticCurveTo(335,535,360,535);
context.lineTo(310,426);
context.quadraticCurveTo(299,353,342,355);
context.closePath();
context.fill;
context.fill();
context.stroke();
context.beginPath();
context.moveTo(234,377);
context.quadraticCurveTo(183,467,183,485);
context.lineTo(251,557);
context.quadraticCurveTo(248,530,233,515);
context.bezierCurveTo(216,503,250,470,288,360);
context.fill;
context.fill();
context.stroke();
context.beginPath()
context.moveTo(255,610)
context.quadraticCurveTo(280,615,270,625);
context.bezierCurveTo(250,645,250,665,225,675);
context.quadraticCurveTo(223,675,219,672);
context.quadraticCurveTo(214,674,208,672);
context.quadraticCurveTo(204,673,202,671);
context.quadraticCurveTo(200,671,197,670);
context.quadraticCurveTo(196,670,194,669);
context.bezierCurveTo(194,655,233,640,232,611);
context.closePath();
context.fill;
context.fill();
context.stroke();
////////////////////ShinGuards
context.beginPath();
context.moveTo(320,405);
context.bezierCurveTo(315,353,340,353,351,409);
context.bezierCurveTo(383,445,358,504,370,540);
context.bezierCurveTo(370,540,355,532,336,540);
context.bezierCurveTo(350,512,309,450,315,420);
context.closePath();
context.fill;
context.fill();
context.stroke();
context.beginPath();
context.moveTo(233,513);
context.bezierCurveTo(200,532,205,480,160,475);
context.bezierCurveTo(173,535,230,560,230,620);
context.quadraticCurveTo(242,610,248,614);
context.quadraticCurveTo(270,607,260,595);
context.bezierCurveTo(250,556,255,540,233,513);
context.fill;
context.fill();
context.stroke();
////////////////////kiltthingy
var kilt=context.createRadialGradient(244,358,30,244,358,100);
kilt.addColorStop(0,"#9d9885");
kilt.addColorStop(1,"#575546");
context.beginPath();
context.moveTo(265,350);
context.quadraticCurveTo(234,360,222,381);
context.bezierCurveTo(240,380,288,440,310,423);
context.quadraticCurveTo(298,372,357,352);
context.lineTo(324,330);
context.closePath();
context.fill;
context.fill();
context.lineWidth="2";
context.stroke();
////////////////////ShieldStrap1
context.beginPath();
context.moveTo(140-40,320+10);
context.lineTo(150-40,315+10);
context.lineTo(155-40,320+10);
context.quadraticCurveTo(180-40,360+10,175-40,396+10)
context.lineTo(175-40,405+10);
context.lineTo(165-40,410+10);
context.lineTo(165-40,400+10);
context.quadraticCurveTo(170-40,360+10,145-40,325+10);
context.fill;
context.fill();
context.closePath();
context.lineWidth="1";
context.stroke()
////////////////////handpart1
context.beginPath();
context.moveTo(117,356);
context.bezierCurveTo(112,356,117,370,125,364);
context.quadraticCurveTo(120,365,124,375);
context.quadraticCurveTo(120,380,132,383);
context.quadraticCurveTo(130,385,144,376);
context.quadraticCurveTo(149,380,152,358);
context.fill;
context.fill();
context.closePath();
context.stroke();
////////////////////handpart2
context.beginPath();
context.moveTo(150,360);
context.bezierCurveTo(145,352,140,345,130,348);
context.lineTo(124,358);
context.bezierCurveTo(125,366,125,366,134,358);
context.bezierCurveTo(135,345,124,375,154,370);
context.lineTo(160,360);
context.closePath();
context.fill;
context.fill();
context.stroke();
/////////////////////RightArm
context.beginPath();
context.moveTo(220,355);
context.lineTo(155,370);
context.quadraticCurveTo(155,360,145,355);
context.lineTo(185,335);
context.fill;
context.fill();
context.stroke();
////////////////////ShieldStrap2
context.beginPath();
context.moveTo(140,320);
context.lineTo(150,315);
context.lineTo(155,320);
context.quadraticCurveTo(180,360,175,396)
context.lineTo(175,405);
context.lineTo(165,410);
context.lineTo(165,400);
context.quadraticCurveTo(170,360,145,325);
context
context.closePath();
context.fill;
context.fill();
context.stroke();
////////////////////breastplate
context.beginPath();
context.moveTo(310,317);
context.lineTo(340,317);
context.lineTo(340,312);
context.lineTo(310,312);
context.closePath();
context.fill;
context.fill();
context.stroke();
context.beginPath();
context.moveTo(320,255);
context.lineTo(353,269);
context.lineTo(357,257);
context.lineTo(320,246);
context.closePath();
context.fill;
context.fill();
context.stroke();
context.beginPath();
context.moveTo(250,340);
context.lineTo(280,370);
context.lineTo(325,340);
context.quadraticCurveTo(320,318,330,260);
context.quadraticCurveTo(320,225,315,225);
context.lineTo(250,235);
context.fill;
context.fill();
context.closePath();
context.stroke();
context.beginPath();
context.moveTo(255,340);
context.lineTo(280,365);
context.lineTo(320,340);
context.quadraticCurveTo(315,318,325,260);
context.quadraticCurveTo(315,230,315,235);
context.lineTo(255,240);
context.fill;
context.fill();
context.closePath();
context.stroke();
////////////////////cloackpiecetop
var grd2=context.createRadialGradient(296,226,30,296,226,100);
grd2.addColorStop(0, "#533c2c");
grd2.addColorStop(1, "#8e2e1c");
context.beginPath();
context.moveTo(220,360);
context.quadraticCurveTo(200,340,170,330);
context.quadraticCurveTo(175,320,185,320);
context.quadraticCurveTo(185,315,200,315);
context.quadraticCurveTo(198,300,215,290);
context.quadraticCurveTo(213,280,215,270);
context.lineTo(222,268);
context.lineTo(222,252);
context.quadraticCurveTo(252,220,300,212);
context.quadraticCurveTo(310,185,312,185);
context.lineTo(327,185);
context.bezierCurveTo(327,172,365,172,365,177);
context.lineTo(359,181);
context.bezierCurveTo(340,190,340,210,315,220);
context.lineTo(300,233);
context.quadraticCurveTo(270,306,220,360);
context.lineWidth="2";
context.fill;
context.fill();
context.stroke();
var grd1=context.createRadialGradient(303, 225, 11, 309, 219, 3);
grd1.addColorStop(0, "#c18934");
grd1.addColorStop(1, "#faf5fb");
context.beginPath();
context.moveTo(300,215);
context.bezierCurveTo(310,212,315,215,315,225);
context.quadraticCurveTo(315,230,300,240);
context.bezierCurveTo(280,250,280,225,300,215);
context.lineWidth="2";
context.fill;
context.fill();
context.stroke();
};
</script>
</head>
<body>
<canvas id="myCanvas" width="700" height="700"></canvas>
</body>
</html>
Part3
FirstProjectPart2
FirstProjectPart1
FirstProjectOriginalImage
gonna try and code this
pokeball
First time using arcs to help create a pokeball
First time coding with colors
read the title?