<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var firegrd = ctx.createRadialGradient(455,352,100,455,352,600);
firegrd.addColorStop(0, "rgba(255,255,255,1)");
firegrd.addColorStop(0.25, "rgba(255,255,0,1)");
firegrd.addColorStop(0.35, "rgba(255,185,0,1)");
firegrd.addColorStop(0.45, "rgba(255,125,0,1)");
firegrd.addColorStop(0.55, "rgba(255,85,0,1)");
firegrd.addColorStop(0.75, "rgba(255,0,0,1)");
firegrd.addColorStop(0.95, "rgba(255,0,0,1)");
firegrd.addColorStop(1, "rgba(0,0,0,1)");
var glassgrd = ctx.createLinearGradient(280,508,430,590);
glassgrd.addColorStop(0, "black");
glassgrd.addColorStop(0.65, "rgba(125,125,125,0)");
glassgrd.addColorStop(0.75, "transparent");
glassgrd.addColorStop(0.85, "rgba(125,125,125,0)");
glassgrd.addColorStop(1, "black");
var eyegrd = ctx.createRadialGradient(309,57,0,309,57,13);
eyegrd.addColorStop(0, "white");
eyegrd.addColorStop(0.1, "white");
eyegrd.addColorStop(0.2, "black");
eyegrd.addColorStop(0.4,"black");
eyegrd.addColorStop(0.5, "white");
eyegrd.addColorStop(1, "white");
var tcanvas = document.createElement('canvas');
var tctx = tcanvas.getContext('2d');
tcanvas.width = canvas.width;
tcanvas.height = canvas.height;
var p1canvas = document.createElement('canvas');
var p1ctx = p1canvas.getContext('2d');
p1canvas.width = canvas.width;
p1canvas.height = canvas.height;
var cw = canvas.width;
var ch = canvas.height;
var hcw = canvas.widt/2;
var hch = canvas.height/2;
var msid = 5.77
var msid2 = 12.3125
ctx.fillStyle = firegrd;
ctx.fillRect(0,0,cw,ch);
// p1ctx.fillStyle = "red";
// p1ctx.fillRect(0,0,400,300);
// ctx.drawImage(p1canvas,0,0);
//Dai Gurren Dan Logo, Left+Right Flame (Drawn on tcanvas)\\
tctx.beginPath();
tctx.moveTo(325,702);
tctx.bezierCurveTo(300,670,263,647,250,643);
tctx.bezierCurveTo(204,630,160,635,114,615);
tctx.bezierCurveTo(80.66,595,40,570,25,530);
tctx.bezierCurveTo(0,480,10,410,25,370);
tctx.bezierCurveTo(45,313,60,255,60,228);
tctx.bezierCurveTo(90,318,58,388,68,438);
tctx.bezierCurveTo(80,520,90,540,130,570);
tctx.bezierCurveTo(118,530,140,480,132,448);
tctx.bezierCurveTo(131,442,131,432,130,428);
tctx.bezierCurveTo(132,448,158,468,155,528);
tctx.bezierCurveTo(155,568,190,588,200,580);
tctx.bezierCurveTo(230,565,212,550,195,515);
tctx.bezierCurveTo(255,565,250,557,230,590);
tctx.bezierCurveTo(230,630,320,655,270,580);
tctx.bezierCurveTo(300,615,315,635,325,702)
tctx.closePath();
tctx.stroke();
//#############################################################
//Folowing: Base Red Fill
//Plan: Red-Orangefill, out-in, attempt multiradial
tctx.lineWidth = 8;
tctx.fillStyle = "rgba(218,38,37,1)";
tctx.fill();
tctx.stroke();
//Base Stroke, Fill, etc: Previous
//Following: Right Flame
//#############################################################
//#############################################################
//Skull
//#############################################################
var skullx = 455
var skully = 690
ctx.save();
ctx.beginPath();
ctx.moveTo(455,690);
ctx.bezierCurveTo(434,680,420,678,415,675);
ctx.bezierCurveTo(430,630,385,630,385,665);
ctx.bezierCurveTo(375,665,350,650,336,628);
ctx.bezierCurveTo(395,600,340,530,300,585);
ctx.bezierCurveTo(280,570,260,535,245,505);
ctx.bezierCurveTo(250,490,268,505,280,470);
ctx.bezierCurveTo(290,410,235,350,230,320);
ctx.bezierCurveTo(205,260,290,240,330,175);
ctx.bezierCurveTo(340,160,348,155,350,130);
ctx.bezierCurveTo(337,200,340,225,320,270);
ctx.bezierCurveTo(310,295,310,360,370,370);
ctx.save();
//ctx.translate(-20,0);
ctx.bezierCurveTo(450,370,415,290,390,225);
ctx.bezierCurveTo(385,170,430,160,420,100);
ctx.bezierCurveTo(453,153,427,166,430,200);
ctx.bezierCurveTo(440,250,490,250,490,200);
ctx.bezierCurveTo(490,130,433,120,455,40);
ctx.bezierCurveTo(460,75,489,100,509,125);
ctx.bezierCurveTo(570,220,510,210,525,300);
ctx.bezierCurveTo(530,320,545,330,550,330);
ctx.bezierCurveTo(590,350,620,290,565,200);
ctx.bezierCurveTo(553,180,560,140,575,120);
ctx.bezierCurveTo(610,270,685,290,685,330);
ctx.bezierCurveTo(685,380,610,440,625,470);
ctx.restore();
ctx.moveTo(455,690);
ctx.bezierCurveTo(471,680,490,678,495,675);
ctx.bezierCurveTo((skullx-430)+skullx,630,(skullx-385)+skullx,630,(skullx-385)+skullx,665);
ctx.bezierCurveTo((skullx-375)+skullx,665,(skullx-350)+skullx,650,(skullx-336)+skullx,628);
ctx.bezierCurveTo((skullx-395)+skullx,600,(skullx-340)+skullx,530,(skullx-300)+skullx,585);
ctx.bezierCurveTo((skullx-280)+skullx,570,(skullx-260)+skullx,535,(skullx-245)+skullx,505);
ctx.bezierCurveTo((skullx-250)+skullx,490,(skullx-268)+skullx,505,(skullx-280)+skullx-5,470);
ctx.lineWidth = 8;
ctx.fillStyle = "rgba(218,38,37,1)";
ctx.fill();
ctx.lineCap = 'round';
ctx.stroke();
ctx.closePath();
//#############################################################
//Glasses
//#############################################################
ctx.beginPath();
ctx.moveTo(720,348);
ctx.lineTo(455,500);
ctx.lineTo(200,348); //200,348,400,562
ctx.lineTo(400,562);
ctx.lineTo(448,520);
ctx.quadraticCurveTo(455,510,462,520);
ctx.lineTo((455-400)+455,562);
ctx.lineTo(720,348);
ctx.fillStyle = "black";
//ctx.fillStyle = glassgrd;
ctx.fill();
ctx.stroke();
//#############################################################
//Nose
//#############################################################
ctx.beginPath();
ctx.moveTo(425,582);
//ctx.arc(455,582,25,1*Math.PI,2*Math.PI,false);
//ctx.quadraticCurveTo(455,520,490,582)
//ctx.quadraticCurveTo(467.5,607,455,582);
ctx.bezierCurveTo(430,540,480,540,485,582);
ctx.bezierCurveTo(475,600,465,600,455,582);
ctx.bezierCurveTo(445,600,430,600,425,582);
//ctx.bezierCurveTo(
ctx.lineCap = 'round';
ctx.stroke();
ctx.fillStyle = firegrd
;
ctx.fill();
ctx.closePath();
//#############################################################
//Arcanine (Base - Outline)
//#############################################################
//p1ctx.save();
//p1ctx.translate(0,100);
//p1ctx.scale(.75,.75);
p1ctx.beginPath()
p1ctx.moveTo(36.63,327.81)
p1ctx.bezierCurveTo(30,338,36,350,48.22,350.96);
p1ctx.bezierCurveTo(49.25,351.25,50.5,350.85,51.14,351.35);
p1ctx.bezierCurveTo(58.10,354.85,65.78,352.75,72.57,352.54);
p1ctx.bezierCurveTo(77.5,352.6,81,348.7,82.77,344.03);
p1ctx.bezierCurveTo(85.15,337.9,87.2,331.6,89.71,325.058);
p1ctx.bezierCurveTo(99.5,326.8,100.2,334.5,101.05,341.81);
p1ctx.lineTo(103.12,361.14);
p1ctx.bezierCurveTo(102.5,362,103,364.5,104.19,365,56);
p1ctx.lineTo(125,385);
p1ctx.lineTo(136,385);
p1ctx.lineTo(152.33,381.84);
p1ctx.bezierCurveTo(158,380,164,379,169.33,377.1)
p1ctx.bezierCurveTo(171,376,172,373,172.96,371.18);
p1ctx.bezierCurveTo(174,359,166,349,154.36,348.12);
p1ctx.bezierCurveTo(146,345,144.14,339.91);
p1ctx.bezierCurveTo(151,338,156.6,337,162.44,334.9);
p1ctx.bezierCurveTo(174,330,180,322,180,308);
p1ctx.lineTo(180,302.69);
p1ctx.lineTo(182,296.2,185,291.7,191,289);
p1ctx.lineTo(212.04,284.7);
p1ctx.bezierCurveTo(224,283,219.5,291,227.31,294.86);
p1ctx.lineTo(217.03,293.31);
p1ctx.bezierCurveTo(217,298,220,301,223.83,304.22);
p1ctx.bezierCurveTo(233,311,243,315,254.64,315.95);
p1ctx.bezierCurveTo(257.8,316.2,261,317.8,263.86,317.77);
p1ctx.bezierCurveTo(268,319.4,271.8,321.5,270.33,327.47);
p1ctx.bezierCurveTo(269,334.8,269.9,341.9,269.11,348.72);
p1ctx.bezierCurveTo(269,354,271,357.5,274.91,360.07);
p1ctx.bezierCurveTo(278,362,281,363.5,284,365.5);
p1ctx.bezierCurveTo(286,367.4,287.5,367.85,289.29,371.58);
p1ctx.bezierCurveTo(291.1,373.3,293,375.45,295.66,376.62);
p1ctx.bezierCurveTo(299,378,302,378,305.49,377.63);
p1ctx.lineTo(330.37,375.27);
p1ctx.bezierCurveTo(345.4,376.8,348.2,374.2,347.41,363.74);
p1ctx.bezierCurveTo(347,360.2,345.1,354.8,343.65,351.95);
p1ctx.bezierCurveTo(342,347.5,338,345,333.48,344.09);
p1ctx.bezierCurveTo(320,341.5,314,334,312.86,320.43);
p1ctx.bezierCurveTo(312.86,320.430);
p1ctx.bezierCurveTo(320,341.4,314,334,312.86,320.43);
p1ctx.bezierCurveTo(311.8,316,310.2,311,312.56,307.83);
p1ctx.bezierCurveTo(314.1,305,320,305.7,324.12,303.7);
p1ctx.bezierCurveTo(331,300.7,338.45,298.17,344.58,293.68);
p1ctx.bezierCurveTo(358.8,284,361,269.4,353.54,254.054);
p1ctx.bezierCurveTo(351.85,250.8,349.8,248,347.96,244.79);
p1ctx.lineTo(349.08,244.08);
p1ctx.lineTo(357.21,257.24);
p1ctx.bezierCurveTo(362,250,360,242.5,358.24,235.47);
p1ctx.lineTo(359.61,234.22);
p1ctx.lineTo(364.03,241.2);
p1ctx.bezierCurveTo(368.1,233.8,367.8,228.15,362.16,223.62);
p1ctx.lineTo(348.51,211.17);
p1ctx.bezierCurveTo(347,209,346,207,345.52,205.93);
p1ctx.lineTo(358.97,208.04);
p1ctx.lineTo(358.13,200.58);
p1ctx.lineTo(373.76,205.08);
p1ctx.lineTo(364.44,188.55);
p1ctx.lineTo(371.3,184.81);
p1ctx.lineTo(363.29,182.12);
p1ctx.bezierCurveTo(373,177.4,370,170.5,369.06,163.63);
p1ctx.lineTo(353.46,169.63);
p1ctx.lineTo(352.91,168.29);
p1ctx.lineTo(360.67,164.03);
p1ctx.bezierCurveTo(364.1,162.5,366.8,160,367.7,155.8);
p1ctx.bezierCurveTo(367,155,368.7,154.5,369.86,152.81);
p1ctx.lineTo(379.27,147.02);
p1ctx.bezierCurveTo(374,142.5,374,141,379,138);
p1ctx.lineTo(386.96,134.54);
p1ctx.lineTo(378.13,130.96);
p1ctx.lineTo(388.29,127.32);
p1ctx.lineTo(373.91,118.79);
p1ctx.bezierCurveTo(370.8,116.85,369,114.5,370.92,110.88);
p1ctx.bezierCurveTo(370.92+msid,110.88-msid2,379.92+(msid*2),79.63+msid,393,60);
//p1ctx.lineTo(393,60); #########Beta Line########
p1ctx.bezierCurveTo(390.9,51.45,386,45.37,383.77,44.51);
p1ctx.bezierCurveTo(381.25,40.6,375,40,368,39.5);
p1ctx.bezierCurveTo(362,40.09,355,41.05,349.78,41.98);
p1ctx.lineTo(342.43,17.22);
p1ctx.lineTo(340.68,17.44);
p1ctx.lineTo(338.55,21.8);
p1ctx.lineTo(331.1,15.66);
p1ctx.lineTo(331.1,26.54);
p1ctx.lineTo(329.23,25.71);
p1ctx.bezierCurveTo(326.1,14.05,319.5,5.5,308,0);
p1ctx.lineTo(309.24,6.01);
p1ctx.lineTo(303.27,6.38);
p1ctx.lineTo(308.3,18.85);
p1ctx.bezierCurveTo(309,20.6,308,23.8,307.83,24.79);
p1ctx.bezierCurveTo(306,24,304.8,23.8,302.1,22.83);
p1ctx.bezierCurveTo(298.15,19.95,293.8,17,291.97,14.02);
p1ctx.lineTo(285.79,11.33);
p1ctx.lineTo(289.05,18.35);
p1ctx.lineTo(288.48,19.72);
p1ctx.bezierCurveTo(280.1,15.3,272.17,7.85,262.11,11.98);
p1ctx.lineTo(272.66,25.78);
p1ctx.lineTo(264.91,26.76);
p1ctx.lineTo(269.06,40.48);
p1ctx.lineTo(261.59,40.48);
p1ctx.lineTo(263.77,45.72);
p1ctx.lineTo(242.88,44.42);
p1ctx.bezierCurveTo(243.5,52.65,247,59.8,251.49,67.68);
p1ctx.bezierCurveTo(240,66.65,229.65,65.4,219.43,70.54);
p1ctx.lineTo(222.71,72.28);
p1ctx.lineTo(209.6,85.84);
p1ctx.lineTo(210.79,87.48);
p1ctx.lineTo(218.59,88);
p1ctx.lineTo(191.24,110.51);
p1ctx.lineTo(200,112.8);
p1ctx.lineTo(189.85,116.05);
p1ctx.lineTo(182.43,101.88);
p1ctx.lineTo(180.88,102.16);
p1ctx.bezierCurveTo(180.85,103.9,180.6,105,179.92,106.54);
p1ctx.lineTo(176.86,110.17);
p1ctx.lineTo(176.62,107.19);
p1ctx.bezierCurveTo(168,96,160.3,87.6,149,82.05);
p1ctx.lineTo(149,86.13);
p1ctx.lineTo(143.44,85.49);
p1ctx.bezierCurveTo(144.15,88,146,90.65,145.96,93.34);
p1ctx.bezierCurveTo(146,95.2,145.3,97.4,144,98.35);
p1ctx.bezierCurveTo(143,99.15,140,98.75,138.66,97.69);
p1ctx.bezierCurveTo(137.95,95.25,133.78,92,130.76,89.42);
p1ctx.bezierCurveTo(127,84.98,122,80.6,115.35,81.13);
p1ctx.lineTo(117.91,87.69);
p1ctx.lineTo(99.14,88.91);
p1ctx.lineTo(104.93,96.01);
p1ctx.lineTo(94.44,94.84);
p1ctx.lineTo(101.33,102.83);
p1ctx.bezierCurveTo(104,104.9,102.3,106.8,100.74,107.64);
p1ctx.bezierCurveTo(98.85,107.7,96.5,108.5,94.46,109.17);
p1ctx.bezierCurveTo(81,112.2,70.8,124.6,71.2,136.35);
p1ctx.lineTo(81.71,141.73);
p1ctx.bezierCurveTo(77.23,148,78,156.5,77.77,162.66);
p1ctx.lineTo(77.73,169.66);
p1ctx.bezierCurveTo(77.1,178.5,71.8,181.5,63.7,177.79);
p1ctx.lineTo(59.36,175.65);
p1ctx.bezierCurveTo(60.15,177.85,61.1,179.2,61.42,180.41);
p1ctx.bezierCurveTo(61.7,182,62.2,184.2,61.56,184.71);
p1ctx.bezierCurveTo(61.3,185.8,57.8,186.1,56.57,185.4);
p1ctx.bezierCurveTo(53.6,184,50.9,181.4,47.5,178.86);
p1ctx.bezierCurveTo(45.25,193.88,55,200.9,65.64,208.6);
p1ctx.lineTo(59.82,207.98);
p1ctx.lineTo(59.18,211.03);
p1ctx.bezierCurveTo(55.9,209.5,52.7,207.15,49.21,206.19);
p1ctx.bezierCurveTo(46,205.2,41.7,206.2,39.35,206.02);
p1ctx.lineTo(39.22,207.32);
p1ctx.lineTo(43.52,210.75);
p1ctx.bezierCurveTo(37.3,212,30.3,209,24.68,214.15);
p1ctx.bezierCurveTo(34,216.6,37.8,223.85,41.63,230.26);
p1ctx.lineTo(18.61,243.32);
p1ctx.lineTo(19.24,244.67);
p1ctx.lineTo(28.64,246.53);
p1ctx.lineTo(28.74,247.56);
p1ctx.lineTo(22.95,249.12);
p1ctx.lineTo(23.63,250.16);
p1ctx.bezierCurveTo(17.2,249.19,10,262.8,0,265);
p1ctx.lineTo(18.9,272.33);
p1ctx.lineTo(18.36,273.83);
p1ctx.lineTo(34.1,277.3);
p1ctx.lineTo(33.95,278.38);
p1ctx.lineTo(24.88,282.02);
p1ctx.lineTo(53.37,299.43);
p1ctx.bezierCurveTo(52.2,306.5,47,312.3,43.9,317.54);
p1ctx.bezierCurveTo(41,320.6,37.95,323.2,35.63,326.81);
p1ctx.bezierCurveTo(29.1,336.8,35.3,348.99,47.22,349.96);
p1ctx.bezierCurveTo(48,350,49.1,349.92,50.14,350.35);
p1ctx.fillStyle = "#db4f03";
p1ctx.fill();
p1ctx.lineWidth = 3;
p1ctx.stroke();
p1ctx.closePath();
//#############################################################
//Arcanine (Base - TailB)
//#############################################################
p1ctx.beginPath();
p1ctx.moveTo(269.53,173.08);
p1ctx.lineTo(238.59,196.28);
p1ctx.lineTo(242.6,203);
p1ctx.lineTo(211.15,215.86);
p1ctx.lineTo(218.71,217.51);
p1ctx.lineTo(207.5,226.2);
p1ctx.lineTo(201.35,226.77);
p1ctx.lineTo(206,233);
p1ctx.lineTo(202.1,238.55);
p1ctx.lineTo(216,247.8);
p1ctx.lineTo(223,245);
p1ctx.lineTo(246,260);
p1ctx.lineTo(266,246);
p1ctx.lineTo(285,235);
p1ctx.lineTo(278.06,214.37);
p1ctx.lineTo(263.16,235.33);
p1ctx.lineTo(261.98,231.98)
p1ctx.lineTo(244,242.5);
p1ctx.lineTo(219,235);
p1ctx.lineTo(221,232);
p1ctx.lineTo(218.38,230.27);
p1ctx.lineTo(230.63,220.91);
p1ctx.lineTo(255,209);
p1ctx.lineTo(276.56,191.07);
p1ctx.fillStyle = "black"
p1ctx.fill();
p1ctx.stroke();
/*p1ctx.beginPath();
p1ctx.moveTo(272.79,321.18);
p1ctx.bezierCurveTo(265,313,254.9,313,250.01,312.81);
p1ctx.bezierCurveTo(245,311,230.2,309.7,223.94,300.91);
p1ctx.bezierCurveTo(224.4,296.88,227.93,290.08,218.6,281.31);
p1ctx.lineTo(220.19,296.68);
p1ctx.stroke();
p1ctx.fill();*/
p1ctx.beginPath();
p1ctx.arc(255,297,30,0*Math.PI,2*Math.PI,false);
p1ctx.fillStyle = "#fff3c2";
p1ctx.fill();
p1ctx.stroke();
p1ctx.beginPath();
p1ctx.moveTo(41.63,230.26);
p1ctx.lineTo(18.61,243.32);
p1ctx.lineTo(19.24,244.67);
p1ctx.lineTo(28.64,246.53);
p1ctx.lineTo(28.74,247.56);
p1ctx.lineTo(22.95,249.12);
p1ctx.lineTo(23.63,250.16);
p1ctx.bezierCurveTo(17.2,249.19,10,262.8,0,265);
p1ctx.lineTo(18.9,272.33);
p1ctx.lineTo(18.36,273.83);
p1ctx.lineTo(34.1,277.3);
p1ctx.lineTo(33.95,278.38);
p1ctx.lineTo(24.88,282.02);
p1ctx.lineTo(53.37,299.43);
p1ctx.bezierCurveTo(54.15,292.2,57,286.5,58.21,281.78);
p1ctx.lineTo(60,200);
p1ctx.lineWidth = 3;
p1ctx.fillStyle = "#fff3c2"
p1ctx.fill();
p1ctx.stroke();
//#############################################################
//Arcanine (Base - Ear)
//#############################################################
p1ctx.beginPath();
p1ctx.moveTo(278.46,67.68)
p1ctx.bezierCurveTo(276,56.27,266.15,55.17,257.22,53.04);
p1ctx.bezierCurveTo(260.5,64,269,68.21,278.46,67.68);
p1ctx.fillStyle = "white";
p1ctx.fill();
p1ctx.stroke();
p1ctx.beginPath();
p1ctx.moveTo(251.49,67.68);
p1ctx.bezierCurveTo(240,66.65,229.65,65.4,219.43,70.54);
p1ctx.lineTo(222.71,72.28);
p1ctx.lineTo(209.6,85.84);
p1ctx.lineTo(210.79,87.48);
p1ctx.lineTo(218.59,88);
p1ctx.lineTo(191.24,110.51);
p1ctx.lineTo(200,112.8);
p1ctx.lineTo(189.85,116.05);
p1ctx.lineTo(178.58,117.41);
p1ctx.bezierCurveTo(186.1,125.4,193,126.5,200.6,126.27);
p1ctx.lineTo(182.92,145.92);
p1ctx.lineTo(192.78,147.1);
p1ctx.lineTo(175.16,157.02);
//p1ctx.bezierCurveTo(186.17,165,190.1,158,193.92,160.11);
p1ctx.bezierCurveTo(197,162,198.5,165.27,202.57,166.82);
p1ctx.bezierCurveTo(206.65,169,212.13,172.2,215.67,170.88);
p1ctx.bezierCurveTo(223.6,168.15,231.3,164,236.31,155.42);
p1ctx.lineTo(219.41,159.42);
p1ctx.lineTo(229.44,134.1);
p1ctx.lineTo(224.4,134.89);
p1ctx.bezierCurveTo(223.7,128.8,228.1,125.4,231.41,120.98);
p1ctx.lineTo(209.42,120.98);
p1ctx.lineTo(223.76,104.89);
p1ctx.lineTo(216.8,102.96);
p1ctx.lineTo(238.72,89.64);
p1ctx.bezierCurveTo(233.15,87.15,228.6,85.5,218.89,88);
p1ctx.lineTo(191.24,110.51);
p1ctx.lineTo(200,112.8);
p1ctx.lineTo(189.85,116.05);
p1ctx.fillStyle = "#fff3c2";
p1ctx.fill();
p1ctx.stroke();
p1ctx.beginPath();
p1ctx.moveTo(251.49,67.68);
p1ctx.bezierCurveTo(254.5,71.5,257,72.15,259.31,73.84);
p1ctx.bezierCurveTo(263,76.25,275,76,281.54,80.88);
p1ctx.bezierCurveTo(279,83,271.5,84.8,263.98,86.82);
p1ctx.lineTo(264.995,87.949);
p1ctx.bezierCurveTo(268,90.9,269.2,94.15,267.74,98.6);
p1ctx.bezierCurveTo(266,102.6,263.95,102.8,259.06,103.21);
p1ctx.bezierCurveTo(252.5,103.8,247,102.45,241.96,108.74);
p1ctx.lineTo(250.64,109.29);
p1ctx.lineTo(251.39,110.49);
p1ctx.bezierCurveTo(248.5,113.15,244.8,115.1,242.39,118.63);
p1ctx.bezierCurveTo(240,121.9,239.3,125.9,238.54,130.08);
p1ctx.bezierCurveTo(244.87,127.6,250.8,125,257.85,127.16);
p1ctx.lineTo(246.47,134.59);
p1ctx.lineTo(259.14,137.28);
p1ctx.bezierCurveTo(256.19,147.07,255.5,145.5,254.05,150.82);
p1ctx.lineTo(262.02,150.82);
p1ctx.lineTo(239.96,155.99);
p1ctx.lineTo(251.96,151.7);
p1ctx.lineTo(236.31,155.42);
p1ctx.lineTo(219.41,159.42);
p1ctx.lineTo(229.44,134.1);
p1ctx.lineTo(224.4,134.89);
p1ctx.bezierCurveTo(223.7,128.8,228.1,125.4,231.41,120.98);
p1ctx.lineTo(209.42,120.98);
p1ctx.lineTo(223.76,104.89);
p1ctx.lineTo(216.8,102.96);
p1ctx.lineTo(238.72,89.64);
p1ctx.bezierCurveTo(233.15,87.15,228.6,85.5,218.89,88);
p1ctx.lineTo(191.24,110.51);
p1ctx.lineTo(200,112.8);
p1ctx.lineTo(189.85,116.05);
p1ctx.fillStyle = "#fff3c2";
p1ctx.fill();
p1ctx.stroke();
//#############################################################
//Arcanine (Base - Eye)
//#############################################################
p1ctx.beginPath();
p1ctx.moveTo(298.7,63.96);
p1ctx.bezierCurveTo(302.21,49,311.07,50.5,319.049,52.052);
p1ctx.bezierCurveTo(314.07,68,302.21,67,298.7,63.96);
p1ctx.fillStyle = eyegrd;
p1ctx.fill();
p1ctx.strokeStyle = "black";
p1ctx.stroke();
//p1ctx.closepath();
//#############################################################
//Arcanine (Base - Mane Top)
//#############################################################
p1ctx.beginPath();
p1ctx.moveTo(325.552,56.952);
p1ctx.bezierCurveTo(330.7,53,334.23,48.32,349.78,41.98);
p1ctx.lineTo(342.43,17.22);
p1ctx.lineTo(340.68,17.44);
p1ctx.lineTo(338.55,21.8);
p1ctx.lineTo(331.1,15.66);
p1ctx.lineTo(331.1,26.54);
p1ctx.lineTo(329.23,25.71);
p1ctx.bezierCurveTo(326.1,14.05,319.5,5.5,308,0);
p1ctx.lineTo(309.24,6.01);
p1ctx.lineTo(303.27,6.38);
p1ctx.lineTo(308.3,18.85);
p1ctx.bezierCurveTo(309,20.6,308,23.8,307.83,24.79);
p1ctx.bezierCurveTo(306,24,304.8,23.8,302.1,22.83);
p1ctx.bezierCurveTo(298.15,19.95,293.8,17,291.97,14.02);
p1ctx.lineTo(285.79,11.33);
p1ctx.lineTo(289.05,18.35);
p1ctx.lineTo(288.48,19.72);
p1ctx.bezierCurveTo(280.1,15.3,272.17,7.85,262.11,11.98);
p1ctx.lineTo(272.66,25.78);
p1ctx.lineTo(264.91,26.76);
p1ctx.lineTo(269.06,40.48);
p1ctx.lineTo(261.59,40.48);
p1ctx.lineTo(263.77,45.72);
p1ctx.bezierCurveTo(269,46,273.09,45.83,276.32,47.86);
p1ctx.bezierCurveTo(279.89,49.5,282.15,53.2,285.5,56.6);
p1ctx.bezierCurveTo(298.3,48.15,312.05,48.5,325.55,56.95);
p1ctx.fillStyle = "#fff3c2";
p1ctx.fill();
p1ctx.stroke();
//#############################################################
//Arcanine (Base - Muzzle - Outline)
//#############################################################
p1ctx.beginPath();
p1ctx.moveTo(287.95,67.620);
p1ctx.lineTo(291.93,73.67);
p1ctx.lineTo(288.33,74.38);
p1ctx.bezierCurveTo(291.2,78,289,80.05,286.04,80.91);
p1ctx.bezierCurveTo(279,83,271.5,84.8,263.98,86.82);
p1ctx.lineTo(264.995,87.949);
p1ctx.bezierCurveTo(268,90.9,269.2,94.15,267.74,98.6);
p1ctx.bezierCurveTo(266,102.6,263.95,102.8,259.06,103.21);
p1ctx.bezierCurveTo(252.5,103.8,247,102.45,241.96,108.74);
p1ctx.lineTo(250.64,109.29);
p1ctx.lineTo(251.39,110.49);
p1ctx.bezierCurveTo(248.5,113.15,244.8,115.1,242.39,118.63);
p1ctx.bezierCurveTo(240,121.9,239.3,125.9,238.54,130.08);
p1ctx.bezierCurveTo(244.87,127.6,250.8,125,257.85,127.16);
p1ctx.lineTo(246.47,134.59);
p1ctx.lineTo(259.14,137.28);
p1ctx.bezierCurveTo(256.19,147.07,255.5,145.5,254.05,150.82);
p1ctx.lineTo(262.02,150.82);
p1ctx.bezierCurveTo(262.5,160,254.5,162.95,248.54,168.79);
p1ctx.lineTo(274.13,171.41);
p1ctx.lineTo(267.52,177.21);
p1ctx.lineTo(285.31,173.24);
p1ctx.bezierCurveTo(281.90,180.2,275.85,185,262.62,191.49);
p1ctx.lineTo(275.36,191.49);
p1ctx.bezierCurveTo(271,199.1,263,201.4,255.47,204.3);
p1ctx.bezierCurveTo(262.75,208.45,269.7,208.8,276.94,207.32);
p1ctx.lineTo(276.35,210.88);
p1ctx.lineTo(286.77,209.23);
p1ctx.bezierCurveTo(278,217,274,225.45,271.36,236.3);
p1ctx.bezierCurveTo(278.25,232.5,284.15,228.29,291.95,229.08);
p1ctx.lineTo(285.92,236.55);
p1ctx.lineTo(286.41,236.94);
p1ctx.lineTo(294.42,232.4);
p1ctx.lineTo(295.45,233.27);
p1ctx.bezierCurveTo(291.15,245,290,256.15,295.67,268.81);
p1ctx.bezierCurveTo(302,262.7,303,252.95,312.49,250.73);
p1ctx.lineTo(313.31,255.51);
p1ctx.lineTo(321.55,248.9);
p1ctx.lineTo(323.44,249.71);
p1ctx.lineTo(326.39,273.88);
p1ctx.bezierCurveTo(334.8,271.5,335.75,261.6,340.55,255.18)
p1ctx.lineTo(342.68,262.7);
p1ctx.lineTo(344.05,252.5);
p1ctx.lineTo(344.05,235.6);
p1ctx.lineTo(349.08,244.08);
p1ctx.lineTo(357.21,257.24);
p1ctx.bezierCurveTo(362,250,360,242.5,358.24,235.47);
p1ctx.lineTo(359.61,234.22);
p1ctx.lineTo(364.03,241.2);
p1ctx.bezierCurveTo(368.1,233.8,367.8,228.15,362.16,223.62);
p1ctx.lineTo(348.51,211.17);
p1ctx.bezierCurveTo(347,209,346,207,345.52,205.93);
p1ctx.lineTo(358.97,208.04);
p1ctx.lineTo(358.13,200.58);
p1ctx.lineTo(373.76,205.08);
p1ctx.lineTo(364.44,188.55);
p1ctx.lineTo(371.3,184.81);
p1ctx.lineTo(363.29,182.12);
p1ctx.bezierCurveTo(373,177.4,370,170.5,369.06,163.63);
p1ctx.lineTo(353.46,169.63);
p1ctx.lineTo(352.91,168.29);
p1ctx.lineTo(360.67,164.03);
p1ctx.bezierCurveTo(364.1,162.5,366.8,160,367.7,155.8);
p1ctx.lineTo(365.32,148.73);
p1ctx.bezierCurveTo(364.8,142,363.9,134.8,364.86,128.39);
p1ctx.bezierCurveTo(366.7,118.5,369,114.75,370.92,110.88);
p1ctx.bezierCurveTo(370.92+msid,110.88-msid2,379.92+(msid*2),79.63+msid,393,60);
p1ctx.bezierCurveTo(390.9,51.45,386,45.37,383.77,44.51);
p1ctx.bezierCurveTo(381.25,40.6,375,40,368,39.5);
p1ctx.bezierCurveTo(362,40.09,355,41.05,349.78,41.98);
p1ctx.bezierCurveTo(334.23,48.32,330.7,53,325.552,56.952);
p1ctx.lineTo(315.6,71.06);
p1ctx.bezierCurveTo(312.5,73.65,311.85,74.3,307.12,73.33);
p1ctx.lineTo(287.95,67.620);
p1ctx.lineWidth = 3;
p1ctx.fillStyle = "#fff3c2";
p1ctx.fill();
p1ctx.stroke();
//#############################################################
//Arcanine (Base - Mouth - Outline) + (Tongue, Canines)
//#############################################################
p1ctx.beginPath();
p1ctx.moveTo(362.6,154.13);
p1ctx.bezierCurveTo(362,149.2,361.27,145.1,361.15,140.98);
p1ctx.bezierCurveTo(360,124.6,365,109,371.45,94.26);
p1ctx.bezierCurveTo(375,86.3,379,79,383.12,71.21);
p1ctx.bezierCurveTo(386.4,64.5,385,62.15,377.75,61.91);
p1ctx.bezierCurveTo(372.23,61.95,369,60.90,364.81,59.2);
p1ctx.bezierCurveTo(358.5,56.7,353.8,57.5,348.96,62.38);
p1ctx.bezierCurveTo(336.37,75,327.5,89.8,320.71,106.02);
p1ctx.bezierCurveTo(320,108.4,318.85,111.5,317.47,113.68);
p1ctx.bezierCurveTo(324,126,329,138.5,334.2,150.6);
p1ctx.bezierCurveTo(335,152,337,154,338.57,153.57);
p1ctx.bezierCurveTo(346.25,154.2,354,154,362.6,154.13);
p1ctx.fillStyle = "#922f00";
p1ctx.fill();
p1ctx.stroke();
//###
p1ctx.beginPath();
p1ctx.moveTo(324.64,122.89);
p1ctx.arc(324.64,122.89,25,0*Math.PI,(3/2)*Math.PI,true);
p1ctx.bezierCurveTo(319.8,108.4,318.85,112.5,317.47,113.68);
p1ctx.bezierCurveTo(324,126,329,138.5,334.2,150.6);
p1ctx.bezierCurveTo(319.8,108.4,318.85,112.5,317.47,113.68);
//p1ctx.closePath();
p1ctx.fillStyle = "black";
p1ctx.fill();
p1ctx.stroke();
//###
p1ctx.beginPath();
p1ctx.moveTo(322.07,113.28);
p1ctx.bezierCurveTo(331.8,115.2,336.4,119.3,339.87,126.28);
p1ctx.lineTo(341.01,125.47);
p1ctx.lineTo(338.82,119.2);
p1ctx.bezierCurveTo(351.2,123.15,359,137,356.93,146.91);
p1ctx.bezierCurveTo(356.45,149.8,354.85,151.15,352.44,150.93);
p1ctx.lineTo(350.45,151);
p1ctx.bezierCurveTo(335.15,152.2,338.1,154.8,331.59,139.36);
p1ctx.bezierCurveTo(328.15,132.2,326,124.17,323.64,116.89);
p1ctx.lineTo(322.07,113.28);
p1ctx.strokeStyle = "black";
p1ctx.fillStyle = "#ed8599";
p1ctx.fill();
p1ctx.stroke();
//###
p1ctx.beginPath();
p1ctx.moveTo(353.79,60.98);
p1ctx.lineTo(360.83,59.49);
p1ctx.lineTo(356.6,68.89);
p1ctx.lineTo(353.79,60.98);
p1ctx.strokeStyle = "black";
p1ctx.lineWidth = 2;
p1ctx.fillStyle = "white";
p1ctx.fill();
p1ctx.stroke();
//###
p1ctx.beginPath();
p1ctx.moveTo(377.6-1,63.9);
p1ctx.lineTo(382.2-1,64.82);
p1ctx.lineTo(381.16-1,71.59);
p1ctx.lineTo(379.55-1,71.37);
p1ctx.lineTo(377.6-1,63.9);
p1ctx.lineWidth = 2;
p1ctx.fillStyle = "white";
p1ctx.fill();
p1ctx.stroke();
//###
p1ctx.beginPath();
p1ctx.moveTo(206.8,172.48);
p1ctx.bezierCurveTo(199.9,178.90,190.9,182.65,180.44,184.23);
p1ctx.lineTo(191.52,162.61);
p1ctx.lineTo(206.8,172.48);
p1ctx.fill();
p1ctx.stroke();
//###
p1ctx.beginPath();
p1ctx.moveTo(367.7,155.8);
p1ctx.bezierCurveTo(367,155,368.7,154.5,369.86,152.81);
p1ctx.lineTo(379.27,147.02);
p1ctx.bezierCurveTo(374,142.5,374,141,379,138);
p1ctx.lineTo(386.96,134.54);
p1ctx.lineTo(378.13,130.96);
p1ctx.lineTo(388.29,127.32);
p1ctx.lineTo(373.91,118.79);
p1ctx.bezierCurveTo(370.8,116.85,369,114.5,370.92,110.88);
p1ctx.bezierCurveTo(362,130.5,365.1,127.8,367.7,155.8);
p1ctx.fillStyle = "#fff3c2";
p1ctx.fill();
//Tail
p1ctx.beginPath();
/*p1ctx.moveTo(177.64,184.23);
p1ctx.bezierCurveTo(180.6,177.3,185.7,169,188.471,158.665);
p1ctx.lineTo(175.186,157.021);
p1ctx.lineTo(175.156,157.021);*/
p1ctx.moveTo(115.546,140.7);
p1ctx.lineTo(115.838,142.414);
p1ctx.bezierCurveTo(115,143.8,114.5,145.29,113.708,146.353);
p1ctx.bezierCurveTo(101.8,165,99.95,184.2,108.384,204.557);
p1ctx.bezierCurveTo(111,211.18,114.5,216.2,121.693,220.914);
p1ctx.bezierCurveTo(122.13,220,123,219.9,123.255,218.861);
p1ctx.bezierCurveTo(134.3,201.5,149.67,190,180.44,184.23);
p1ctx.lineTo(191.521,162.61);
p1ctx.lineTo(188.5,158.665);
p1ctx.lineTo(175.16,157.020);
p1ctx.lineTo(183.92,148.7);
p1ctx.lineTo(178.8,147.57);
//p1ctx.bezierCurveTo(184.5,144.6,183,139,184.34,134.52);
p1ctx.lineTo(199.14,126.32);
p1ctx.bezierCurveTo(192.19,126.5,186,124.1,178.58,117.41);
p1ctx.lineTo(189.85,116.05);
p1ctx.lineTo(189.85,116.05);
p1ctx.lineTo(182.43,101.88);
p1ctx.lineTo(180.88,102.16);
p1ctx.bezierCurveTo(180.85,103.9,180.6,105,179.92,106.54);
p1ctx.lineTo(176.86,110.17);
p1ctx.lineTo(176.62,107.19);
p1ctx.bezierCurveTo(168,96,160.3,87.6,149,82.05);
p1ctx.lineTo(149,86.13);
p1ctx.lineTo(143.44,85.49);
p1ctx.bezierCurveTo(144.15,88,146,90.65,145.96,93.34);
p1ctx.bezierCurveTo(146,95.2,145.3,97.4,144,98.35);
p1ctx.bezierCurveTo(143,99.15,140,98.75,138.66,97.69);
p1ctx.bezierCurveTo(137.95,95.25,133.78,92,130.76,89.42);
p1ctx.bezierCurveTo(127,84.98,122,80.6,115.35,81.13);
p1ctx.lineTo(117.91,87.69);
p1ctx.lineTo(99.14,88.91);
p1ctx.lineTo(104.93,96.01);
p1ctx.lineTo(94.44,94.84);
p1ctx.lineTo(101.33,102.83);
p1ctx.bezierCurveTo(104,104.9,102.3,106.8,100.74,107.64);
p1ctx.bezierCurveTo(98.85,107.7,96.5,108.5,94.46,109.17);
p1ctx.bezierCurveTo(81,112.2,70.8,124.6,71.2,136.35);
p1ctx.lineTo(81.71,141.73);
p1ctx.bezierCurveTo(77.23,148,78,156.5,77.77,162.66);
p1ctx.lineTo(77.73,169.66);
p1ctx.bezierCurveTo(77.1,178.5,71.8,181.5,63.7,177.79);
p1ctx.lineTo(59.36,175.65);
p1ctx.bezierCurveTo(60.15,177.85,61.1,179.2,61.42,180.41);
p1ctx.bezierCurveTo(61.7,182,62.2,184.2,61.56,184.71);
p1ctx.bezierCurveTo(61.3,185.8,57.8,186.1,56.57,185.4);
p1ctx.bezierCurveTo(53.6,184,50.9,181.4,47.5,178.86);
p1ctx.bezierCurveTo(45.25,193.88,55,200.9,65.64,208.6);
p1ctx.lineTo(90.704,211.981);
p1ctx.lineTo(109.48,209.141);
p1ctx.lineTo(108.38,204.56);
p1ctx.fillStyle = "#fff3c2";
p1ctx.fill();
p1ctx.stroke();
p1ctx.beginPath();
p1ctx.moveTo(92.7,211.98)
p1ctx.lineTo(107.67,238.54);
p1ctx.lineTo(109.11,232.04);
p1ctx.lineTo(113.24,235.33);
p1ctx.lineTo(121.11,223.63);
p1ctx.lineTo(106.48,209.14);
p1ctx.lineTo(92.7,211.98);
p1ctx.fillStyle = "white";
p1ctx.lineWidth = 2;
p1ctx.fill();
p1ctx.stroke();
//#############################################################
//Arcanine (Base - TailA)
//#############################################################
p1ctx.beginPath();
p1ctx.moveTo(180,308);
p1ctx.bezierCurveTo(180,321.4,173.85,330.43,159.11,332.85);
p1ctx.bezierCurveTo(145,337.8,131,337.15,117.01,332.39);
p1ctx.bezierCurveTo(97.8,325.95,81,314.89,66.72,299.96);
p1ctx.lineTo(63.16,295.73);
p1ctx.bezierCurveTo(69,294,69.7,291.2,65.37,287.5);
p1ctx.bezierCurveTo(62,284,59.5,281.8,53.77,278.04);
p1ctx.bezierCurveTo(49.2,273.8,41.1,266.15,39.17,260.67);
p1ctx.bezierCurveTo(43.85,264.15,50.5,265.8,40.5,247.83);
p1ctx.bezierCurveTo(47.25,251.66,52.45,249.15,50.24,241.72);
p1ctx.bezierCurveTo(49,238,45,232,41.63,230.26)
p1ctx.bezierCurveTo(37.8,223.85,34,216,24.68,214.15);
p1ctx.bezierCurveTo(30.3,209,37.3,43.52,210.75);
p1ctx.lineTo(39.22,207.32);
p1ctx.lineTo(39.35,206.02);
p1ctx.bezierCurveTo(41.7,206.2,46,205.2,206.19);
p1ctx.bezierCurveTo(52.7,207,55.9,209.5,59.18,211.03);
p1ctx.lineTo(59.82,207.98);
p1ctx.lineTo(65.64,208.6);
p1ctx.bezierCurveTo(65,206,61.5,203,60.58,201.08);
p1ctx.bezierCurveTo(59.8,199.8,59.2,198.2,58.5,197.33);
p1ctx.bezierCurveTo(59,197.66,60,197.55,62.75,197.18);
p1ctx.bezierCurveTo(64.5,198,70,201.25,73.46,203.06);
p1ctx.bezierCurveTo(75.35,204,76,206.5,78.45,207.14);
p1ctx.bezierCurveTo(80.1,208,82.45,207.9,84.57,207);
p1ctx.lineTo(85.49,206.21);
p1ctx.lineTo(107.45,242.46);
p1ctx.lineTo(108.33,241.33);
p1ctx.bezierCurveTo(109,249.9,108.85,247.15,109.58,234.89);
p1ctx.bezierCurveTo(111.9,236.8,114.2,238,115,233.75);
p1ctx.bezierCurveTo(121.9,242.8,125.17,252.75,126.88,262.21);
p1ctx.bezierCurveTo(127.7,266,128,268.5,128.06,273.13);
p1ctx.bezierCurveTo(129,290.25,139,301.75,152.65,310.31);
p1ctx.bezierCurveTo(161,316,170,315,180,309);
p1ctx.bezierCurveTo(180,321.4,173.85,330.43,159.11,332.85);
p1ctx.lineWidth = 3;
p1ctx.fillStyle = "#fff3c2";
p1ctx.fill();
p1ctx.stroke();
//p1ctx.closePath();
p1ctx.beginPath();
p1ctx.moveTo(138.29,202.28);
p1ctx.bezierCurveTo(142.6,217.8,144.4,228.75,152.28,237.96);
p1ctx.bezierCurveTo(155,237.8,154.8,240.8,154.38,230.7);
p1ctx.bezierCurveTo(157,238.5,156,241,161.74,240.93);
p1ctx.bezierCurveTo(167,250,168.1,251.8,173.4,252.77);
p1ctx.bezierCurveTo(169.7,242,168.5,238.3,170.17,227.93);
p1ctx.bezierCurveTo(170,217,167.2,206.3,163.88,188.79);
p1ctx.bezierCurveTo(157,190.5,145,192.15,138.29,202.28);
p1ctx.fillStyle = "black";
p1ctx.fill();
p1ctx.stroke();
p1ctx.beginPath();
p1ctx.moveTo(172.9,185.5);
p1ctx.bezierCurveTo(172.85,201.5,188.2,217,197.56,220.39);
p1ctx.bezierCurveTo(200,205,198,190,197,180);
p1ctx.fill();
p1ctx.stroke();
p1ctx.beginPath();
p1ctx.moveTo(227.68,165.24);
p1ctx.bezierCurveTo(207.9,180,205.6,192,205.94,193.94);
p1ctx.bezierCurveTo(214.3,193,218,191,227,182);
p1ctx.bezierCurveTo(228.8,180,231.5,177.3,240.973,171.719);
p1ctx.lineTo(250.21,167.88);
p1ctx.bezierCurveTo(253,166.5,254.5,165.19,259.47,159.98);
p1ctx.bezierCurveTo(263,156.85,264.2,155.2,262.8,151.69);
p1ctx.bezierCurveTo(263,146.25,255,147.5,255.07,150.64);
p1ctx.bezierCurveTo(251.2,156.5,251.85,153,244.86,153.24);
p1ctx.bezierCurveTo(239.5,152.35);
p1ctx.fill();
p1ctx.stroke();
p1ctx.beginPath();
p1ctx.moveTo(74.02,335.65);
p1ctx.bezierCurveTo(73.5,341.8,70.45,345.3,67.44,349.89);
p1ctx.moveTo(59.59,335.07);
p1ctx.bezierCurveTo(54,349,49.73,355,43.22,346.08);
p1ctx.moveTo(133.65,358.39);
p1ctx.bezierCurveTo(140,361.9,148.8,364.5,148.28,374.17);
p1ctx.bezierCurveTo(148.2,376,148,379,151.21,379.79);
p1ctx.moveTo(149.59,355.75)
p1ctx.bezierCurveTo(156.8,358.5,164,367.8,160.81,379.82);
p1ctx.stroke();
ctx.restore();
ctx.save();
ctx.translate(0,350);
ctx.scale(.75,.75);
ctx.drawImage(p1canvas,0,0);
ctx.restore();
ctx.drawImage(tcanvas,0,0);
ctx.save();
ctx.translate(cw/2+455,ch/2-2.5);
ctx.scale(-.75,.75);
ctx.drawImage(p1canvas,0,0);
ctx.translate(cw/2+390,ch/2+45);
ctx.scale(-1,1);
ctx.restore();
ctx.translate(cw, ch);
ctx.scale(-1,1);
ctx.drawImage(tcanvas,0,-705);
ctx.restore();
ctx
};
</script>
</head>
<body>
<canvas id="myCanvas" width="910" height=705"></canvas>
<canvas id="TCanvas" width="910" height=705"></canvas>
<canvas id="myCanvas" width="910" height=705"></canvas>
</body>
</html>
Heir of Breath
Idea from MSpaintadventures, (c) Andrew Hussie
<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
//Begin 'Heir of Breath'
context.beginPath();
context.moveTo(125,425);
context.bezierCurveTo(400,660,800,-50,920,500);
context.quadraticCurveTo(1050,400,980,200);
context.bezierCurveTo(800,-200,200,500,225,100);
//context.arcTo(255,295,250,300);
//context.quadraticCurveTo(100,200,200,100);
//context.quadraticCurveTo(0,200,100,400);
//context.bezierCurveTo(100,200,0,200,100,400);
context.bezierCurveTo(200,00,-50,250,125,425);
context.fillStyle = 'cyan';
context.fill();
context.closePath();
context.beginPath();
context.moveTo(100,600);
context.bezierCurveTo(600,900,750,100,850,620);
/*context.quadraticCurveTo(895,655,920,620);
context.quadraticCurveTo(980,370,800,320);*/
context.bezierCurveTo(895,555,920,370,760,360);
context.bezierCurveTo(620,375,500,580,200,550);
context.quadraticCurveTo(0,500,50,350);
context.quadraticCurveTo(-50,500,100,600)
context.fillStyle = 'cyan';
context.fill();
context.closePath();
//End 'Heir of Breath'
//Reference From: MSpaintadventures.com
};
</script>
</head>
<body>
<canvas id="myCanvas" width="1050" height="1000"></canvas>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
//Begin 'Heir of Breath'
context.beginPath();
context.moveTo(125,425);
context.bezierCurveTo(400,660,800,-50,920,500);
context.quadraticCurveTo(1050,400,980,200);
context.bezierCurveTo(800,-200,200,500,225,100);
//context.arcTo(255,295,250,300);
//context.quadraticCurveTo(100,200,200,100);
//context.quadraticCurveTo(0,200,100,400);
//context.bezierCurveTo(100,200,0,200,100,400);
context.bezierCurveTo(200,00,-50,250,125,425);
context.fillStyle = 'cyan';
context.fill();
context.closePath();
context.beginPath();
context.moveTo(100,600);
context.bezierCurveTo(600,900,750,100,850,620);
/*context.quadraticCurveTo(895,655,920,620);
context.quadraticCurveTo(980,370,800,320);*/
context.bezierCurveTo(895,555,920,370,760,360);
context.bezierCurveTo(620,375,500,580,200,550);
context.quadraticCurveTo(0,500,50,350);
context.quadraticCurveTo(-50,500,100,600)
context.fillStyle = 'cyan';
context.fill();
context.closePath();
//End 'Heir of Breath'
//Reference From: MSpaintadventures.com
};
</script>
</head>
<body>
<canvas id="myCanvas" width="1050" height="1000"></canvas>
</body>
</html>
Tensai
One of my attempts at Calligraphy with HTML 5 using nothing but Arcs and Lines, the "I" character could use some work, but, other than that, I'm not dissatisfied with the general outcome. Image attached is the image saved as a png. The word was created using hiragana (HAHAHAHA, No, not jumping into kanji with HTML5 quite yet, ._.) and means Genius (Tensai), characters present are created using their proper stroke order and direction (Minus the second stroke on the "I" if memory serves correctly)
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
//"Te" Stroke One
context.beginPath();
context.moveTo(0,10);
context.lineTo(200,10);
context.lineWidth = 20;
context.stroke();
//"Te" Stroke Two
context.beginPath();
context.arc(200,130,120,.5*Math.PI,1.5*Math.PI,false);
context.stroke();
//"N" Stroke One
context.beginPath();
context.moveTo(80,350);
context.lineTo(280,150);
context.stroke();
//"N" Stroke Two
context.beginPath();
context.arc(185,310,60,-.5*Math.PI,0*Math.PI,false);
context.arc(245,310,50,.5*Math.PI,.2*Math.PI,true);
context.stroke();
//"Sa" Stroke One
context.beginPath();
context.moveTo(300,300);
context.lineTo(300,400);
context.arc(325,400,25,1*Math.PI,.12*Math.PI,true);
context.stroke();
//"Sa" Stroke Two
context.beginPath();
context.moveTo(300,475);
context.lineTo(340,475);
context.arc(350,375,100,.5*Math.PI,0*Math.PI,true);
context.lineTo(450,300);
context.stroke();
//"Sa" Stroke Three
context.beginPath();
context.moveTo(260,390);
context.lineTo(500,390);
context.stroke();
//"I" Stroke One
context.beginPath();
context.moveTo(475,425);
context.lineTo(475,525);
context.arc(500,525,25,1*Math.PI,.12*Math.PI,true);
context.stroke();
//"Sa" Stroke Two
context.beginPath();
context.moveTo(475,600);
context.lineTo(515,600);
context.arc(525,500,100,.5*Math.PI,0*Math.PI,true);
context.lineTo(625,425);
context.stroke();
};
</script>
<canvas id="myCanvas" width="650" height="620"></canvas>
Pokeball
Simple quick and dirty Pokeball,
<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
/*#############################################################################
ISSUES: Red/White Borders don't show ClosedPath Stroke, (i.e. black line in between the two colors)
#############################################################################*/
//StartPokeBall
context.beginPath();
context.arc(400,300,150, 0*Math.PI,2*Math.PI,false);
context.lineWidth = 10;
context.fillStyle = "red";
context.fill();
context.strokeStyle = "black";
context.stroke();
///RedTopHalf
context.beginPath()
context.arc(400,300,150,1*Math.PI,2*Math.PI,true);
context.lineWidth = 10;
context.fillStyle = "white";
context.fill();
context.stroke();
context.strokeStyle = "black";
context.closePath();
///WhiteBottomHalf
context.beginPath();
context.arc(400,300,20,0*Math.PI,2*Math.PI,false);
context.lineWidth = 1;
context.fillStyle = 'cyan';
context.fill();
context.stroke();
context.closePath();
///CenterButtonOuter
context.beginPath();
context.arc(400,300,5,0*Math.PI,2*Math.PI,false);
context.lineWidth = 1;
context.fillStyle = "black";
context.fill();
context.stroke();
context.closePath();
//End Pokeball
};
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
/*#############################################################################
ISSUES: Red/White Borders don't show ClosedPath Stroke, (i.e. black line in between the two colors)
#############################################################################*/
//StartPokeBall
context.beginPath();
context.arc(400,300,150, 0*Math.PI,2*Math.PI,false);
context.lineWidth = 10;
context.fillStyle = "red";
context.fill();
context.strokeStyle = "black";
context.stroke();
///RedTopHalf
context.beginPath()
context.arc(400,300,150,1*Math.PI,2*Math.PI,true);
context.lineWidth = 10;
context.fillStyle = "white";
context.fill();
context.stroke();
context.strokeStyle = "black";
context.closePath();
///WhiteBottomHalf
context.beginPath();
context.arc(400,300,20,0*Math.PI,2*Math.PI,false);
context.lineWidth = 1;
context.fillStyle = 'cyan';
context.fill();
context.stroke();
context.closePath();
///CenterButtonOuter
context.beginPath();
context.arc(400,300,5,0*Math.PI,2*Math.PI,false);
context.lineWidth = 1;
context.fillStyle = "black";
context.fill();
context.stroke();
context.closePath();
//End Pokeball
};
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>
Trippyman
So, Blahblahblah, read the HTML to understand more about this one because it's realyl difficult to explain this one. Coding is fully commented to include process, alternatives, experiments, so on and so forth. Go read it. Seriously, just go read it.
<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
/*#############################################################################
ATTENTION: READ FROM BOTTOM, UP
#############################################################################*/
//Start BGCircle2 (800)
context.beginPath();
context.arc(400, 300, 800, 0*Math.PI, 2*Math.PI, true);
context.fillStyle = 'yellow';
context.fill();
context.strokeStyle = 'yellow';
context.stroke();
//Start BGCircle1 (400)
context.beginPath();
context.arc(400, 300, 400, 0*Math.PI, 2*Math.PI, true);
context.fillStyle = 'limegreen';
context.fill();
context.strokeStyle = 'limegreen';
context.stroke();
/*#############################################################################
CountOfCenter: 263.8056684375, ROUND TO 263.806.
Next Upgrade: 50%
263.806 + 131.903
Leads to: Radius > Canvas
THUS: Simplify Following to
context.beginPath();
context.arc(400, 300, 400, 0*Math.PI, 2*Math.PI, true);
context.fillStyle = 'color';
context.fill();
context.strokeStyle = 'color';
context.stroke();
#############################################################################*/
//StartCenterTeal ((Change From 35 to 45%))
context.beginPath();
context.arc( 400, 300, 93.75+14.0635+26.953125+47.16831875+81.8707246875, 0*Math.PI, 2*Math.PI, true);
context.lineWidth = 10;
context.fillStyle = 'teal';
context.fill();
context.strokeStyle = 'teal';
context.stroke();
//Start "Head"
context.beginPath();
context.arc( 400, 200, 68.75+14.0635+26.953125+47.16831875+81.8707246875, 0*Math.PI, 2*Math.PI, true);
context.lideWidth = 5;
context.fillStyle = 'teal';
context.fill();
context.strokeStyle = 'teal';
context.stroke();
//Start "Arms"
context.beginPath();
context.arc ( 325, 265, 38.75+14.0635+26.953125+47.16831875+81.8707246875, 0*Math.PI, 2*Math.PI, true);
context.arc ( 475, 265, 38.75+14.0635+26.953125+47.16831875+81.8707246875, 0*Math.PI, 2*Math.PI, true);
context.lideWidth = 5;
context.fillStyle = 'teal';
context.fill();
context.strokeStyle = 'teal';
context.stroke();
//Start "Legs"
context.beginPath();
context.arc ( 335, 355, 38.75+14.0635+26.953125+47.16831875+81.8707246875, 0*Math.PI, 2*Math.PI, true);
context.arc ( 465, 355, 38.75+14.0635+26.953125+47.16831875+81.8707246875, 0*Math.PI, 2*Math.PI, true);
context.lideWidth = 5;
context.fillStyle = 'teal';
context.fill();
context.strokeStyle = 'teal';
context.stroke();
//StartCenterCyan ((Change From 25 to 35%))
context.beginPath();
context.arc( 400, 300, 93.75+14.0635+26.953125+47.16831875, 0*Math.PI, 2*Math.PI, true);
context.lineWidth = 10;
context.fillStyle = 'cyan';
context.fill();
context.strokeStyle = 'cyan';
context.stroke();
//Start "Head"
context.beginPath();
context.arc( 400, 200, 68.75+14.0635+26.953125+47.16831875, 0*Math.PI, 2*Math.PI, true);
context.lideWidth = 5;
context.fillStyle = 'cyan';
context.fill();
context.strokeStyle = 'cyan';
context.stroke();
//Start "Arms"
context.beginPath();
context.arc ( 325, 265, 38.75+14.0635+26.953125+47.16831875, 0*Math.PI, 2*Math.PI, true);
context.arc ( 475, 265, 38.75+14.0635+26.953125+47.16831875, 0*Math.PI, 2*Math.PI, true);
context.lideWidth = 5;
context.fillStyle = 'cyan';
context.fill();
context.strokeStyle = 'cyan';
context.stroke();
//Start "Legs"
context.beginPath();
context.arc ( 335, 355, 38.75+14.0635+26.953125+47.16831875, 0*Math.PI, 2*Math.PI, true);
context.arc ( 465, 355, 38.75+14.0635+26.953125+47.16831875, 0*Math.PI, 2*Math.PI, true);
context.lideWidth = 5;
context.fillStyle = 'cyan';
context.fill();
context.strokeStyle = 'cyan';
context.stroke();
//StartCenterBlue ((Change From 15 to 25%))
context.beginPath();
context.arc( 400, 300, 93.75+14.0635+26.953125, 0*Math.PI, 2*Math.PI, true);
context.lineWidth = 10;
context.fillStyle = 'blue';
context.fill();
context.strokeStyle = 'blue';
context.stroke();
//Start "Head"
context.beginPath();
context.arc( 400, 200, 68.75+14.0635+26.953125, 0*Math.PI, 2*Math.PI, true);
context.lideWidth = 5;
context.fillStyle = 'blue';
context.fill();
context.strokeStyle = 'blue';
context.stroke();
//Start "Arms"
context.beginPath();
context.arc ( 325, 265, 38.75+14.0635+26.953125, 0*Math.PI, 2*Math.PI, true);
context.arc ( 475, 265, 38.75+14.0635+26.953125, 0*Math.PI, 2*Math.PI, true);
context.lideWidth = 5;
context.fillStyle = 'blue';
context.fill();
context.strokeStyle = 'blue';
context.stroke();
//Start "Legs"
context.beginPath();
context.arc ( 335, 355, 38.75+14.0635+26.953125, 0*Math.PI, 2*Math.PI, true);
context.arc ( 465, 355, 38.75+14.0635+26.953125, 0*Math.PI, 2*Math.PI, true);
context.lideWidth = 5;
context.fillStyle = 'blue';
context.fill();
context.strokeStyle = 'blue';
context.stroke();
//StartCenterPurple
context.beginPath();
context.arc( 400, 300, 93.75+14.0635, 0*Math.PI, 2*Math.PI, true);
context.lineWidth = 10;
context.fillStyle = 'purple';
context.fill();
context.strokeStyle = 'purple';
context.stroke();
//Start "Head"
context.beginPath();
context.arc( 400, 200, 68.75+14.0635, 0*Math.PI, 2*Math.PI, true);
context.lideWidth = 5;
context.fillStyle = 'purple';
context.fill();
context.strokeStyle = 'purple';
context.stroke();
//Start "Arms"
context.beginPath();
context.arc ( 325, 265, 38.75+14.0635, 0*Math.PI, 2*Math.PI, true);
context.arc ( 475, 265, 38.75+14.0635, 0*Math.PI, 2*Math.PI, true);
context.lideWidth = 5;
context.fillStyle = 'purple';
context.fill();
context.strokeStyle = 'purple';
context.stroke();
//Start "Legs"
context.beginPath();
context.arc ( 335, 355, 38.75+14.0635, 0*Math.PI, 2*Math.PI, true);
context.arc ( 465, 355, 38.75+14.0635, 0*Math.PI, 2*Math.PI, true);
context.lideWidth = 5;
context.fillStyle = 'purple';
context.fill();
context.strokeStyle = 'purple';
context.stroke();
//StartCenterGreen
context.beginPath();
context.arc( 400, 300, 93.75, 0*Math.PI, 2*Math.PI, true);
context.lineWidth = 10;
context.fillStyle = 'green';
context.fill();
context.strokeStyle = 'green';
context.stroke();
//Start "Head"
context.beginPath();
context.arc( 400, 200, 68.75, 0*Math.PI, 2*Math.PI, true);
context.lideWidth = 5;
context.fillStyle = 'green';
context.fill();
context.strokeStyle = 'green';
context.stroke();
//Start "Arms"
context.beginPath();
context.arc ( 325, 265, 38.75, 0*Math.PI, 2*Math.PI, true);
context.arc ( 475, 265, 38.75, 0*Math.PI, 2*Math.PI, true);
context.lideWidth = 5;
context.fillStyle = 'green';
context.fill();
context.strokeStyle = 'green';
context.stroke();
//Start "Legs"
context.beginPath();
context.arc ( 335, 355, 38.75, 0*Math.PI, 2*Math.PI, true);
context.arc ( 465, 355, 38.75, 0*Math.PI, 2*Math.PI, true);
context.lideWidth = 5;
context.fillStyle = 'green';
context.fill();
context.strokeStyle = 'green';
context.stroke();
//StartCenter
context.beginPath();
context.arc( 400, 300, 75, 0*Math.PI, 2*Math.PI, true);
context.lineWidth = 10;
context.fillStyle = 'black';
context.fill();
context.strokeStyle = 'black';
context.stroke();
//Start "Head"
context.beginPath();
context.arc( 400, 200, 50, 0*Math.PI, 2*Math.PI, true);
context.lideWidth = 5;
context.fillStyle = 'black';
context.fill();
context.strokeStyle = 'black';
context.stroke();
//Start "Arms"
context.beginPath();
context.arc ( 325, 265, 20, 0*Math.PI, 2*Math.PI, true);
context.arc ( 475, 265, 20, 0*Math.PI, 2*Math.PI, true);
context.lideWidth = 5;
context.fillStyle = 'black';
context.fill();
context.strokeStyle = 'black';
context.stroke();
//Start "Legs"
context.beginPath();
context.arc ( 335, 355, 20, 0*Math.PI, 2*Math.PI, true);
context.arc ( 465, 355, 20, 0*Math.PI, 2*Math.PI, true);
context.lideWidth = 5;
context.fillStyle = 'black';
context.fill();
context.strokeStyle = 'black';
context.stroke();
/*#############################################################################
###############################################################################
######Following: Combined Template for Full Body#####
context.beginPath();
context.arc( 400, 300, 75, 0*Math.PI, 2*Math.PI, true);
context.lineWidth = 10;
context.arc( 400, 200, 50, 0*Math.PI, 2*Math.PI, true);
context.arc( 325, 265, 20, 0*Math.PI, 2*Math.PI, true);
context.arc( 475, 265, 20, 0*Math.PI, 2*Math.PI, true);
context.arc( 335, 355, 20, 0*Math.PI, 2*Math.PI, true);
context.arc( 465, 355, 20, 0*Math.PI, 2*Math.PI, true);
context.lideWidth = 5;
context.fillStyle = 'black';
context.fill();
context.strokeStyle = 'black';
context.stroke();
######Ideal Solution: Template + 15% in Radius of 'Body', 10 Times, solid base colors.
######Issues: Auto-Connect Lines, Impossible to do in one solid block?
######Following: Manual Input of Previous Set Up, split up into following subsections ((As read from bottom, up)) 1) Legs, 2) Arms, 3)Head, 4) Body. Definitions are abstract ONLY
###############################################################################
#############################################################################*/
};
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
/*#############################################################################
ATTENTION: READ FROM BOTTOM, UP
#############################################################################*/
//Start BGCircle2 (800)
context.beginPath();
context.arc(400, 300, 800, 0*Math.PI, 2*Math.PI, true);
context.fillStyle = 'yellow';
context.fill();
context.strokeStyle = 'yellow';
context.stroke();
//Start BGCircle1 (400)
context.beginPath();
context.arc(400, 300, 400, 0*Math.PI, 2*Math.PI, true);
context.fillStyle = 'limegreen';
context.fill();
context.strokeStyle = 'limegreen';
context.stroke();
/*#############################################################################
CountOfCenter: 263.8056684375, ROUND TO 263.806.
Next Upgrade: 50%
263.806 + 131.903
Leads to: Radius > Canvas
THUS: Simplify Following to
context.beginPath();
context.arc(400, 300, 400, 0*Math.PI, 2*Math.PI, true);
context.fillStyle = 'color';
context.fill();
context.strokeStyle = 'color';
context.stroke();
#############################################################################*/
//StartCenterTeal ((Change From 35 to 45%))
context.beginPath();
context.arc( 400, 300, 93.75+14.0635+26.953125+47.16831875+81.8707246875, 0*Math.PI, 2*Math.PI, true);
context.lineWidth = 10;
context.fillStyle = 'teal';
context.fill();
context.strokeStyle = 'teal';
context.stroke();
//Start "Head"
context.beginPath();
context.arc( 400, 200, 68.75+14.0635+26.953125+47.16831875+81.8707246875, 0*Math.PI, 2*Math.PI, true);
context.lideWidth = 5;
context.fillStyle = 'teal';
context.fill();
context.strokeStyle = 'teal';
context.stroke();
//Start "Arms"
context.beginPath();
context.arc ( 325, 265, 38.75+14.0635+26.953125+47.16831875+81.8707246875, 0*Math.PI, 2*Math.PI, true);
context.arc ( 475, 265, 38.75+14.0635+26.953125+47.16831875+81.8707246875, 0*Math.PI, 2*Math.PI, true);
context.lideWidth = 5;
context.fillStyle = 'teal';
context.fill();
context.strokeStyle = 'teal';
context.stroke();
//Start "Legs"
context.beginPath();
context.arc ( 335, 355, 38.75+14.0635+26.953125+47.16831875+81.8707246875, 0*Math.PI, 2*Math.PI, true);
context.arc ( 465, 355, 38.75+14.0635+26.953125+47.16831875+81.8707246875, 0*Math.PI, 2*Math.PI, true);
context.lideWidth = 5;
context.fillStyle = 'teal';
context.fill();
context.strokeStyle = 'teal';
context.stroke();
//StartCenterCyan ((Change From 25 to 35%))
context.beginPath();
context.arc( 400, 300, 93.75+14.0635+26.953125+47.16831875, 0*Math.PI, 2*Math.PI, true);
context.lineWidth = 10;
context.fillStyle = 'cyan';
context.fill();
context.strokeStyle = 'cyan';
context.stroke();
//Start "Head"
context.beginPath();
context.arc( 400, 200, 68.75+14.0635+26.953125+47.16831875, 0*Math.PI, 2*Math.PI, true);
context.lideWidth = 5;
context.fillStyle = 'cyan';
context.fill();
context.strokeStyle = 'cyan';
context.stroke();
//Start "Arms"
context.beginPath();
context.arc ( 325, 265, 38.75+14.0635+26.953125+47.16831875, 0*Math.PI, 2*Math.PI, true);
context.arc ( 475, 265, 38.75+14.0635+26.953125+47.16831875, 0*Math.PI, 2*Math.PI, true);
context.lideWidth = 5;
context.fillStyle = 'cyan';
context.fill();
context.strokeStyle = 'cyan';
context.stroke();
//Start "Legs"
context.beginPath();
context.arc ( 335, 355, 38.75+14.0635+26.953125+47.16831875, 0*Math.PI, 2*Math.PI, true);
context.arc ( 465, 355, 38.75+14.0635+26.953125+47.16831875, 0*Math.PI, 2*Math.PI, true);
context.lideWidth = 5;
context.fillStyle = 'cyan';
context.fill();
context.strokeStyle = 'cyan';
context.stroke();
//StartCenterBlue ((Change From 15 to 25%))
context.beginPath();
context.arc( 400, 300, 93.75+14.0635+26.953125, 0*Math.PI, 2*Math.PI, true);
context.lineWidth = 10;
context.fillStyle = 'blue';
context.fill();
context.strokeStyle = 'blue';
context.stroke();
//Start "Head"
context.beginPath();
context.arc( 400, 200, 68.75+14.0635+26.953125, 0*Math.PI, 2*Math.PI, true);
context.lideWidth = 5;
context.fillStyle = 'blue';
context.fill();
context.strokeStyle = 'blue';
context.stroke();
//Start "Arms"
context.beginPath();
context.arc ( 325, 265, 38.75+14.0635+26.953125, 0*Math.PI, 2*Math.PI, true);
context.arc ( 475, 265, 38.75+14.0635+26.953125, 0*Math.PI, 2*Math.PI, true);
context.lideWidth = 5;
context.fillStyle = 'blue';
context.fill();
context.strokeStyle = 'blue';
context.stroke();
//Start "Legs"
context.beginPath();
context.arc ( 335, 355, 38.75+14.0635+26.953125, 0*Math.PI, 2*Math.PI, true);
context.arc ( 465, 355, 38.75+14.0635+26.953125, 0*Math.PI, 2*Math.PI, true);
context.lideWidth = 5;
context.fillStyle = 'blue';
context.fill();
context.strokeStyle = 'blue';
context.stroke();
//StartCenterPurple
context.beginPath();
context.arc( 400, 300, 93.75+14.0635, 0*Math.PI, 2*Math.PI, true);
context.lineWidth = 10;
context.fillStyle = 'purple';
context.fill();
context.strokeStyle = 'purple';
context.stroke();
//Start "Head"
context.beginPath();
context.arc( 400, 200, 68.75+14.0635, 0*Math.PI, 2*Math.PI, true);
context.lideWidth = 5;
context.fillStyle = 'purple';
context.fill();
context.strokeStyle = 'purple';
context.stroke();
//Start "Arms"
context.beginPath();
context.arc ( 325, 265, 38.75+14.0635, 0*Math.PI, 2*Math.PI, true);
context.arc ( 475, 265, 38.75+14.0635, 0*Math.PI, 2*Math.PI, true);
context.lideWidth = 5;
context.fillStyle = 'purple';
context.fill();
context.strokeStyle = 'purple';
context.stroke();
//Start "Legs"
context.beginPath();
context.arc ( 335, 355, 38.75+14.0635, 0*Math.PI, 2*Math.PI, true);
context.arc ( 465, 355, 38.75+14.0635, 0*Math.PI, 2*Math.PI, true);
context.lideWidth = 5;
context.fillStyle = 'purple';
context.fill();
context.strokeStyle = 'purple';
context.stroke();
//StartCenterGreen
context.beginPath();
context.arc( 400, 300, 93.75, 0*Math.PI, 2*Math.PI, true);
context.lineWidth = 10;
context.fillStyle = 'green';
context.fill();
context.strokeStyle = 'green';
context.stroke();
//Start "Head"
context.beginPath();
context.arc( 400, 200, 68.75, 0*Math.PI, 2*Math.PI, true);
context.lideWidth = 5;
context.fillStyle = 'green';
context.fill();
context.strokeStyle = 'green';
context.stroke();
//Start "Arms"
context.beginPath();
context.arc ( 325, 265, 38.75, 0*Math.PI, 2*Math.PI, true);
context.arc ( 475, 265, 38.75, 0*Math.PI, 2*Math.PI, true);
context.lideWidth = 5;
context.fillStyle = 'green';
context.fill();
context.strokeStyle = 'green';
context.stroke();
//Start "Legs"
context.beginPath();
context.arc ( 335, 355, 38.75, 0*Math.PI, 2*Math.PI, true);
context.arc ( 465, 355, 38.75, 0*Math.PI, 2*Math.PI, true);
context.lideWidth = 5;
context.fillStyle = 'green';
context.fill();
context.strokeStyle = 'green';
context.stroke();
//StartCenter
context.beginPath();
context.arc( 400, 300, 75, 0*Math.PI, 2*Math.PI, true);
context.lineWidth = 10;
context.fillStyle = 'black';
context.fill();
context.strokeStyle = 'black';
context.stroke();
//Start "Head"
context.beginPath();
context.arc( 400, 200, 50, 0*Math.PI, 2*Math.PI, true);
context.lideWidth = 5;
context.fillStyle = 'black';
context.fill();
context.strokeStyle = 'black';
context.stroke();
//Start "Arms"
context.beginPath();
context.arc ( 325, 265, 20, 0*Math.PI, 2*Math.PI, true);
context.arc ( 475, 265, 20, 0*Math.PI, 2*Math.PI, true);
context.lideWidth = 5;
context.fillStyle = 'black';
context.fill();
context.strokeStyle = 'black';
context.stroke();
//Start "Legs"
context.beginPath();
context.arc ( 335, 355, 20, 0*Math.PI, 2*Math.PI, true);
context.arc ( 465, 355, 20, 0*Math.PI, 2*Math.PI, true);
context.lideWidth = 5;
context.fillStyle = 'black';
context.fill();
context.strokeStyle = 'black';
context.stroke();
/*#############################################################################
###############################################################################
######Following: Combined Template for Full Body#####
context.beginPath();
context.arc( 400, 300, 75, 0*Math.PI, 2*Math.PI, true);
context.lineWidth = 10;
context.arc( 400, 200, 50, 0*Math.PI, 2*Math.PI, true);
context.arc( 325, 265, 20, 0*Math.PI, 2*Math.PI, true);
context.arc( 475, 265, 20, 0*Math.PI, 2*Math.PI, true);
context.arc( 335, 355, 20, 0*Math.PI, 2*Math.PI, true);
context.arc( 465, 355, 20, 0*Math.PI, 2*Math.PI, true);
context.lideWidth = 5;
context.fillStyle = 'black';
context.fill();
context.strokeStyle = 'black';
context.stroke();
######Ideal Solution: Template + 15% in Radius of 'Body', 10 Times, solid base colors.
######Issues: Auto-Connect Lines, Impossible to do in one solid block?
######Following: Manual Input of Previous Set Up, split up into following subsections ((As read from bottom, up)) 1) Legs, 2) Arms, 3)Head, 4) Body. Definitions are abstract ONLY
###############################################################################
#############################################################################*/
};
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>