DR DOOM CODE BELOW~
<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
////////////////////////////////////// start here
/////CODE BY MEAGAN GLENNON!!!!
////////////////////// HOOD BACK
context.beginPath();
context.rect(0, 0, 600, 600);
context.fillStyle = "#77A145";
context.fill();
context.lineWidth = 5;
context.strokeStyle = "olive";
context.stroke();
///////////////////////////// MASK OUTLINE
context.beginPath();
context.moveTo(168.5,0);
context.lineTo(135.67,25);
context.lineTo(97,90.4);
context.lineTo(75.67,186);
context.lineTo(8.48,347);
context.lineTo(5,389);
context.lineTo(160,526);
context.lineTo(251,567.67);
context.lineTo(336.33,567.67);
context.lineTo(437,516);
context.lineTo(540,396);
context.lineTo(556,287.7);
context.lineTo(522.5,231);
context.lineTo(510,142);
context.lineTo(480,90.4);
context.lineTo(399,0);
context.lineWidth=5;
context.fill;
context.fill();
context.stroke();
context.closePath();
/// shadow
//left
context.beginPath();
context.moveTo(39.67,272.51);
context.lineTo(64.33,348.9);
context.lineTo(85.6,460);
context.lineTo(5,389);
context.lineTo(8.48,347);
context.lineTo(39.67,272.51);
context.lineWidth=5;
context.fill;
context.fill();
context.stroke;
context.stroke();
context.closePath();
//right
context.beginPath();
context.moveTo(536.8,260);
context.lineTo(512,348.9);
context.lineTo(491,448);
context.lineTo(540,396);
context.lineTo(556,287.7);
context.lineTo(536.8,260);
context.lineWidth=5;
context.fill;
context.fill();
context.stroke;
context.stroke();
context.closePath();
///////////////////////////////////////////////// EYES
////////////////////////////UNDER EYES
context.beginPath();
context.moveTo(81.25,190.67);
context.lineTo(214.75,246.4);
context.lineTo(255.75,180.42);
context.lineTo(95,95.7);
context.lineTo(81.25,190.67);
context.closePath();
context.lineWidth=5;
context.stroke;
context.fill;
context.fill();
context.stroke();
context.beginPath();
context.moveTo(315.9,180);
context.lineTo(361.95,246.4);
context.lineTo(490,180.42);
context.lineTo(483,95.7);
context.lineTo(315.9,180);
context.closePath();
context.lineWidth=5;
context.stroke;
context.fill;
context.fill();
context.stroke();
//bolts LEFT
context.beginPath();
context.arc(83.02, 205.67, 5, 0 , 2 * Math.PI, false);
context.lineWidth=5;
context.stroke
context.stroke();
context.closePath();
context.beginPath();
context.arc(108.66, 219, 5, 0 , 2 * Math.PI, false);
context.lineWidth=5;
context.stroke
context.stroke();
context.closePath();
context.beginPath();
context.arc(139, 229.7, 5, 0 , 2 * Math.PI, false);
context.lineWidth=5;
context.stroke
context.stroke();
context.closePath();
context.beginPath();
context.arc(164.33,240.87, 5, 0 , 2 * Math.PI, false);
context.lineWidth=5;
context.stroke
context.stroke();
context.closePath();
context.beginPath();
context.arc(189.27, 249.7, 5, 0 , 2 * Math.PI, false);
context.lineWidth=5;
context.stroke
context.stroke();
context.closePath();
//bolts RIGHT
context.beginPath();
context.arc(371.23, 253, 5, 0 , 2 * Math.PI, false);
context.lineWidth=5;
context.stroke
context.stroke();
context.closePath();
context.beginPath();
context.arc(399.63, 240.81, 5, 0 , 2 * Math.PI, false);
context.lineWidth=5;
context.stroke
context.stroke();
context.closePath();
context.beginPath();
context.arc(429.14, 229.7, 5, 0 , 2 * Math.PI, false);
context.lineWidth=5;
context.stroke
context.stroke();
context.closePath();
context.beginPath();
context.arc(454.34,219, 5, 0 , 2 * Math.PI, false);
context.lineWidth=5;
context.stroke
context.stroke();
context.closePath();
context.beginPath();
context.arc(482.18, 205, 5, 0 , 2 * Math.PI, false);
context.lineWidth=5;
context.stroke
context.stroke();
context.closePath();
/////////////////////// LEFT EYE
///black
context.beginPath();
context.moveTo(107,117);
context.lineTo(246,185);
context.lineTo(208,226);
context.lineTo(101.25,175.67);
context.lineTo(107.25,117.42);
context.lineWidth=1;
context.fill;
context.fill();
context.stroke();
context.closePath();
//white of eye
context.beginPath();
context.arc(186.33,170.54, 30,0 , 1.27 * Math.PI, false);
context.fill;
context.fill();
context.stroke;
context.stroke();
//iris
context.beginPath();
context.arc(187.75,168.67, 15,1.9*Math.PI , 1.47 * Math.PI, false);
context.fill;
context.fill();
context.stroke;
context.stroke();
//metal outline
context.beginPath();
context.moveTo(107,117);
context.lineTo(246,185);
context.lineTo(208,226);
context.lineTo(101.25,175.67);
context.lineTo(107.25,117.42);
context.lineWidth=5;
context.stroke;
context.stroke();
context.closePath();
/////////////////////RIGHT EYE
//black
context.beginPath();
context.moveTo(471.75,117);
context.lineTo(327.5,185);
context.lineTo(366,226);
context.lineTo(471.75,175.67);
context.lineTo(471.75,117.42);
context.lineWidth=1;
context.fill;
context.fill();
context.stroke();
context.closePath();
//white of eye
context.beginPath();
context.arc(383.91,170.54, 30,1.75*Math.PI , 1 * Math.PI, false);
context.fill;
context.fill();
context.stroke;
context.stroke();
//iris
context.beginPath();
context.arc(383.91,168.67, 15,1.6*Math.PI , 1.1 * Math.PI, false);
context.fill;
context.fill();
context.stroke;
context.stroke();
//metal outline
context.beginPath();
context.moveTo(471.75,117);
context.lineTo(327.5,185);
context.lineTo(366,226);
context.lineTo(471.75,175.67);
context.lineTo(471.75,117.42);
context.lineWidth=5;
context.stroke
context.stroke();
context.closePath();
//////////////////////////////MASK FOREHEAD
///EYEBROWS
//left
context.beginPath();
context.moveTo(97,90.4);
context.lineTo(261.67,172);
context.lineTo(275.7,147.7);
context.lineTo(130.33,34.03);
context.lineWidth=5;
context.stroke;
context.stroke();
//right
context.beginPath();
context.moveTo(480.33,90.4);
context.lineTo(314,172);
context.lineTo(307.6,147.7);
context.lineTo(433.9,34.03);
context.lineWidth=5;
context.stroke;
context.stroke();
///bolts left
context.beginPath();
context.arc(119, 71, 5, 0 , 2 * Math.PI, false);
context.lineWidth=5;
context.stroke
context.stroke();
context.closePath();
context.beginPath();
context.arc(149, 87.6, 5, 0 , 2 * Math.PI, false);
context.lineWidth=5;
context.stroke
context.stroke();
context.closePath();
context.beginPath();
context.arc(185, 109, 5, 0 , 2 * Math.PI, false);
context.lineWidth=5;
context.stroke
context.stroke();
context.closePath();
context.beginPath();
context.arc(222, 128, 5, 0 , 2 * Math.PI, false);
context.lineWidth=5;
context.stroke
context.stroke();
context.closePath();
//bolts right
context.beginPath();
context.arc(341.92, 138, 5, 0 , 2 * Math.PI, false);
context.lineWidth=5;
context.stroke
context.stroke();
context.closePath();
context.beginPath();
context.arc(372.67, 117, 5, 0 , 2 * Math.PI, false);
context.lineWidth=5;
context.stroke
context.stroke();
context.closePath();
context.beginPath();
context.arc(405.7, 92.9, 5, 0 , 2 * Math.PI, false);
context.lineWidth=5;
context.stroke;
context.stroke();
context.closePath();
context.beginPath();
context.arc(441.37, 70, 5, 0 , 2 * Math.PI, false);
context.lineWidth=5;
context.stroke;
context.stroke();
context.closePath();
//bolts top
context.beginPath();
context.arc(294, -30, 50, 0 , 2 * Math.PI, false);
context.lineWidth=5;
context.stroke;
context.stroke();
context.closePath();
context.beginPath();
context.arc(209.6, 5.7, 5, 0 , 2 * Math.PI, false);
context.lineWidth=5;
context.stroke;
context.stroke();
context.closePath();
context.beginPath();
context.arc(243, 32.5, 5, 0 , 2 * Math.PI, false);
context.lineWidth=5;
context.stroke;
context.stroke();
context.closePath();
context.beginPath();
context.arc(296.8, 42.62, 5, 0 , 2 * Math.PI, false);
context.lineWidth=5;
context.stroke;
context.stroke();
context.closePath();
context.beginPath();
context.arc(345.25, 32.5, 5, 0 , 2 * Math.PI, false);
context.lineWidth=5;
context.stroke;
context.stroke();
context.closePath();
context.beginPath();
context.arc(375.5, 5.7, 5, 0 , 2 * Math.PI, false);
context.lineWidth=5;
context.stroke;
context.stroke();
context.closePath();
/////////////////////////// NOSE
//darkside
context.beginPath();
context.moveTo(290.72,170.54);
context.lineTo(227.88,303,47);
context.lineTo(294.91,348.9);
context.lineTo(292.91,170.54);
context.lineTo(290.72,170.54);
context.lineWidth=5;
context.fill;
context.fill();
context.stroke;
context.closePath();
context.stroke();
//normalside
context.beginPath();
context.moveTo(294.9,170.54);
context.lineTo(361.95,303,47);
context.lineTo(294.91,348.9);
context.lineTo(292.91,170.54);
context.lineTo(294.9,170.54);
context.lineWidth=5;
context.stroke;
context.closePath();
context.stroke();
///////////////////////////////////CHEEKS
context.beginPath();
context.moveTo(49.85,248.13);
context.lineTo(108.33,339);
context.lineTo(117,461);
context.lineTo(151.6,508);
context.lineTo(154.6,521);
context.lineWidth=5;
context.stroke
context.stroke();
context.beginPath();
context.moveTo(523,237.7);
context.lineTo(467.22,339);
context.lineTo(458.5,461);
context.lineTo(423.9,508);
context.lineTo(420.9,522);
context.lineWidth=5;
context.stroke
context.stroke();
// MOUTH OUTLINES
//left
context.beginPath();
context.moveTo( 238.16,281.67);
context.lineTo(167,328);
context.lineTo(151.75,416.9);
context.lineTo(117,450);
context.lineWidth=5;
context.stroke
context.stroke();
//right
context.beginPath();
context.moveTo( 350,281.67);
context.lineTo(415,328);
context.lineTo(428.5,416.9);
context.lineTo(460.5,450);
context.lineWidth=5;
context.stroke
context.stroke();
//overbite
context.beginPath();
context.moveTo(151.67,508.3);
context.lineTo(215,391);
context.lineTo(373.6,391);
context.lineTo(425,503.5);
context.lineWidth=5;
context.stroke
context.stroke();
//lip
context.beginPath();
context.moveTo(185,450);
context.lineTo(227.8,487);
context.lineTo(359.7,487);
context.lineTo(403,450);
context.lineWidth=5;
context.stroke
context.stroke();
context.beginPath();
context.moveTo(191,439);
context.lineTo(227.8,468.7);
context.lineTo(359.7,468.7);
context.lineTo(398,439);
context.lineWidth=5;
context.stroke
context.stroke();
//chin piece
context.beginPath();
context.moveTo(212,549.98);
context.lineTo(234.33,523);
context.lineTo(361.95,523);
context.lineTo(380.7,545.05);
context.lineWidth=5;
context.stroke;
context.stroke();
//grill
context.beginPath();
context.moveTo(239.7,393);
context.lineTo(239.75,467);
context.lineWidth=5;
context.stroke;
context.stroke();
context.beginPath();
context.moveTo(259.7,393);
context.lineTo(259.75,467);
context.lineWidth=5;
context.stroke;
context.stroke();
context.beginPath();
context.moveTo(279.7,393);
context.lineTo(279.75,467);
context.lineWidth=5;
context.stroke;
context.stroke();
context.beginPath();
context.moveTo(219.7,393);
context.lineTo(219.75,463);
context.lineWidth=5;
context.stroke;
context.stroke();
context.beginPath();
context.moveTo(299.7,393);
context.lineTo(299.75,467);
context.lineWidth=5;
context.stroke;
context.stroke();
context.beginPath();
context.moveTo(319.7,393);
context.lineTo(319.75,467);
context.lineWidth=5;
context.stroke;
context.stroke();
context.beginPath();
context.moveTo(339.7,393);
context.lineTo(339.75,467);
context.lineWidth=5;
context.stroke;
context.stroke();
context.beginPath();
context.moveTo(359.7,393);
context.lineTo(359.75,467);
context.lineWidth=5;
context.stroke;
context.stroke();
//mouthpiece
context.beginPath();
context.moveTo(219,391);
context.lineTo(212,403);
context.lineTo(227.8,422);
context.lineTo(212,456.5);
context.lineTo(226.5,468);
context.lineTo(239.7,434.6);
context.lineTo(348,434.6);
context.lineTo(365.7,464);
context.lineTo(380,453.5);
context.lineTo(365.8,422);
context.lineTo(377,403);
context.lineTo(373.6,391);
context.lineTo(361.95,391);
context.lineTo(345.25,413.67);
context.lineTo(239.7,413.67);
context.lineTo(227.88,391);
context.lineTo(219,391);
context.lineWidth=5;
context.stroke
context.fill
context.fill();
context.closePath();
context.stroke();
//////mouth bolts
context.beginPath();
context.arc(154, 456, 5, 0 , 2 * Math.PI, false);
context.lineWidth=5;
context.stroke
context.stroke();
context.closePath();
context.beginPath();
context.arc(179, 409, 5, 0 , 2 * Math.PI, false);
context.lineWidth=5;
context.stroke
context.stroke();
context.closePath();
context.beginPath();
context.arc(213.7, 376, 5, 0 , 2 * Math.PI, false);
context.lineWidth=5;
context.stroke;
context.stroke();
context.closePath();
context.beginPath();
context.arc(255.7, 376, 5, 0 , 2 * Math.PI, false);
context.lineWidth=5;
context.stroke;
context.stroke();
context.closePath();
context.beginPath();
context.arc(293.7, 376, 5, 0 , 2 * Math.PI, false);
context.lineWidth=5;
context.stroke;
context.stroke();
context.closePath();
context.beginPath();
context.arc(334.5, 376, 5, 0 , 2 * Math.PI, false);
context.lineWidth=5;
context.stroke;
context.stroke();
context.closePath();
context.beginPath();
context.arc(378, 376, 5, 0 , 2 * Math.PI, false);
context.lineWidth=5;
context.stroke;
context.stroke();
context.closePath();
context.beginPath();
context.arc(406, 409, 5, 0 , 2 * Math.PI, false);
context.lineWidth=5;
context.stroke;
context.stroke();
context.closePath();
context.beginPath();
context.arc(427.5, 456, 5, 0 , 2 * Math.PI, false);
context.lineWidth=5;
context.stroke;
context.stroke();
context.closePath();
//chin bolts
context.beginPath();
context.arc(191.5, 524.7, 5, 0 , 2 * Math.PI, false);
context.lineWidth=5;
context.stroke;
context.stroke();
context.closePath();
context.beginPath();
context.arc(388.5, 524.7, 5, 0 , 2 * Math.PI, false);
context.lineWidth=5;
context.stroke;
context.stroke();
context.closePath();
context.beginPath();
context.arc(260, 550.8, 5, 0 , 2 * Math.PI, false);
context.lineWidth=5;
context.stroke;
context.stroke();
context.closePath();
context.beginPath();
context.arc(326.5, 550.8, 5, 0 , 2 * Math.PI, false);
context.lineWidth=5;
context.stroke;
context.stroke();
context.closePath();
/////////////HOOD OUTLINE
context.beginPath();
context.moveTo(168.5,0);
context.lineTo(135.67,25);
context.lineTo(97,90.4);
context.lineTo(75.67,186);
context.lineTo(8.48,347);
context.lineTo(5,389);
context.lineTo(160,526);
context.lineTo(251,567.67);
context.lineTo(336.33,567.67);
context.lineTo(437,516);
context.lineTo(540,396);
context.lineTo(556,287.7);
context.lineTo(522.5,231);
context.lineTo(510,142);
context.lineTo(480,90.4);
context.lineTo(399,0);
context.lineWidth=5;
context.stroke;
context.stroke();
context.closePath();
////////////////////////////////////// end here
//////////CODE BY MEAGAN GLENNON FOOLS!!!!
};
</script>
</head>
<body>
<canvas id="myCanvas" width="600" height="600"></canvas>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
////////////////////////////////////// start here
/////CODE BY MEAGAN GLENNON!!!!
////////////////////// HOOD BACK
context.beginPath();
context.rect(0, 0, 600, 600);
context.fillStyle = "#77A145";
context.fill();
context.lineWidth = 5;
context.strokeStyle = "olive";
context.stroke();
///////////////////////////// MASK OUTLINE
context.beginPath();
context.moveTo(168.5,0);
context.lineTo(135.67,25);
context.lineTo(97,90.4);
context.lineTo(75.67,186);
context.lineTo(8.48,347);
context.lineTo(5,389);
context.lineTo(160,526);
context.lineTo(251,567.67);
context.lineTo(336.33,567.67);
context.lineTo(437,516);
context.lineTo(540,396);
context.lineTo(556,287.7);
context.lineTo(522.5,231);
context.lineTo(510,142);
context.lineTo(480,90.4);
context.lineTo(399,0);
context.lineWidth=5;
context.fill;
context.fill();
context.stroke();
context.closePath();
/// shadow
//left
context.beginPath();
context.moveTo(39.67,272.51);
context.lineTo(64.33,348.9);
context.lineTo(85.6,460);
context.lineTo(5,389);
context.lineTo(8.48,347);
context.lineTo(39.67,272.51);
context.lineWidth=5;
context.fill;
context.fill();
context.stroke;
context.stroke();
context.closePath();
//right
context.beginPath();
context.moveTo(536.8,260);
context.lineTo(512,348.9);
context.lineTo(491,448);
context.lineTo(540,396);
context.lineTo(556,287.7);
context.lineTo(536.8,260);
context.lineWidth=5;
context.fill;
context.fill();
context.stroke;
context.stroke();
context.closePath();
///////////////////////////////////////////////// EYES
////////////////////////////UNDER EYES
context.beginPath();
context.moveTo(81.25,190.67);
context.lineTo(214.75,246.4);
context.lineTo(255.75,180.42);
context.lineTo(95,95.7);
context.lineTo(81.25,190.67);
context.closePath();
context.lineWidth=5;
context.stroke;
context.fill;
context.fill();
context.stroke();
context.beginPath();
context.moveTo(315.9,180);
context.lineTo(361.95,246.4);
context.lineTo(490,180.42);
context.lineTo(483,95.7);
context.lineTo(315.9,180);
context.closePath();
context.lineWidth=5;
context.stroke;
context.fill;
context.fill();
context.stroke();
//bolts LEFT
context.beginPath();
context.arc(83.02, 205.67, 5, 0 , 2 * Math.PI, false);
context.lineWidth=5;
context.stroke
context.stroke();
context.closePath();
context.beginPath();
context.arc(108.66, 219, 5, 0 , 2 * Math.PI, false);
context.lineWidth=5;
context.stroke
context.stroke();
context.closePath();
context.beginPath();
context.arc(139, 229.7, 5, 0 , 2 * Math.PI, false);
context.lineWidth=5;
context.stroke
context.stroke();
context.closePath();
context.beginPath();
context.arc(164.33,240.87, 5, 0 , 2 * Math.PI, false);
context.lineWidth=5;
context.stroke
context.stroke();
context.closePath();
context.beginPath();
context.arc(189.27, 249.7, 5, 0 , 2 * Math.PI, false);
context.lineWidth=5;
context.stroke
context.stroke();
context.closePath();
//bolts RIGHT
context.beginPath();
context.arc(371.23, 253, 5, 0 , 2 * Math.PI, false);
context.lineWidth=5;
context.stroke
context.stroke();
context.closePath();
context.beginPath();
context.arc(399.63, 240.81, 5, 0 , 2 * Math.PI, false);
context.lineWidth=5;
context.stroke
context.stroke();
context.closePath();
context.beginPath();
context.arc(429.14, 229.7, 5, 0 , 2 * Math.PI, false);
context.lineWidth=5;
context.stroke
context.stroke();
context.closePath();
context.beginPath();
context.arc(454.34,219, 5, 0 , 2 * Math.PI, false);
context.lineWidth=5;
context.stroke
context.stroke();
context.closePath();
context.beginPath();
context.arc(482.18, 205, 5, 0 , 2 * Math.PI, false);
context.lineWidth=5;
context.stroke
context.stroke();
context.closePath();
/////////////////////// LEFT EYE
///black
context.beginPath();
context.moveTo(107,117);
context.lineTo(246,185);
context.lineTo(208,226);
context.lineTo(101.25,175.67);
context.lineTo(107.25,117.42);
context.lineWidth=1;
context.fill;
context.fill();
context.stroke();
context.closePath();
//white of eye
context.beginPath();
context.arc(186.33,170.54, 30,0 , 1.27 * Math.PI, false);
context.fill;
context.fill();
context.stroke;
context.stroke();
//iris
context.beginPath();
context.arc(187.75,168.67, 15,1.9*Math.PI , 1.47 * Math.PI, false);
context.fill;
context.fill();
context.stroke;
context.stroke();
//metal outline
context.beginPath();
context.moveTo(107,117);
context.lineTo(246,185);
context.lineTo(208,226);
context.lineTo(101.25,175.67);
context.lineTo(107.25,117.42);
context.lineWidth=5;
context.stroke;
context.stroke();
context.closePath();
/////////////////////RIGHT EYE
//black
context.beginPath();
context.moveTo(471.75,117);
context.lineTo(327.5,185);
context.lineTo(366,226);
context.lineTo(471.75,175.67);
context.lineTo(471.75,117.42);
context.lineWidth=1;
context.fill;
context.fill();
context.stroke();
context.closePath();
//white of eye
context.beginPath();
context.arc(383.91,170.54, 30,1.75*Math.PI , 1 * Math.PI, false);
context.fill;
context.fill();
context.stroke;
context.stroke();
//iris
context.beginPath();
context.arc(383.91,168.67, 15,1.6*Math.PI , 1.1 * Math.PI, false);
context.fill;
context.fill();
context.stroke;
context.stroke();
//metal outline
context.beginPath();
context.moveTo(471.75,117);
context.lineTo(327.5,185);
context.lineTo(366,226);
context.lineTo(471.75,175.67);
context.lineTo(471.75,117.42);
context.lineWidth=5;
context.stroke
context.stroke();
context.closePath();
//////////////////////////////MASK FOREHEAD
///EYEBROWS
//left
context.beginPath();
context.moveTo(97,90.4);
context.lineTo(261.67,172);
context.lineTo(275.7,147.7);
context.lineTo(130.33,34.03);
context.lineWidth=5;
context.stroke;
context.stroke();
//right
context.beginPath();
context.moveTo(480.33,90.4);
context.lineTo(314,172);
context.lineTo(307.6,147.7);
context.lineTo(433.9,34.03);
context.lineWidth=5;
context.stroke;
context.stroke();
///bolts left
context.beginPath();
context.arc(119, 71, 5, 0 , 2 * Math.PI, false);
context.lineWidth=5;
context.stroke
context.stroke();
context.closePath();
context.beginPath();
context.arc(149, 87.6, 5, 0 , 2 * Math.PI, false);
context.lineWidth=5;
context.stroke
context.stroke();
context.closePath();
context.beginPath();
context.arc(185, 109, 5, 0 , 2 * Math.PI, false);
context.lineWidth=5;
context.stroke
context.stroke();
context.closePath();
context.beginPath();
context.arc(222, 128, 5, 0 , 2 * Math.PI, false);
context.lineWidth=5;
context.stroke
context.stroke();
context.closePath();
//bolts right
context.beginPath();
context.arc(341.92, 138, 5, 0 , 2 * Math.PI, false);
context.lineWidth=5;
context.stroke
context.stroke();
context.closePath();
context.beginPath();
context.arc(372.67, 117, 5, 0 , 2 * Math.PI, false);
context.lineWidth=5;
context.stroke
context.stroke();
context.closePath();
context.beginPath();
context.arc(405.7, 92.9, 5, 0 , 2 * Math.PI, false);
context.lineWidth=5;
context.stroke;
context.stroke();
context.closePath();
context.beginPath();
context.arc(441.37, 70, 5, 0 , 2 * Math.PI, false);
context.lineWidth=5;
context.stroke;
context.stroke();
context.closePath();
//bolts top
context.beginPath();
context.arc(294, -30, 50, 0 , 2 * Math.PI, false);
context.lineWidth=5;
context.stroke;
context.stroke();
context.closePath();
context.beginPath();
context.arc(209.6, 5.7, 5, 0 , 2 * Math.PI, false);
context.lineWidth=5;
context.stroke;
context.stroke();
context.closePath();
context.beginPath();
context.arc(243, 32.5, 5, 0 , 2 * Math.PI, false);
context.lineWidth=5;
context.stroke;
context.stroke();
context.closePath();
context.beginPath();
context.arc(296.8, 42.62, 5, 0 , 2 * Math.PI, false);
context.lineWidth=5;
context.stroke;
context.stroke();
context.closePath();
context.beginPath();
context.arc(345.25, 32.5, 5, 0 , 2 * Math.PI, false);
context.lineWidth=5;
context.stroke;
context.stroke();
context.closePath();
context.beginPath();
context.arc(375.5, 5.7, 5, 0 , 2 * Math.PI, false);
context.lineWidth=5;
context.stroke;
context.stroke();
context.closePath();
/////////////////////////// NOSE
//darkside
context.beginPath();
context.moveTo(290.72,170.54);
context.lineTo(227.88,303,47);
context.lineTo(294.91,348.9);
context.lineTo(292.91,170.54);
context.lineTo(290.72,170.54);
context.lineWidth=5;
context.fill;
context.fill();
context.stroke;
context.closePath();
context.stroke();
//normalside
context.beginPath();
context.moveTo(294.9,170.54);
context.lineTo(361.95,303,47);
context.lineTo(294.91,348.9);
context.lineTo(292.91,170.54);
context.lineTo(294.9,170.54);
context.lineWidth=5;
context.stroke;
context.closePath();
context.stroke();
///////////////////////////////////CHEEKS
context.beginPath();
context.moveTo(49.85,248.13);
context.lineTo(108.33,339);
context.lineTo(117,461);
context.lineTo(151.6,508);
context.lineTo(154.6,521);
context.lineWidth=5;
context.stroke
context.stroke();
context.beginPath();
context.moveTo(523,237.7);
context.lineTo(467.22,339);
context.lineTo(458.5,461);
context.lineTo(423.9,508);
context.lineTo(420.9,522);
context.lineWidth=5;
context.stroke
context.stroke();
// MOUTH OUTLINES
//left
context.beginPath();
context.moveTo( 238.16,281.67);
context.lineTo(167,328);
context.lineTo(151.75,416.9);
context.lineTo(117,450);
context.lineWidth=5;
context.stroke
context.stroke();
//right
context.beginPath();
context.moveTo( 350,281.67);
context.lineTo(415,328);
context.lineTo(428.5,416.9);
context.lineTo(460.5,450);
context.lineWidth=5;
context.stroke
context.stroke();
//overbite
context.beginPath();
context.moveTo(151.67,508.3);
context.lineTo(215,391);
context.lineTo(373.6,391);
context.lineTo(425,503.5);
context.lineWidth=5;
context.stroke
context.stroke();
//lip
context.beginPath();
context.moveTo(185,450);
context.lineTo(227.8,487);
context.lineTo(359.7,487);
context.lineTo(403,450);
context.lineWidth=5;
context.stroke
context.stroke();
context.beginPath();
context.moveTo(191,439);
context.lineTo(227.8,468.7);
context.lineTo(359.7,468.7);
context.lineTo(398,439);
context.lineWidth=5;
context.stroke
context.stroke();
//chin piece
context.beginPath();
context.moveTo(212,549.98);
context.lineTo(234.33,523);
context.lineTo(361.95,523);
context.lineTo(380.7,545.05);
context.lineWidth=5;
context.stroke;
context.stroke();
//grill
context.beginPath();
context.moveTo(239.7,393);
context.lineTo(239.75,467);
context.lineWidth=5;
context.stroke;
context.stroke();
context.beginPath();
context.moveTo(259.7,393);
context.lineTo(259.75,467);
context.lineWidth=5;
context.stroke;
context.stroke();
context.beginPath();
context.moveTo(279.7,393);
context.lineTo(279.75,467);
context.lineWidth=5;
context.stroke;
context.stroke();
context.beginPath();
context.moveTo(219.7,393);
context.lineTo(219.75,463);
context.lineWidth=5;
context.stroke;
context.stroke();
context.beginPath();
context.moveTo(299.7,393);
context.lineTo(299.75,467);
context.lineWidth=5;
context.stroke;
context.stroke();
context.beginPath();
context.moveTo(319.7,393);
context.lineTo(319.75,467);
context.lineWidth=5;
context.stroke;
context.stroke();
context.beginPath();
context.moveTo(339.7,393);
context.lineTo(339.75,467);
context.lineWidth=5;
context.stroke;
context.stroke();
context.beginPath();
context.moveTo(359.7,393);
context.lineTo(359.75,467);
context.lineWidth=5;
context.stroke;
context.stroke();
//mouthpiece
context.beginPath();
context.moveTo(219,391);
context.lineTo(212,403);
context.lineTo(227.8,422);
context.lineTo(212,456.5);
context.lineTo(226.5,468);
context.lineTo(239.7,434.6);
context.lineTo(348,434.6);
context.lineTo(365.7,464);
context.lineTo(380,453.5);
context.lineTo(365.8,422);
context.lineTo(377,403);
context.lineTo(373.6,391);
context.lineTo(361.95,391);
context.lineTo(345.25,413.67);
context.lineTo(239.7,413.67);
context.lineTo(227.88,391);
context.lineTo(219,391);
context.lineWidth=5;
context.stroke
context.fill
context.fill();
context.closePath();
context.stroke();
//////mouth bolts
context.beginPath();
context.arc(154, 456, 5, 0 , 2 * Math.PI, false);
context.lineWidth=5;
context.stroke
context.stroke();
context.closePath();
context.beginPath();
context.arc(179, 409, 5, 0 , 2 * Math.PI, false);
context.lineWidth=5;
context.stroke
context.stroke();
context.closePath();
context.beginPath();
context.arc(213.7, 376, 5, 0 , 2 * Math.PI, false);
context.lineWidth=5;
context.stroke;
context.stroke();
context.closePath();
context.beginPath();
context.arc(255.7, 376, 5, 0 , 2 * Math.PI, false);
context.lineWidth=5;
context.stroke;
context.stroke();
context.closePath();
context.beginPath();
context.arc(293.7, 376, 5, 0 , 2 * Math.PI, false);
context.lineWidth=5;
context.stroke;
context.stroke();
context.closePath();
context.beginPath();
context.arc(334.5, 376, 5, 0 , 2 * Math.PI, false);
context.lineWidth=5;
context.stroke;
context.stroke();
context.closePath();
context.beginPath();
context.arc(378, 376, 5, 0 , 2 * Math.PI, false);
context.lineWidth=5;
context.stroke;
context.stroke();
context.closePath();
context.beginPath();
context.arc(406, 409, 5, 0 , 2 * Math.PI, false);
context.lineWidth=5;
context.stroke;
context.stroke();
context.closePath();
context.beginPath();
context.arc(427.5, 456, 5, 0 , 2 * Math.PI, false);
context.lineWidth=5;
context.stroke;
context.stroke();
context.closePath();
//chin bolts
context.beginPath();
context.arc(191.5, 524.7, 5, 0 , 2 * Math.PI, false);
context.lineWidth=5;
context.stroke;
context.stroke();
context.closePath();
context.beginPath();
context.arc(388.5, 524.7, 5, 0 , 2 * Math.PI, false);
context.lineWidth=5;
context.stroke;
context.stroke();
context.closePath();
context.beginPath();
context.arc(260, 550.8, 5, 0 , 2 * Math.PI, false);
context.lineWidth=5;
context.stroke;
context.stroke();
context.closePath();
context.beginPath();
context.arc(326.5, 550.8, 5, 0 , 2 * Math.PI, false);
context.lineWidth=5;
context.stroke;
context.stroke();
context.closePath();
/////////////HOOD OUTLINE
context.beginPath();
context.moveTo(168.5,0);
context.lineTo(135.67,25);
context.lineTo(97,90.4);
context.lineTo(75.67,186);
context.lineTo(8.48,347);
context.lineTo(5,389);
context.lineTo(160,526);
context.lineTo(251,567.67);
context.lineTo(336.33,567.67);
context.lineTo(437,516);
context.lineTo(540,396);
context.lineTo(556,287.7);
context.lineTo(522.5,231);
context.lineTo(510,142);
context.lineTo(480,90.4);
context.lineTo(399,0);
context.lineWidth=5;
context.stroke;
context.stroke();
context.closePath();
////////////////////////////////////// end here
//////////CODE BY MEAGAN GLENNON FOOLS!!!!
};
</script>
</head>
<body>
<canvas id="myCanvas" width="600" height="600"></canvas>
</body>
</html>
TALI'S HOOD CODE!
<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
/////CODE BY MEAGAN GLENNON!!!!
////////////////////////////////////// start here
//////////////BACKGROUND THINGS GO HERE~ ;D
context.beginPath();
context.rect(0,0,canvas.width,canvas.height);
var grd = context.createRadialGradient(238, 300, 100, 238, 300, 550);
grd.addColorStop(0, "#e4b694"); //pastel orange
grd.addColorStop(0.5, "#877082"); // pastel purple
grd.addColorStop(0.7,"#524850"); //dark purple saturated
grd.addColorStop(1,"black");
context.fillStyle = grd;
context.fill();
//////////stars
/*
var x = 100
var y = 50
var r1 =1
var r2=8
var r3 = 10
context.beginPath();
context.arc(x, y, r3, 0, 2 * Math.PI, false);
var grd = context.createRadialGradient(x, y, r1, x, y, r2);
grd.addColorStop(0, "white");
grd.addColorStop(1,"transparent");
context.fillStyle = grd;
context.fill();
context.beginPath();
context.arc(x, y, r3, 0, 2 * Math.PI, false);
var grd = context.createRadialGradient(50, 30, 1, 50, 30, 8);
grd.addColorStop(0, "white");
grd.addColorStop(1,"transparent");
context.fillStyle = grd;
context.fill();
context.beginPath();
context.rect(0,0,canvas.width,canvas.height);
var grd = context.createRadialGradient(70, 20, .5, 70, 20, 5);
grd.addColorStop(0, "white");
grd.addColorStop(1,"transparent");
context.fillStyle = grd;
context.fill();
context.beginPath();
context.rect(0,0,canvas.width,canvas.height);
var grd = context.createRadialGradient(40, 90, .5, 40, 90, 5);
grd.addColorStop(0, "white");
grd.addColorStop(1,"transparent");
context.fillStyle = grd;
context.fill();
context.beginPath();
context.rect(0,0,canvas.width,canvas.height);
var grd = context.createRadialGradient(45, 95, .2, 45, 95, 2);
grd.addColorStop(0, "white");
grd.addColorStop(1,"transparent");
context.fillStyle = grd;
context.fill();
context.beginPath();
context.rect(0,0,canvas.width,canvas.height);
var grd = context.createRadialGradient(590, 150, .5, 590, 150, 5);
grd.addColorStop(0, "white");
grd.addColorStop(1,"transparent");
context.fillStyle = grd;
context.fill();
context.beginPath();
context.rect(0,0,canvas.width,canvas.height);
var grd = context.createRadialGradient(600,50, .5, 600, 50, 5);
grd.addColorStop(0, "white");
grd.addColorStop(1,"transparent");
context.fillStyle = grd;
context.fill();
context.beginPath();
context.rect(0,0,canvas.width,canvas.height);
var grd = context.createRadialGradient(640, 30, .5, 640, 30, 5);
grd.addColorStop(0, "white");
grd.addColorStop(1,"transparent");
context.fillStyle = grd;
context.fill();
context.beginPath();
context.rect(0,0,canvas.width,canvas.height);
var grd = context.createRadialGradient(30, 40, .5, 30, 40, 3);
grd.addColorStop(0, "white");
grd.addColorStop(1,"transparent");
context.fillStyle = grd;
context.fill();
context.beginPath();
context.rect(0,0,canvas.width,canvas.height);
var grd = context.createRadialGradient(20, 20, .5, 20, 20, 5);
grd.addColorStop(0, "white");
grd.addColorStop(1,"transparent");
context.fillStyle = grd;
context.fill();
context.beginPath();
context.rect(0,0,canvas.width,canvas.height);
var grd = context.createRadialGradient(595, 70, 1, 595, 70, 8);
grd.addColorStop(0, "white");
grd.addColorStop(1,"transparent");
context.fillStyle = grd;
context.fill();
context.beginPath();
context.rect(0,0,canvas.width,canvas.height);
var grd = context.createRadialGradient(610, 20, .5, 610, 20, 5);
grd.addColorStop(0, "white");
grd.addColorStop(1,"transparent");
context.fillStyle = grd;
context.fill();
context.beginPath();
context.rect(0,0,canvas.width,canvas.height);
var grd = context.createRadialGradient(620, 10, .3, 620, 10, 3);
grd.addColorStop(0, "white");
grd.addColorStop(1,"transparent");
context.fillStyle = grd;
context.fill();
context.beginPath();
context.rect(0,0,canvas.width,canvas.height);
var grd = context.createRadialGradient(580, 40, 1,580, 40, 10);
grd.addColorStop(0, "white");
grd.addColorStop(1,"transparent");
context.fillStyle = grd;
context.fill();
context.beginPath();
context.rect(0,0,canvas.width,canvas.height);
var grd = context.createRadialGradient(70, 150, .5, 70, 150, 5);
grd.addColorStop(0, "white");
grd.addColorStop(1,"transparent");
context.fillStyle = grd;
context.fill();
*/
/////// INNER HOOD TOP
context.beginPath();
context.moveTo(230,73);
context.bezierCurveTo(162,48,110,168,110,190);
context.quadraticCurveTo(120,340,128,350);
context.lineTo(141,360);
context.lineTo(230,73);
context.closePath();
var grd = context.createLinearGradient(238, 62, 72, 216);
grd.addColorStop(0, "black");
grd.addColorStop(1,"#313550"); //hood shade color
context.fillStyle = grd;
context.fill();
////////// HELMET BEGIN
///GLASS
context.beginPath();
context.moveTo(255,64);
context.quadraticCurveTo(95,75,134,336);
context.lineTo(260,340);
context.quadraticCurveTo(370,200,357,156);
context.quadraticCurveTo(336,100,255,64);
context.closePath();
var grd = context.createRadialGradient(350, 252, 70, 350, 252, 250);
grd.addColorStop(0, "#e697ed");
grd.addColorStop(0.5, "#b457c2");
grd.addColorStop(0.8,"#3b2b48");
grd.addColorStop(1,"#fdfdfd");
context.fill;
context.fill();
////// glass shine
context.beginPath();
context.moveTo(274,88);
context.bezierCurveTo(252,108,266,132,298,115);
context.fill;
context.fill();
context.beginPath();
context.moveTo(248,190);
context.bezierCurveTo(219,204,228,290,234,293);
context.bezierCurveTo(265,263,252,192,248,190);
context.fill;
context.fill();
context.beginPath();
context.moveTo(163,162);
context.quadraticCurveTo(125,240,153,320);
context.lineTo(168,315);
context.quadraticCurveTo(156,204,165,184);
context.quadraticCurveTo(169,156,163,162);
context.fill;
context.fill();
///////////////// NECK PIECE PART 1
////BLACK
context.beginPath();
context.moveTo(372,367);
context.lineTo(372,482);
context.lineTo(299,497);
context.quadraticCurveTo(301,638,271,668);
context.quadraticCurveTo(255,675,271,682);
context.lineTo(288,686);
context.lineTo(258,703);
context.lineTo(236,709);
context.lineTo(229,597);
context.lineTo(183,455);
context.quadraticCurveTo(183,435,178,427);
context.lineTo(136,362);
context.bezierCurveTo(132,327,193,301,230,334)
context.lineTo(247,424);
context.lineTo(372,367);
context.fill;
context.fill();
context.beginPath();
context.moveTo(231,670);
context.lineTo(304,676);
context.lineTo(481,805);
context.lineTo(145,805);
context.lineTo(231,670);
context.fill;
context.fill();
////// GOLD NECK PIECE
context.beginPath();
context.moveTo(297,476);
context.lineTo(359,454);
context.lineTo(359,501);
context.quadraticCurveTo(312,504,300,514);
context.lineTo(297,476);
context.closePath();
var grd = context.createLinearGradient(324, 516, 324, 480);
grd.addColorStop(0, "#c6bd7e");
grd.addColorStop(1,"black");
context.fill;
context.fill();
context.lineWidth=5;
context.stroke;
context.stroke();
context.beginPath();
context.moveTo(359,501);
context.quadraticCurveTo(312,504,300,514);
context.quadraticCurveTo(303,549,298,572);
context.quadraticCurveTo(325,574,338,562);
context.closePath();
var grd = context.createLinearGradient(324, 540, 324, 500);
grd.addColorStop(0, "#c6bd7e"); //gold
grd.addColorStop(1,"black");
context.fill;
context.fill();
context.lineWidth=5;
context.stroke;
context.stroke();
context.beginPath();
context.moveTo(338,562);
context.quadraticCurveTo(303,580,298,572);
context.quadraticCurveTo(297,620,287,624);
context.quadraticCurveTo(288,636,314,630);
context.closePath();
var grd = context.createLinearGradient(324, 600, 324, 550);
grd.addColorStop(0, "#c6bd7e"); //gold
grd.addColorStop(1,"black");
context.fill;
context.fill();
context.lineWidth=5;
context.stroke;
context.stroke();
context.beginPath();
context.moveTo(314,630);
context.quadraticCurveTo(288,636,287,623);
context.quadraticCurveTo(276,672,265,670);
context.quadraticCurveTo(262,694,294,686);
context.closePath();
var grd = context.createLinearGradient(324, 670, 324, 590);
grd.addColorStop(0, "#c6bd7e"); //gold
grd.addColorStop(1,"black");
context.fill;
context.fill();
context.lineWidth=5;
context.stroke;
context.stroke();
context.beginPath();
context.moveTo(200,745);
context.lineTo(195,762);
context.bezierCurveTo(192,795,248,797,277,760);
context.lineTo(279,739);
context.closePath();
var grd = context.createLinearGradient(324, 790, 324, 760);
grd.addColorStop(0, "#c6bd7e"); //gold
grd.addColorStop(1,"black");
context.fill;
context.fill();
context.lineWidth=5;
context.stroke;
context.stroke();
////left shoulder
context.beginPath();
context.moveTo(220,647);
context.quadraticCurveTo(214,683,191,710);
context.bezierCurveTo(168,740,145,772,143,801);
context.quadraticCurveTo( 204,776,217,744);
context.bezierCurveTo(230,716,227,660,220,647);
var grd = context.createLinearGradient(416, 554, 496, 700);
grd.addColorStop(0, "#8376b9"); //main hood highlight color
grd.addColorStop(0.5, "#14173a"); //main hood color
grd.addColorStop(1,"#080c25"); //main hood shade color
context.fill;
context.fill();
////HOOD BORDER INSIDE
context.beginPath();
context.moveTo(169,456);
context.quadraticCurveTo(216,574,223,704);
context.lineTo(231,710);
context.lineTo(237,708);
context.quadraticCurveTo(245,557,187,451);
context.closePath();
var grd = context.createLinearGradient(180, 430, 232, 690);
grd.addColorStop(0, "#313550"); //hood border shade
grd.addColorStop(1,"#4d579e"); /// hood border color
context.fill;
context.fill();
//////////////////HELMET FRAME mouth
///left piece
context.beginPath();
context.moveTo(149,361);
context.lineTo(130,362);
context.lineTo(163,464);
context.lineTo(212,443);
context.lineTo(149,361);
context.closePath();
var grd = context.createLinearGradient(156, 460, 192, 420);
grd.addColorStop(0, "#474950");
grd.addColorStop(1,"black");
context.fill;
context.fill();
context.beginPath();
context.moveTo(131,362);
context.lineTo(164,464);
context.lineTo(152,468);
context.lineTo(116,368);
context.lineTo(130,362);
context.closePath();
var grd = context.createLinearGradient(156, 440, 200, 410);
grd.addColorStop(0, "#474950");
grd.addColorStop(1,"#6f779c");
context.fill;
context.fill();
context.beginPath();
context.moveTo(143,443);
context.lineTo(154,438);
context.lineTo(172,430);
context.stroke;
context.lineWidth=1;
context.stroke();
//// MOUTH PIECE/SPEAKER
////////////CODE BY MEAGAN GLENNON!
///top
context.beginPath();
context.moveTo(129,363);
context.lineTo(137,365);
context.bezierCurveTo(132,324,194,310,229,334);
context.lineTo(242,323);
context.bezierCurveTo(204,292,118,324,129,361);
context.closePath();
var grd = context.createLinearGradient(216, 288, 144, 360);
grd.addColorStop(0, "#6f779c"); //light blue grey
grd.addColorStop(1,"#474950"); //dark blue grey
context.fill;
context.fill();
//mid line
context.beginPath();
context.moveTo(150,392);
context.bezierCurveTo(132,356,190,308,228,340);
context.stroke;
context.lineWidth=5;
context.lineCap='round';
context.stroke();
///outer ring
context.beginPath();
context.moveTo(159,367);
context.bezierCurveTo(164,332,238,340,238,388);
context.quadraticCurveTo(236,418,213,422);
context.closePath();
var grd = context.createLinearGradient(216, 330, 216, 432);
grd.addColorStop(0, "#474950");
grd.addColorStop(1,"black");
context.fill;
context.fill();
//mid ring
context.beginPath();
context.moveTo(159,377);
context.bezierCurveTo(157,340,230,345,230,392);
context.bezierCurveTo(226,430,157,422,159,377);
context.closePath();
var grd = context.createLinearGradient(216, 330, 225, 372);
grd.addColorStop(0, "#969bc3"); //light grey blue
grd.addColorStop(1,"#474950");
context.fill;
context.fill();
//center glow
context.beginPath();
context.moveTo(168,383);
context.bezierCurveTo(168,358,216,360,215,392);
context.bezierCurveTo(209,418,170,406,168,383);
context.closePath();
var grd= context.createRadialGradient(192,384,5,192,384,20);
grd.addColorStop(0,"white");
grd.addColorStop(0.5,"#5957e8") ;//blue glow
grd.addColorStop(1,"black");
context.fill;
context.fill();
////////////////// HELMET FRAME CONT.
////CURVE
context.beginPath();
context.moveTo(351,180);
context.lineTo(348,175);
context.quadraticCurveTo(288,212,279,314);
context.lineTo(288,311);
context.quadraticCurveTo(288,228,351,180);
context.closePath();
context.fill;
context.fill();
context.beginPath();
context.moveTo(287,311);
context.quadraticCurveTo(288,228,350,180);
context.lineTo(369,297);
context.lineTo(287,311);
context.closePath();
var grd = context.createLinearGradient(300, 230, 350, 280);
grd.addColorStop(0, "#6f779c"); //light blue grey
grd.addColorStop(1,"#474950"); //dark blue grey
context.fill;
context.fill();
context.beginPath();
context.moveTo(360,240);
context.quadraticCurveTo(342,276,348,299);
context.lineWidth=1;
context.stroke;
context.stroke();
//// HELMET FRAME RIGHT
context.beginPath();
context.moveTo(376,289);
context.quadraticCurveTo(264,311,225,326);
context.quadraticCurveTo(242,416,226,443);
context.lineTo(231,447);
context.quadraticCurveTo(359,403,373,390);
context.closePath();
context.fill;
context.fill();
context.beginPath();
context.moveTo(376,289);
context.quadraticCurveTo(264,311,237,327);
context.quadraticCurveTo(242,416,232,448);
context.quadraticCurveTo(359,403,373,390);
context.closePath();
var grd = context.createLinearGradient(216, 360, 300, 380);
grd.addColorStop(0, "#6f779c"); //light blue grey
grd.addColorStop(1,"#474950"); //dark blue grey
context.fill;
context.fill();
//black line
context.beginPath();
context.moveTo(233,413);
context.lineTo(239,415);
context.lineTo(375,370);
context.stroke;
context.lineWidth=1;
context.stroke();
///SHOULDERS
// BLACK
context.beginPath();
context.moveTo(700,597);
context.quadraticCurveTo(520,676,540,801);
context.lineTo(700,801);
context.lineTo(700,597);
context.fill
context.fill();
//pattern base
context.beginPath();
context.moveTo(700,597);
context.quadraticCurveTo(520,676,540,801);
context.lineTo(425,801);
context.quadraticCurveTo(398,760,317,759);
context.lineTo(317,707);
context.lineTo(700,503);
context.closePath();
var grd = context.createLinearGradient(516, 534, 496, 900);
grd.addColorStop(0, "#8376b9"); //main hood highlight color
grd.addColorStop(0.5, "#14173a"); //main hood color
grd.addColorStop(1,"#080c25"); //main hood shade color
context.fill;
context.fill();
////////////// HOOD MAIN
context.beginPath();
context.moveTo(169,66);
context.quadraticCurveTo(360,-50,525,64);
context.quadraticCurveTo(556,94,568,119);
context.quadraticCurveTo(638,324,700,400);
context.lineTo(700,540);
context.bezierCurveTo(588,566,482,696,448,698);
context.bezierCurveTo(434,700,390,728,353,726);
context.lineTo(312,712);
context.lineTo(319,664);
context.quadraticCurveTo(392,370,388,330);
context.quadraticCurveTo(346,100,309,85)
context.closePath();
var grd = context.createLinearGradient(400, 100, 750, 776);
grd.addColorStop(0, "#8376b9"); //main hood highlight color
grd.addColorStop(0.5, "#14173a"); //main hood color
grd.addColorStop(1,"#080c25"); //main hood shade color
context.fill;
context.fill();
///// HOOD SWIRLS AKA FML
///top swirl
context.beginPath();
context.moveTo(254,26);
context.quadraticCurveTo(243,36,244,44);
context.stroke;
context.lineWidth=3;
context.stroke();
context.beginPath();
context.moveTo(234,33);
context.quadraticCurveTo(220,46,224,54);
context.stroke;
context.lineWidth=3;
context.stroke();
context.beginPath();
context.moveTo(214,42);
context.quadraticCurveTo(200,56,244,64);
context.stroke;
context.lineWidth=3;
context.stroke();
context.beginPath();
context.moveTo(330,27);
context.bezierCurveTo(358,46,384,36,386,25);
context.stroke;
context.lineWidth=3;
context.stroke();
context.beginPath();
context.moveTo(327,35);
context.bezierCurveTo(351,49,398,38,392,24);
context.stroke;
context.lineWidth=3;
context.stroke();
context.beginPath();
context.moveTo(315,42);
context.bezierCurveTo(361,58,408,46,399,23);
context.stroke;
context.lineWidth=3;
context.stroke();
context.beginPath();
context.moveTo(296,51);
context.bezierCurveTo(379,62,437,46,412,24);
context.stroke;
context.lineWidth=3;
context.stroke();
////top vert curves
context.beginPath();
context.moveTo(370,55);
context.quadraticCurveTo(416,80,410,162);
context.stroke;
context.lineWidth=3;
context.stroke();
context.beginPath();
context.moveTo(389,53);
context.quadraticCurveTo(432,88,423,145);
context.stroke;
context.lineWidth=3;
context.stroke();
context.beginPath();
context.moveTo(404,49);
context.quadraticCurveTo(438,74,436,126);
context.stroke;
context.lineWidth=3;
context.stroke();
context.beginPath();
context.moveTo(416,43);
context.quadraticCurveTo(446,74,448,117);
context.stroke;
context.lineWidth=3;
context.stroke();
context.beginPath();
context.moveTo(420,36);
context.quadraticCurveTo(454,64,457,113);
context.stroke;
context.lineWidth=3;
context.stroke();
context.beginPath();
context.moveTo(420,32);
context.quadraticCurveTo(454,45,469,108);
context.stroke;
context.lineWidth=3;
context.stroke();
context.beginPath();
context.moveTo(417,30);
context.quadraticCurveTo(455,30,480,110);
context.stroke;
context.lineWidth=3;
context.stroke();
context.beginPath();
context.moveTo(419,25);
context.quadraticCurveTo(476,44,488,111);
context.stroke;
context.lineWidth=3;
context.stroke();
context.beginPath();
context.moveTo(433,27);
context.quadraticCurveTo(480,45,498,116);
context.stroke;
context.lineWidth=3;
context.stroke();
context.beginPath();
context.moveTo(360,56);
context.quadraticCurveTo(373,63,376,73);
context.stroke;
context.lineWidth=3;
context.stroke();
context.beginPath();
context.moveTo(348,56);
context.quadraticCurveTo(360,62,360,75);
context.stroke;
context.lineWidth=3;
context.stroke();
context.beginPath();
context.moveTo(337,56);
context.quadraticCurveTo(353,67,350,78);
context.stroke;
context.lineWidth=3;
context.stroke();
context.beginPath();
context.moveTo(319,55);
context.quadraticCurveTo(346,65,343,83);
context.stroke;
context.lineWidth=3;
context.stroke();
context.beginPath();
context.moveTo(298,53);
context.quadraticCurveTo(336,66,337,86);
context.stroke;
context.lineWidth=3;
context.stroke();
context.beginPath();
context.moveTo(470,52);
context.quadraticCurveTo(541,90,527,67);
context.stroke;
context.lineWidth=3;
context.stroke();
context.beginPath();
context.moveTo(457,40);
context.quadraticCurveTo(534,78,512,56);
context.stroke;
context.lineWidth=3;
context.stroke();
context.beginPath();
context.moveTo(447,30);
context.quadraticCurveTo(524,68,502,50);
context.stroke;
context.lineWidth=3;
context.stroke();
context.beginPath();
context.moveTo(387,161);
context.quadraticCurveTo(390,173,403,178);
context.stroke;
context.lineWidth=3;
context.stroke();
context.beginPath();
context.moveTo(377,162);
context.quadraticCurveTo(387,182,398,185);
context.stroke;
context.lineWidth=3;
context.stroke();
/// top front swirl
context.beginPath();
context.moveTo(393,79);
context.quadraticCurveTo(356,66,334,91);
context.stroke;
context.lineWidth=3;
context.stroke();
context.beginPath();
context.moveTo(398,88);
context.quadraticCurveTo(361,71,336,100);
context.stroke;
context.lineWidth=3;
context.stroke();
context.beginPath();
context.moveTo(405,105);
context.bezierCurveTo(393,85,345,90,341,111);
context.stroke;
context.lineWidth=3;
context.stroke();
context.beginPath();
context.moveTo(410,134);
context.quadraticCurveTo(401,159,363,151);
context.stroke;
context.lineWidth=3;
context.stroke();
context.beginPath();
context.moveTo(410,148);
context.quadraticCurveTo(400,162,369,160);
context.stroke;
context.lineWidth=3;
context.stroke();
context.beginPath();
context.moveTo(345,119);
context.bezierCurveTo(359,96,396,96,406,118);
context.bezierCurveTo(414,143,374,150,363,143);
context.stroke;
context.lineWidth=3;
context.stroke();
context.beginPath();
context.moveTo(355,118);
context.bezierCurveTo(360,108,386,104,388,118);
context.bezierCurveTo(389,124,386,132,378,131);
context.bezierCurveTo(370,132,365,129,362,124);
context.bezierCurveTo(362,121,361,112,368,111);
context.bezierCurveTo(376,110,381,116,381,119);
context.bezierCurveTo(382,122,378,126,374,125);
context.bezierCurveTo(372,126,366,121,370,117);
context.quadraticCurveTo(374,114,375,119);
context.stroke;
context.lineWidth=3;
context.stroke();
context.beginPath();
context.moveTo(353,115);
context.bezierCurveTo(363,101,400,106,396,127);
context.bezierCurveTo(395,133,387,140,368,138);
context.stroke;
context.lineWidth=3;
context.stroke();
////mid large swirl
context.beginPath();
context.moveTo(385,208);
context.quadraticCurveTo(428,134,439,123);
context.bezierCurveTo(451,112,518,83,547,184);
context.bezierCurveTo(577,288,481,323,452,231);
context.stroke;
context.lineWidth=3;
context.stroke();
context.beginPath();
context.moveTo(398,325);
context.quadraticCurveTo(432,276,434,267);
context.bezierCurveTo(439,256,460,212,467,194);
context.bezierCurveTo(475,174,492,168,499,179);
context.bezierCurveTo(506,192,504,204,499,207);
context.bezierCurveTo(495,210,486,208,487,197);
context.bezierCurveTo(489,187,492,186,493,187);
context.quadraticCurveTo(500,196,497,198);
context.quadraticCurveTo(495,200,492,197);
context.stroke;
context.lineWidth=3;
context.stroke();
context.beginPath();
context.moveTo(390,227);
context.quadraticCurveTo(432,144,444,133);
context.bezierCurveTo(456,124,496,110,524,146);
context.bezierCurveTo(552,182,539,239,529,249);
context.bezierCurveTo(522,264,490,294,457,223);
context.stroke;
context.lineWidth=3;
context.stroke();
context.beginPath();
context.moveTo(390,257);
context.quadraticCurveTo(432,166,452,147);
context.bezierCurveTo(474,130,507,128,526,170);
context.bezierCurveTo(546,212,524,250,513,254);
context.bezierCurveTo(502,259,476,260,462,212);
context.stroke;
context.lineWidth=3;
context.stroke();
context.beginPath();
context.moveTo(390,277);
context.quadraticCurveTo(431,189,457,161);
context.bezierCurveTo(485,134,515,160,519,170);
context.quadraticCurveTo(540,204,523,233);
context.bezierCurveTo(506,265,471,237,466,197);
context.stroke;
context.lineWidth=3;
context.stroke();
context.beginPath();
context.moveTo(397,288);
context.quadraticCurveTo(452,185,463,173);
context.bezierCurveTo(474,161,492,145,514,175);
context.bezierCurveTo(537,203,514,235,509,236);
context.bezierCurveTo(503,239,480,247,473,186);
context.stroke;
context.lineWidth=3;
context.stroke();
context.beginPath();
context.moveTo(398,305);
context.quadraticCurveTo(425,256,464,184);
context.bezierCurveTo(482,152,506,172,511,183);
context.bezierCurveTo(517,196,518,216,510,220);
context.bezierCurveTo(483,234,482,204,479,180);
context.stroke;
context.lineWidth=3;
context.stroke();
/// back curves
context.beginPath();
context.moveTo(534,75);
context.quadraticCurveTo(540,132,560,173);
context.bezierCurveTo(576,216,612,254,616,248);
context.stroke;
context.lineWidth=3;
context.stroke();
context.beginPath();
context.moveTo(545,87);
context.quadraticCurveTo(550,142,563,166);
context.bezierCurveTo(576,194,606,248,613,234);
context.stroke;
context.lineWidth=3;
context.stroke();
context.beginPath();
context.moveTo(556,102);
context.quadraticCurveTo(552,132,573,173);
context.bezierCurveTo(586,203,602,228,603,218);
context.stroke;
context.lineWidth=3;
context.stroke();
context.beginPath();
context.moveTo(569,121);
context.quadraticCurveTo(562,110,564,131);
context.bezierCurveTo(566,152,586,190,595,205);
context.quadraticCurveTo(601,216,600,208);
context.stroke;
context.lineWidth=3;
context.stroke();
context.beginPath();
context.moveTo(638,318);
context.quadraticCurveTo(610,280,599,343);
context.stroke;
context.lineWidth=3;
context.stroke();
context.beginPath();
context.moveTo(638,323);
context.quadraticCurveTo(614,296,606,346);
context.stroke;
context.lineWidth=3;
context.stroke();
context.beginPath();
context.moveTo(636,309);
context.quadraticCurveTo(600,263,591,342);
context.stroke;
context.lineWidth=3;
context.stroke();
context.beginPath();
context.moveTo(622,294);
context.quadraticCurveTo(592,250,582,340);
context.stroke;
context.lineWidth=3;
context.stroke();
context.beginPath();
context.moveTo(620,285);
context.quadraticCurveTo(584,236,575,340);
context.stroke;
context.lineWidth=3;
context.stroke();
context.beginPath();
context.moveTo(619,278);
context.quadraticCurveTo(568,228,566,340);
context.stroke;
context.lineWidth=3;
context.stroke();
context.beginPath();
context.moveTo(613,272);
context.quadraticCurveTo(560,203,558,340);
context.stroke;
context.lineWidth=3;
context.stroke();
context.beginPath();
context.moveTo(581,216);
context.quadraticCurveTo(580,240,595,253);
context.stroke;
context.lineWidth=3;
context.stroke();
context.beginPath();
context.moveTo(591,226);
context.quadraticCurveTo(588,240,606,264);
context.stroke;
context.lineWidth=3;
context.stroke();
context.beginPath();
context.moveTo(601,239);
context.quadraticCurveTo(596,240,613,275);
context.stroke;
context.lineWidth=3;
context.stroke();
context.beginPath();
context.moveTo(531,145);
context.quadraticCurveTo(546,148,550,156);
context.stroke;
context.lineWidth=3;
context.stroke();
context.beginPath();
context.moveTo(535,153);
context.lineTo(559,173);
context.stroke;
context.lineWidth=3;
context.stroke();
context.beginPath();
context.moveTo(541,166);
context.lineTo(563,185);
context.stroke;
context.lineWidth=3;
context.stroke();
context.beginPath();
context.moveTo(545,178);
context.lineTo(571,195);
context.stroke;
context.lineWidth=3;
context.stroke();
context.beginPath();
context.moveTo(547,186);
context.lineTo(578,207);
context.stroke;
context.lineWidth=3;
context.stroke();
context.beginPath();
context.moveTo(549,190);
context.quadraticCurveTo(578,230,568,264);
context.stroke;
context.lineWidth=3;
context.stroke();
context.beginPath();
context.moveTo(551,204);
context.quadraticCurveTo(570,238,560,261);
context.stroke;
context.lineWidth=3;
context.stroke();
context.beginPath();
context.moveTo(553,227);
context.quadraticCurveTo(562,246,550,262);
context.stroke;
context.lineWidth=3;
context.stroke();
context.beginPath();
context.moveTo(568,266);
context.quadraticCurveTo(554,256,536,273);
context.bezierCurveTo(520,290,520,320,522,327);
context.stroke;
context.lineWidth=3;
context.stroke();
context.beginPath();
context.moveTo(567,271);
context.bezierCurveTo(528,265,525,318,533,336);
context.stroke;
context.lineWidth=3;
context.stroke();
context.beginPath();
context.moveTo(565,278);
context.quadraticCurveTo(548,276,540,290);
context.bezierCurveTo(532,304,530,324,551,342);
context.stroke;
context.lineWidth=3;
context.stroke();
context.beginPath();
context.moveTo(563,285);
context.quadraticCurveTo(548,288,542,300);
context.bezierCurveTo(538,314,542,326,557,338);
context.stroke;
context.lineWidth=3;
context.stroke();
context.beginPath();
context.moveTo(561,293);
context.quadraticCurveTo(548,298,546,308);
context.bezierCurveTo(546,320,552,326,558,330);
context.stroke;
context.lineWidth=3;
context.stroke();
context.beginPath();
context.moveTo(558,302);
context.quadraticCurveTo(552,304,552,310);
context.quadraticCurveTo(552,316,558,322);
context.stroke;
context.lineWidth=3;
context.stroke();
/////////front mid curves
context.beginPath();
context.moveTo(499,283);
context.quadraticCurveTo(512,336,550,345);
context.stroke;
context.lineWidth=3;
context.stroke();
context.beginPath();
context.moveTo(491,281);
context.quadraticCurveTo(498,330,537,354);
context.stroke;
context.lineWidth=3;
context.stroke();
context.beginPath();
context.moveTo(484,277);
context.quadraticCurveTo(486,324,527,361);
context.stroke;
context.lineWidth=3;
context.stroke();
context.beginPath();
context.moveTo(471,268);
context.quadraticCurveTo(480,340,521,368);
context.stroke;
context.lineWidth=3;
context.stroke();
context.beginPath();
context.moveTo(458,249);
context.quadraticCurveTo(456,323,509,373);
context.stroke;
context.lineWidth=3;
context.stroke();
context.beginPath();
context.moveTo(447,238);
context.quadraticCurveTo(449,338,504,379);
context.stroke;
context.lineWidth=3;
context.stroke();
context.beginPath();
context.moveTo(439,257);
context.quadraticCurveTo(440,354,499,388);
context.stroke;
context.lineWidth=3;
context.stroke();
context.beginPath();
context.moveTo(430,276);
context.quadraticCurveTo(439,367,494,396);
context.stroke;
context.lineWidth=3;
context.stroke();
context.beginPath();
context.moveTo(423,289);
context.quadraticCurveTo(430,376,489,403);
context.stroke;
context.lineWidth=3;
context.stroke();
context.beginPath();
context.moveTo(390,414);
context.bezierCurveTo(407,407,430,348,435,348);
context.stroke;
context.lineWidth=3;
context.stroke();
context.beginPath();
context.moveTo(392,423);
context.bezierCurveTo(410,421,434,357,440,357);
context.stroke;
context.lineWidth=3;
context.stroke();
context.beginPath();
context.moveTo(390,433);
context.bezierCurveTo(412,434,438,362,445,365);
context.stroke;
context.lineWidth=3;
context.stroke();
context.beginPath();
context.moveTo(390,444);
context.bezierCurveTo(412,444,442,370,450,372);
context.stroke;
context.lineWidth=3;
context.stroke();
context.beginPath();
context.moveTo(414,440);
context.quadraticCurveTo(448,383,456,379);
context.stroke;
context.lineWidth=3;
context.stroke();
context.beginPath();
context.moveTo(455,381);
context.quadraticCurveTo(456,410,481,411);
context.stroke;
context.lineWidth=3;
context.stroke();
context.beginPath();
context.moveTo(460,386);
context.quadraticCurveTo(465,405,485,406);
context.stroke;
context.lineWidth=3;
context.stroke();
context.beginPath();
context.moveTo(464,407);
context.quadraticCurveTo(465,424,471,429);
context.stroke;
context.lineWidth=3;
context.stroke();
context.beginPath();
context.moveTo(471,410);
context.quadraticCurveTo(469,418,474,422);
context.stroke;
context.lineWidth=3;
context.stroke();
context.beginPath();
context.moveTo(455,390);
context.quadraticCurveTo(456,428,467,435);
context.stroke;
context.lineWidth=3;
context.stroke();
context.beginPath();
context.moveTo(449,387);
context.quadraticCurveTo(450,430,462,442);
context.stroke;
context.lineWidth=3;
context.stroke();
context.beginPath();
context.moveTo(445,394);
context.quadraticCurveTo(443,426,458,448);
context.stroke;
context.lineWidth=3;
context.stroke();
context.beginPath();
context.moveTo(439,403);
context.quadraticCurveTo(440,438,451,454);
context.stroke;
context.lineWidth=3;
context.stroke();
context.beginPath();
context.moveTo(433,411);
context.quadraticCurveTo(434,436,440,446);
context.stroke;
context.lineWidth=3;
context.stroke();
///large lower swirl
context.beginPath();
context.moveTo(385,450);
context.quadraticCurveTo(426,430,453,457);
context.stroke;
context.lineWidth=3;
context.stroke();
context.beginPath();
context.moveTo(383,461);
context.quadraticCurveTo(426,438,448,466);
context.stroke;
context.lineWidth=3;
context.stroke();
context.beginPath();
context.moveTo(380,471);
context.quadraticCurveTo(420,446,445,473);
context.stroke;
context.lineWidth=3;
context.stroke();
context.beginPath();
context.moveTo(375,489);
context.quadraticCurveTo(420,456,437,486);
context.stroke;
context.lineWidth=3;
context.stroke();
context.beginPath();
context.moveTo(370,510);
context.quadraticCurveTo(410,469,427,501);
context.stroke;
context.lineWidth=3;
context.stroke();
context.beginPath();
context.moveTo(614,354);
context.quadraticCurveTo(596,336,556,343);
context.bezierCurveTo(516,352,476,424,470,432);
context.quadraticCurveTo(412,536,401,533);
context.bezierCurveTo(392,530,388,520,395,514);
context.bezierCurveTo(400,508,409,509,408,516);
context.bezierCurveTo(408,524,400,518,400,520);
context.quadraticCurveTo(396,518,400,516);
context.stroke;
context.lineWidth=3;
context.stroke();
///////////////HOOD BORDER CONT
////CODE BY MEAGAN GLENNON!
////INNER BORDER
context.beginPath();
context.moveTo(111,202);
context.quadraticCurveTo(110,144,120,126);
context.quadraticCurveTo(136,64,197,55);
context.quadraticCurveTo(348,48,369,235);
context.quadraticCurveTo(386,432,327,563);
context.quadraticCurveTo(360,449,361,331);
context.quadraticCurveTo(346,180,320,150);
context.quadraticCurveTo(252,70,204,73);
context.bezierCurveTo(144,90,118,150,111,202);
context.closePath();
var grd = context.createLinearGradient(350, 100, 232, 350);
grd.addColorStop(1, "#313550"); //hood border shade
grd.addColorStop(0,"#4d579e"); /// hood border color
context.fill;
context.fill();
///main border
context.beginPath();
context.moveTo(175,60);
context.bezierCurveTo(238,40,316,36,366,132);
context.bezierCurveTo(404,228,406,383,387,449);
context.quadraticCurveTo(338,662,327,678);
context.lineTo(317,703);
context.lineTo(284,700);
context.quadraticCurveTo(320,572,336,532);
context.quadraticCurveTo(352,494,369,353);
context.quadraticCurveTo(372,116,277,78);
context.quadraticCurveTo(250,60,225,57);
context.closePath();
var grd = context.createLinearGradient(350, 250, 532, 400);
grd.addColorStop(1, "#313550"); //hood border shade
grd.addColorStop(0.5,"#4d579e"); /// hood border color
grd.addColorStop(0,"#7d86c8"); ///hood highlight
context.fill;
context.fill();
//top of head border design
context.beginPath();
context.moveTo(225,55);
context.quadraticCurveTo(274,16,310,14);
context.bezierCurveTo(342,10,442,2,503,52);
context.quadraticCurveTo(400,-3,291,61);
context.closePath();
var grd = context.createLinearGradient(350, 250, 532, 400);
grd.addColorStop(1, "#313550"); //hood border shade
grd.addColorStop(0.5,"#4d579e"); /// hood border color
grd.addColorStop(0,"#7d86c8"); ///hood highlight
context.fill;
context.fill();
////shoulder border
context.beginPath();
context.moveTo(263,779);
context.lineTo(279,802);
context.bezierCurveTo(320,790,346,788,372,802);
context.lineTo(452,802);
context.quadraticCurveTo(384,755,327,754);
var grd = context.createLinearGradient(700, 730, 700, 800);
grd.addColorStop(1, "#313550"); //hood border shade
grd.addColorStop(0.5,"#4d579e"); /// hood border color
grd.addColorStop(0,"#7d86c8"); ///hood highlight
context.fill;
context.fill();
///// BROOCHES
//connecting strap
context.beginPath();
context.moveTo(202,704);
context.quadraticCurveTo(259,708,276,701);
context.lineTo(266,761);
context.quadraticCurveTo(194,770,175,754);
context.closePath();
var grd = context.createLinearGradient(700, 670, 700, 750);
grd.addColorStop(0, "#4b4c6a"); ///light grey blue
grd.addColorStop(1,"#15162a"); ///dark blue
context.fill;
context.fill();
//left
context.beginPath();
context.moveTo(209,685);
context.quadraticCurveTo(220,689,218,699);
context.bezierCurveTo(216,721,208,742,195,762);
context.quadraticCurveTo(185,778,162,787);
context.quadraticCurveTo(154,786,154,778);
context.closePath();
var grd = context.createLinearGradient(216, 575, 180, 751);
grd.addColorStop(1, "#212433"); //dark brooch color
grd.addColorStop(0,"#6a7194"); ///light brooch color
context.fill;
context.fill();
context.beginPath();
context.moveTo(205,684);
context.bezierCurveTo(216,685,213,707,200,732);
context.bezierCurveTo(189,757,168,780,157,779);
context.bezierCurveTo(146,779,152,756,164,730);
context.bezierCurveTo(176,705,195,684,205,684);
context.closePath();
var grd = context.createLinearGradient(216, 650, 180, 751);
grd.addColorStop(1, "#212433"); //dark brooch color
grd.addColorStop(0.5,"#505b74"); ///light brooch color
grd.addColorStop(0,"#c8daf2"); // brooch high light
context.fill;
context.fill();
//right
context.beginPath();
context.moveTo(258,736);
context.bezierCurveTo(270,708,301,685,327,684);
context.bezierCurveTo(355,685,367,709,354,737);
context.bezierCurveTo(343,764,312,789,284,789);
context.bezierCurveTo(258,789,246,766,258,736);
context.closePath();
var grd = context.createLinearGradient(316, 550, 180, 651);
grd.addColorStop(1, "#212433"); //dark brooch color
grd.addColorStop(0,"#505b74"); ///light brooch color
context.fill;
context.fill();
context.beginPath();
context.moveTo(250,728);
context.bezierCurveTo(262,700,293,677,319,676);
context.bezierCurveTo(347,677,359,701,346,729);
context.bezierCurveTo(335,756,304,781,276,781);
context.bezierCurveTo(250,781,238,758,250,728);
context.closePath();
var grd = context.createLinearGradient(316, 550, 180, 651);
grd.addColorStop(1, "#212433"); //dark brooch color
grd.addColorStop(0.5,"#505b74"); ///light brooch color
grd.addColorStop(0,"#c8daf2"); // brooch high light
context.fill;
context.fill();
////BROOCH DETAILS
//right
context.beginPath();
context.moveTo(301,710);
context.bezierCurveTo(310,710,314,718,311,725);
context.bezierCurveTo(310,734,301,740,293,740);
context.bezierCurveTo(286,740,280,734,283,725);
context.bezierCurveTo(286,718,292,710,301,710);
context.stroke;
context.lineWidth=3;
context.stroke();
context.beginPath();
context.moveTo(306,694);
context.bezierCurveTo(322,697,332,710,326,725);
context.bezierCurveTo(322,744,306,756,289,756);
context.bezierCurveTo(273,757,264,744,268,726);
context.bezierCurveTo(273,710,290,696,306,694);
context.stroke;
context.lineWidth=3;
context.stroke();
context.beginPath();
context.moveTo(250,728);
context.bezierCurveTo(262,700,293,677,319,676);
context.bezierCurveTo(347,677,359,701,346,729);
context.bezierCurveTo(335,756,304,781,276,781);
context.bezierCurveTo(250,781,238,758,250,728);
context.closePath();
context.stroke;
context.lineWidth=3;
context.stroke();
//left
context.beginPath();
context.moveTo(186,716);
context.bezierCurveTo(189,716,189,723,185,730);
context.bezierCurveTo(182,739,176,745,174,745);
context.bezierCurveTo(170,746,170,739,174,731);
context.bezierCurveTo(178,723,183,716,186,716);
context.closePath();
context.stroke;
context.lineWidth=3;
context.stroke();
context.beginPath();
context.moveTo(196,698);
context.bezierCurveTo(203,698,200,712,192,728);
context.bezierCurveTo(185,744,174,757,167,757);
context.bezierCurveTo(162,758,164,744,172,728);
context.bezierCurveTo(181,712,191,698,196,698);
context.closePath();
context.stroke;
context.lineWidth=3;
context.stroke();
context.beginPath();
context.moveTo(205,684);
context.bezierCurveTo(216,685,213,707,200,732);
context.bezierCurveTo(189,757,168,780,157,779);
context.bezierCurveTo(146,779,152,756,164,730);
context.bezierCurveTo(176,705,195,684,205,684);
context.closePath();
context.stroke;
context.lineWidth=3;
context.stroke();
////// water mark
context.font = "40pt Calibri";
context.fillStyle = "rgba(255,255,255,0.3)";
context.fillText("CODE BY",10, 750);
context.font = "40pt Calibri";
context.fillStyle = "rgba(255,255,255,0.3)";
context.fillText("MEAGAN GLENNON",10, 800);
////////////////////////////////////// end here
};
/////code by meagan glennon!
</script>
</head>
<body>
<canvas id="myCanvas" width="700" height="800"></canvas>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
/////CODE BY MEAGAN GLENNON!!!!
////////////////////////////////////// start here
//////////////BACKGROUND THINGS GO HERE~ ;D
context.beginPath();
context.rect(0,0,canvas.width,canvas.height);
var grd = context.createRadialGradient(238, 300, 100, 238, 300, 550);
grd.addColorStop(0, "#e4b694"); //pastel orange
grd.addColorStop(0.5, "#877082"); // pastel purple
grd.addColorStop(0.7,"#524850"); //dark purple saturated
grd.addColorStop(1,"black");
context.fillStyle = grd;
context.fill();
//////////stars
/*
var x = 100
var y = 50
var r1 =1
var r2=8
var r3 = 10
context.beginPath();
context.arc(x, y, r3, 0, 2 * Math.PI, false);
var grd = context.createRadialGradient(x, y, r1, x, y, r2);
grd.addColorStop(0, "white");
grd.addColorStop(1,"transparent");
context.fillStyle = grd;
context.fill();
context.beginPath();
context.arc(x, y, r3, 0, 2 * Math.PI, false);
var grd = context.createRadialGradient(50, 30, 1, 50, 30, 8);
grd.addColorStop(0, "white");
grd.addColorStop(1,"transparent");
context.fillStyle = grd;
context.fill();
context.beginPath();
context.rect(0,0,canvas.width,canvas.height);
var grd = context.createRadialGradient(70, 20, .5, 70, 20, 5);
grd.addColorStop(0, "white");
grd.addColorStop(1,"transparent");
context.fillStyle = grd;
context.fill();
context.beginPath();
context.rect(0,0,canvas.width,canvas.height);
var grd = context.createRadialGradient(40, 90, .5, 40, 90, 5);
grd.addColorStop(0, "white");
grd.addColorStop(1,"transparent");
context.fillStyle = grd;
context.fill();
context.beginPath();
context.rect(0,0,canvas.width,canvas.height);
var grd = context.createRadialGradient(45, 95, .2, 45, 95, 2);
grd.addColorStop(0, "white");
grd.addColorStop(1,"transparent");
context.fillStyle = grd;
context.fill();
context.beginPath();
context.rect(0,0,canvas.width,canvas.height);
var grd = context.createRadialGradient(590, 150, .5, 590, 150, 5);
grd.addColorStop(0, "white");
grd.addColorStop(1,"transparent");
context.fillStyle = grd;
context.fill();
context.beginPath();
context.rect(0,0,canvas.width,canvas.height);
var grd = context.createRadialGradient(600,50, .5, 600, 50, 5);
grd.addColorStop(0, "white");
grd.addColorStop(1,"transparent");
context.fillStyle = grd;
context.fill();
context.beginPath();
context.rect(0,0,canvas.width,canvas.height);
var grd = context.createRadialGradient(640, 30, .5, 640, 30, 5);
grd.addColorStop(0, "white");
grd.addColorStop(1,"transparent");
context.fillStyle = grd;
context.fill();
context.beginPath();
context.rect(0,0,canvas.width,canvas.height);
var grd = context.createRadialGradient(30, 40, .5, 30, 40, 3);
grd.addColorStop(0, "white");
grd.addColorStop(1,"transparent");
context.fillStyle = grd;
context.fill();
context.beginPath();
context.rect(0,0,canvas.width,canvas.height);
var grd = context.createRadialGradient(20, 20, .5, 20, 20, 5);
grd.addColorStop(0, "white");
grd.addColorStop(1,"transparent");
context.fillStyle = grd;
context.fill();
context.beginPath();
context.rect(0,0,canvas.width,canvas.height);
var grd = context.createRadialGradient(595, 70, 1, 595, 70, 8);
grd.addColorStop(0, "white");
grd.addColorStop(1,"transparent");
context.fillStyle = grd;
context.fill();
context.beginPath();
context.rect(0,0,canvas.width,canvas.height);
var grd = context.createRadialGradient(610, 20, .5, 610, 20, 5);
grd.addColorStop(0, "white");
grd.addColorStop(1,"transparent");
context.fillStyle = grd;
context.fill();
context.beginPath();
context.rect(0,0,canvas.width,canvas.height);
var grd = context.createRadialGradient(620, 10, .3, 620, 10, 3);
grd.addColorStop(0, "white");
grd.addColorStop(1,"transparent");
context.fillStyle = grd;
context.fill();
context.beginPath();
context.rect(0,0,canvas.width,canvas.height);
var grd = context.createRadialGradient(580, 40, 1,580, 40, 10);
grd.addColorStop(0, "white");
grd.addColorStop(1,"transparent");
context.fillStyle = grd;
context.fill();
context.beginPath();
context.rect(0,0,canvas.width,canvas.height);
var grd = context.createRadialGradient(70, 150, .5, 70, 150, 5);
grd.addColorStop(0, "white");
grd.addColorStop(1,"transparent");
context.fillStyle = grd;
context.fill();
*/
/////// INNER HOOD TOP
context.beginPath();
context.moveTo(230,73);
context.bezierCurveTo(162,48,110,168,110,190);
context.quadraticCurveTo(120,340,128,350);
context.lineTo(141,360);
context.lineTo(230,73);
context.closePath();
var grd = context.createLinearGradient(238, 62, 72, 216);
grd.addColorStop(0, "black");
grd.addColorStop(1,"#313550"); //hood shade color
context.fillStyle = grd;
context.fill();
////////// HELMET BEGIN
///GLASS
context.beginPath();
context.moveTo(255,64);
context.quadraticCurveTo(95,75,134,336);
context.lineTo(260,340);
context.quadraticCurveTo(370,200,357,156);
context.quadraticCurveTo(336,100,255,64);
context.closePath();
var grd = context.createRadialGradient(350, 252, 70, 350, 252, 250);
grd.addColorStop(0, "#e697ed");
grd.addColorStop(0.5, "#b457c2");
grd.addColorStop(0.8,"#3b2b48");
grd.addColorStop(1,"#fdfdfd");
context.fill;
context.fill();
////// glass shine
context.beginPath();
context.moveTo(274,88);
context.bezierCurveTo(252,108,266,132,298,115);
context.fill;
context.fill();
context.beginPath();
context.moveTo(248,190);
context.bezierCurveTo(219,204,228,290,234,293);
context.bezierCurveTo(265,263,252,192,248,190);
context.fill;
context.fill();
context.beginPath();
context.moveTo(163,162);
context.quadraticCurveTo(125,240,153,320);
context.lineTo(168,315);
context.quadraticCurveTo(156,204,165,184);
context.quadraticCurveTo(169,156,163,162);
context.fill;
context.fill();
///////////////// NECK PIECE PART 1
////BLACK
context.beginPath();
context.moveTo(372,367);
context.lineTo(372,482);
context.lineTo(299,497);
context.quadraticCurveTo(301,638,271,668);
context.quadraticCurveTo(255,675,271,682);
context.lineTo(288,686);
context.lineTo(258,703);
context.lineTo(236,709);
context.lineTo(229,597);
context.lineTo(183,455);
context.quadraticCurveTo(183,435,178,427);
context.lineTo(136,362);
context.bezierCurveTo(132,327,193,301,230,334)
context.lineTo(247,424);
context.lineTo(372,367);
context.fill;
context.fill();
context.beginPath();
context.moveTo(231,670);
context.lineTo(304,676);
context.lineTo(481,805);
context.lineTo(145,805);
context.lineTo(231,670);
context.fill;
context.fill();
////// GOLD NECK PIECE
context.beginPath();
context.moveTo(297,476);
context.lineTo(359,454);
context.lineTo(359,501);
context.quadraticCurveTo(312,504,300,514);
context.lineTo(297,476);
context.closePath();
var grd = context.createLinearGradient(324, 516, 324, 480);
grd.addColorStop(0, "#c6bd7e");
grd.addColorStop(1,"black");
context.fill;
context.fill();
context.lineWidth=5;
context.stroke;
context.stroke();
context.beginPath();
context.moveTo(359,501);
context.quadraticCurveTo(312,504,300,514);
context.quadraticCurveTo(303,549,298,572);
context.quadraticCurveTo(325,574,338,562);
context.closePath();
var grd = context.createLinearGradient(324, 540, 324, 500);
grd.addColorStop(0, "#c6bd7e"); //gold
grd.addColorStop(1,"black");
context.fill;
context.fill();
context.lineWidth=5;
context.stroke;
context.stroke();
context.beginPath();
context.moveTo(338,562);
context.quadraticCurveTo(303,580,298,572);
context.quadraticCurveTo(297,620,287,624);
context.quadraticCurveTo(288,636,314,630);
context.closePath();
var grd = context.createLinearGradient(324, 600, 324, 550);
grd.addColorStop(0, "#c6bd7e"); //gold
grd.addColorStop(1,"black");
context.fill;
context.fill();
context.lineWidth=5;
context.stroke;
context.stroke();
context.beginPath();
context.moveTo(314,630);
context.quadraticCurveTo(288,636,287,623);
context.quadraticCurveTo(276,672,265,670);
context.quadraticCurveTo(262,694,294,686);
context.closePath();
var grd = context.createLinearGradient(324, 670, 324, 590);
grd.addColorStop(0, "#c6bd7e"); //gold
grd.addColorStop(1,"black");
context.fill;
context.fill();
context.lineWidth=5;
context.stroke;
context.stroke();
context.beginPath();
context.moveTo(200,745);
context.lineTo(195,762);
context.bezierCurveTo(192,795,248,797,277,760);
context.lineTo(279,739);
context.closePath();
var grd = context.createLinearGradient(324, 790, 324, 760);
grd.addColorStop(0, "#c6bd7e"); //gold
grd.addColorStop(1,"black");
context.fill;
context.fill();
context.lineWidth=5;
context.stroke;
context.stroke();
////left shoulder
context.beginPath();
context.moveTo(220,647);
context.quadraticCurveTo(214,683,191,710);
context.bezierCurveTo(168,740,145,772,143,801);
context.quadraticCurveTo( 204,776,217,744);
context.bezierCurveTo(230,716,227,660,220,647);
var grd = context.createLinearGradient(416, 554, 496, 700);
grd.addColorStop(0, "#8376b9"); //main hood highlight color
grd.addColorStop(0.5, "#14173a"); //main hood color
grd.addColorStop(1,"#080c25"); //main hood shade color
context.fill;
context.fill();
////HOOD BORDER INSIDE
context.beginPath();
context.moveTo(169,456);
context.quadraticCurveTo(216,574,223,704);
context.lineTo(231,710);
context.lineTo(237,708);
context.quadraticCurveTo(245,557,187,451);
context.closePath();
var grd = context.createLinearGradient(180, 430, 232, 690);
grd.addColorStop(0, "#313550"); //hood border shade
grd.addColorStop(1,"#4d579e"); /// hood border color
context.fill;
context.fill();
//////////////////HELMET FRAME mouth
///left piece
context.beginPath();
context.moveTo(149,361);
context.lineTo(130,362);
context.lineTo(163,464);
context.lineTo(212,443);
context.lineTo(149,361);
context.closePath();
var grd = context.createLinearGradient(156, 460, 192, 420);
grd.addColorStop(0, "#474950");
grd.addColorStop(1,"black");
context.fill;
context.fill();
context.beginPath();
context.moveTo(131,362);
context.lineTo(164,464);
context.lineTo(152,468);
context.lineTo(116,368);
context.lineTo(130,362);
context.closePath();
var grd = context.createLinearGradient(156, 440, 200, 410);
grd.addColorStop(0, "#474950");
grd.addColorStop(1,"#6f779c");
context.fill;
context.fill();
context.beginPath();
context.moveTo(143,443);
context.lineTo(154,438);
context.lineTo(172,430);
context.stroke;
context.lineWidth=1;
context.stroke();
//// MOUTH PIECE/SPEAKER
////////////CODE BY MEAGAN GLENNON!
///top
context.beginPath();
context.moveTo(129,363);
context.lineTo(137,365);
context.bezierCurveTo(132,324,194,310,229,334);
context.lineTo(242,323);
context.bezierCurveTo(204,292,118,324,129,361);
context.closePath();
var grd = context.createLinearGradient(216, 288, 144, 360);
grd.addColorStop(0, "#6f779c"); //light blue grey
grd.addColorStop(1,"#474950"); //dark blue grey
context.fill;
context.fill();
//mid line
context.beginPath();
context.moveTo(150,392);
context.bezierCurveTo(132,356,190,308,228,340);
context.stroke;
context.lineWidth=5;
context.lineCap='round';
context.stroke();
///outer ring
context.beginPath();
context.moveTo(159,367);
context.bezierCurveTo(164,332,238,340,238,388);
context.quadraticCurveTo(236,418,213,422);
context.closePath();
var grd = context.createLinearGradient(216, 330, 216, 432);
grd.addColorStop(0, "#474950");
grd.addColorStop(1,"black");
context.fill;
context.fill();
//mid ring
context.beginPath();
context.moveTo(159,377);
context.bezierCurveTo(157,340,230,345,230,392);
context.bezierCurveTo(226,430,157,422,159,377);
context.closePath();
var grd = context.createLinearGradient(216, 330, 225, 372);
grd.addColorStop(0, "#969bc3"); //light grey blue
grd.addColorStop(1,"#474950");
context.fill;
context.fill();
//center glow
context.beginPath();
context.moveTo(168,383);
context.bezierCurveTo(168,358,216,360,215,392);
context.bezierCurveTo(209,418,170,406,168,383);
context.closePath();
var grd= context.createRadialGradient(192,384,5,192,384,20);
grd.addColorStop(0,"white");
grd.addColorStop(0.5,"#5957e8") ;//blue glow
grd.addColorStop(1,"black");
context.fill;
context.fill();
////////////////// HELMET FRAME CONT.
////CURVE
context.beginPath();
context.moveTo(351,180);
context.lineTo(348,175);
context.quadraticCurveTo(288,212,279,314);
context.lineTo(288,311);
context.quadraticCurveTo(288,228,351,180);
context.closePath();
context.fill;
context.fill();
context.beginPath();
context.moveTo(287,311);
context.quadraticCurveTo(288,228,350,180);
context.lineTo(369,297);
context.lineTo(287,311);
context.closePath();
var grd = context.createLinearGradient(300, 230, 350, 280);
grd.addColorStop(0, "#6f779c"); //light blue grey
grd.addColorStop(1,"#474950"); //dark blue grey
context.fill;
context.fill();
context.beginPath();
context.moveTo(360,240);
context.quadraticCurveTo(342,276,348,299);
context.lineWidth=1;
context.stroke;
context.stroke();
//// HELMET FRAME RIGHT
context.beginPath();
context.moveTo(376,289);
context.quadraticCurveTo(264,311,225,326);
context.quadraticCurveTo(242,416,226,443);
context.lineTo(231,447);
context.quadraticCurveTo(359,403,373,390);
context.closePath();
context.fill;
context.fill();
context.beginPath();
context.moveTo(376,289);
context.quadraticCurveTo(264,311,237,327);
context.quadraticCurveTo(242,416,232,448);
context.quadraticCurveTo(359,403,373,390);
context.closePath();
var grd = context.createLinearGradient(216, 360, 300, 380);
grd.addColorStop(0, "#6f779c"); //light blue grey
grd.addColorStop(1,"#474950"); //dark blue grey
context.fill;
context.fill();
//black line
context.beginPath();
context.moveTo(233,413);
context.lineTo(239,415);
context.lineTo(375,370);
context.stroke;
context.lineWidth=1;
context.stroke();
///SHOULDERS
// BLACK
context.beginPath();
context.moveTo(700,597);
context.quadraticCurveTo(520,676,540,801);
context.lineTo(700,801);
context.lineTo(700,597);
context.fill
context.fill();
//pattern base
context.beginPath();
context.moveTo(700,597);
context.quadraticCurveTo(520,676,540,801);
context.lineTo(425,801);
context.quadraticCurveTo(398,760,317,759);
context.lineTo(317,707);
context.lineTo(700,503);
context.closePath();
var grd = context.createLinearGradient(516, 534, 496, 900);
grd.addColorStop(0, "#8376b9"); //main hood highlight color
grd.addColorStop(0.5, "#14173a"); //main hood color
grd.addColorStop(1,"#080c25"); //main hood shade color
context.fill;
context.fill();
////////////// HOOD MAIN
context.beginPath();
context.moveTo(169,66);
context.quadraticCurveTo(360,-50,525,64);
context.quadraticCurveTo(556,94,568,119);
context.quadraticCurveTo(638,324,700,400);
context.lineTo(700,540);
context.bezierCurveTo(588,566,482,696,448,698);
context.bezierCurveTo(434,700,390,728,353,726);
context.lineTo(312,712);
context.lineTo(319,664);
context.quadraticCurveTo(392,370,388,330);
context.quadraticCurveTo(346,100,309,85)
context.closePath();
var grd = context.createLinearGradient(400, 100, 750, 776);
grd.addColorStop(0, "#8376b9"); //main hood highlight color
grd.addColorStop(0.5, "#14173a"); //main hood color
grd.addColorStop(1,"#080c25"); //main hood shade color
context.fill;
context.fill();
///// HOOD SWIRLS AKA FML
///top swirl
context.beginPath();
context.moveTo(254,26);
context.quadraticCurveTo(243,36,244,44);
context.stroke;
context.lineWidth=3;
context.stroke();
context.beginPath();
context.moveTo(234,33);
context.quadraticCurveTo(220,46,224,54);
context.stroke;
context.lineWidth=3;
context.stroke();
context.beginPath();
context.moveTo(214,42);
context.quadraticCurveTo(200,56,244,64);
context.stroke;
context.lineWidth=3;
context.stroke();
context.beginPath();
context.moveTo(330,27);
context.bezierCurveTo(358,46,384,36,386,25);
context.stroke;
context.lineWidth=3;
context.stroke();
context.beginPath();
context.moveTo(327,35);
context.bezierCurveTo(351,49,398,38,392,24);
context.stroke;
context.lineWidth=3;
context.stroke();
context.beginPath();
context.moveTo(315,42);
context.bezierCurveTo(361,58,408,46,399,23);
context.stroke;
context.lineWidth=3;
context.stroke();
context.beginPath();
context.moveTo(296,51);
context.bezierCurveTo(379,62,437,46,412,24);
context.stroke;
context.lineWidth=3;
context.stroke();
////top vert curves
context.beginPath();
context.moveTo(370,55);
context.quadraticCurveTo(416,80,410,162);
context.stroke;
context.lineWidth=3;
context.stroke();
context.beginPath();
context.moveTo(389,53);
context.quadraticCurveTo(432,88,423,145);
context.stroke;
context.lineWidth=3;
context.stroke();
context.beginPath();
context.moveTo(404,49);
context.quadraticCurveTo(438,74,436,126);
context.stroke;
context.lineWidth=3;
context.stroke();
context.beginPath();
context.moveTo(416,43);
context.quadraticCurveTo(446,74,448,117);
context.stroke;
context.lineWidth=3;
context.stroke();
context.beginPath();
context.moveTo(420,36);
context.quadraticCurveTo(454,64,457,113);
context.stroke;
context.lineWidth=3;
context.stroke();
context.beginPath();
context.moveTo(420,32);
context.quadraticCurveTo(454,45,469,108);
context.stroke;
context.lineWidth=3;
context.stroke();
context.beginPath();
context.moveTo(417,30);
context.quadraticCurveTo(455,30,480,110);
context.stroke;
context.lineWidth=3;
context.stroke();
context.beginPath();
context.moveTo(419,25);
context.quadraticCurveTo(476,44,488,111);
context.stroke;
context.lineWidth=3;
context.stroke();
context.beginPath();
context.moveTo(433,27);
context.quadraticCurveTo(480,45,498,116);
context.stroke;
context.lineWidth=3;
context.stroke();
context.beginPath();
context.moveTo(360,56);
context.quadraticCurveTo(373,63,376,73);
context.stroke;
context.lineWidth=3;
context.stroke();
context.beginPath();
context.moveTo(348,56);
context.quadraticCurveTo(360,62,360,75);
context.stroke;
context.lineWidth=3;
context.stroke();
context.beginPath();
context.moveTo(337,56);
context.quadraticCurveTo(353,67,350,78);
context.stroke;
context.lineWidth=3;
context.stroke();
context.beginPath();
context.moveTo(319,55);
context.quadraticCurveTo(346,65,343,83);
context.stroke;
context.lineWidth=3;
context.stroke();
context.beginPath();
context.moveTo(298,53);
context.quadraticCurveTo(336,66,337,86);
context.stroke;
context.lineWidth=3;
context.stroke();
context.beginPath();
context.moveTo(470,52);
context.quadraticCurveTo(541,90,527,67);
context.stroke;
context.lineWidth=3;
context.stroke();
context.beginPath();
context.moveTo(457,40);
context.quadraticCurveTo(534,78,512,56);
context.stroke;
context.lineWidth=3;
context.stroke();
context.beginPath();
context.moveTo(447,30);
context.quadraticCurveTo(524,68,502,50);
context.stroke;
context.lineWidth=3;
context.stroke();
context.beginPath();
context.moveTo(387,161);
context.quadraticCurveTo(390,173,403,178);
context.stroke;
context.lineWidth=3;
context.stroke();
context.beginPath();
context.moveTo(377,162);
context.quadraticCurveTo(387,182,398,185);
context.stroke;
context.lineWidth=3;
context.stroke();
/// top front swirl
context.beginPath();
context.moveTo(393,79);
context.quadraticCurveTo(356,66,334,91);
context.stroke;
context.lineWidth=3;
context.stroke();
context.beginPath();
context.moveTo(398,88);
context.quadraticCurveTo(361,71,336,100);
context.stroke;
context.lineWidth=3;
context.stroke();
context.beginPath();
context.moveTo(405,105);
context.bezierCurveTo(393,85,345,90,341,111);
context.stroke;
context.lineWidth=3;
context.stroke();
context.beginPath();
context.moveTo(410,134);
context.quadraticCurveTo(401,159,363,151);
context.stroke;
context.lineWidth=3;
context.stroke();
context.beginPath();
context.moveTo(410,148);
context.quadraticCurveTo(400,162,369,160);
context.stroke;
context.lineWidth=3;
context.stroke();
context.beginPath();
context.moveTo(345,119);
context.bezierCurveTo(359,96,396,96,406,118);
context.bezierCurveTo(414,143,374,150,363,143);
context.stroke;
context.lineWidth=3;
context.stroke();
context.beginPath();
context.moveTo(355,118);
context.bezierCurveTo(360,108,386,104,388,118);
context.bezierCurveTo(389,124,386,132,378,131);
context.bezierCurveTo(370,132,365,129,362,124);
context.bezierCurveTo(362,121,361,112,368,111);
context.bezierCurveTo(376,110,381,116,381,119);
context.bezierCurveTo(382,122,378,126,374,125);
context.bezierCurveTo(372,126,366,121,370,117);
context.quadraticCurveTo(374,114,375,119);
context.stroke;
context.lineWidth=3;
context.stroke();
context.beginPath();
context.moveTo(353,115);
context.bezierCurveTo(363,101,400,106,396,127);
context.bezierCurveTo(395,133,387,140,368,138);
context.stroke;
context.lineWidth=3;
context.stroke();
////mid large swirl
context.beginPath();
context.moveTo(385,208);
context.quadraticCurveTo(428,134,439,123);
context.bezierCurveTo(451,112,518,83,547,184);
context.bezierCurveTo(577,288,481,323,452,231);
context.stroke;
context.lineWidth=3;
context.stroke();
context.beginPath();
context.moveTo(398,325);
context.quadraticCurveTo(432,276,434,267);
context.bezierCurveTo(439,256,460,212,467,194);
context.bezierCurveTo(475,174,492,168,499,179);
context.bezierCurveTo(506,192,504,204,499,207);
context.bezierCurveTo(495,210,486,208,487,197);
context.bezierCurveTo(489,187,492,186,493,187);
context.quadraticCurveTo(500,196,497,198);
context.quadraticCurveTo(495,200,492,197);
context.stroke;
context.lineWidth=3;
context.stroke();
context.beginPath();
context.moveTo(390,227);
context.quadraticCurveTo(432,144,444,133);
context.bezierCurveTo(456,124,496,110,524,146);
context.bezierCurveTo(552,182,539,239,529,249);
context.bezierCurveTo(522,264,490,294,457,223);
context.stroke;
context.lineWidth=3;
context.stroke();
context.beginPath();
context.moveTo(390,257);
context.quadraticCurveTo(432,166,452,147);
context.bezierCurveTo(474,130,507,128,526,170);
context.bezierCurveTo(546,212,524,250,513,254);
context.bezierCurveTo(502,259,476,260,462,212);
context.stroke;
context.lineWidth=3;
context.stroke();
context.beginPath();
context.moveTo(390,277);
context.quadraticCurveTo(431,189,457,161);
context.bezierCurveTo(485,134,515,160,519,170);
context.quadraticCurveTo(540,204,523,233);
context.bezierCurveTo(506,265,471,237,466,197);
context.stroke;
context.lineWidth=3;
context.stroke();
context.beginPath();
context.moveTo(397,288);
context.quadraticCurveTo(452,185,463,173);
context.bezierCurveTo(474,161,492,145,514,175);
context.bezierCurveTo(537,203,514,235,509,236);
context.bezierCurveTo(503,239,480,247,473,186);
context.stroke;
context.lineWidth=3;
context.stroke();
context.beginPath();
context.moveTo(398,305);
context.quadraticCurveTo(425,256,464,184);
context.bezierCurveTo(482,152,506,172,511,183);
context.bezierCurveTo(517,196,518,216,510,220);
context.bezierCurveTo(483,234,482,204,479,180);
context.stroke;
context.lineWidth=3;
context.stroke();
/// back curves
context.beginPath();
context.moveTo(534,75);
context.quadraticCurveTo(540,132,560,173);
context.bezierCurveTo(576,216,612,254,616,248);
context.stroke;
context.lineWidth=3;
context.stroke();
context.beginPath();
context.moveTo(545,87);
context.quadraticCurveTo(550,142,563,166);
context.bezierCurveTo(576,194,606,248,613,234);
context.stroke;
context.lineWidth=3;
context.stroke();
context.beginPath();
context.moveTo(556,102);
context.quadraticCurveTo(552,132,573,173);
context.bezierCurveTo(586,203,602,228,603,218);
context.stroke;
context.lineWidth=3;
context.stroke();
context.beginPath();
context.moveTo(569,121);
context.quadraticCurveTo(562,110,564,131);
context.bezierCurveTo(566,152,586,190,595,205);
context.quadraticCurveTo(601,216,600,208);
context.stroke;
context.lineWidth=3;
context.stroke();
context.beginPath();
context.moveTo(638,318);
context.quadraticCurveTo(610,280,599,343);
context.stroke;
context.lineWidth=3;
context.stroke();
context.beginPath();
context.moveTo(638,323);
context.quadraticCurveTo(614,296,606,346);
context.stroke;
context.lineWidth=3;
context.stroke();
context.beginPath();
context.moveTo(636,309);
context.quadraticCurveTo(600,263,591,342);
context.stroke;
context.lineWidth=3;
context.stroke();
context.beginPath();
context.moveTo(622,294);
context.quadraticCurveTo(592,250,582,340);
context.stroke;
context.lineWidth=3;
context.stroke();
context.beginPath();
context.moveTo(620,285);
context.quadraticCurveTo(584,236,575,340);
context.stroke;
context.lineWidth=3;
context.stroke();
context.beginPath();
context.moveTo(619,278);
context.quadraticCurveTo(568,228,566,340);
context.stroke;
context.lineWidth=3;
context.stroke();
context.beginPath();
context.moveTo(613,272);
context.quadraticCurveTo(560,203,558,340);
context.stroke;
context.lineWidth=3;
context.stroke();
context.beginPath();
context.moveTo(581,216);
context.quadraticCurveTo(580,240,595,253);
context.stroke;
context.lineWidth=3;
context.stroke();
context.beginPath();
context.moveTo(591,226);
context.quadraticCurveTo(588,240,606,264);
context.stroke;
context.lineWidth=3;
context.stroke();
context.beginPath();
context.moveTo(601,239);
context.quadraticCurveTo(596,240,613,275);
context.stroke;
context.lineWidth=3;
context.stroke();
context.beginPath();
context.moveTo(531,145);
context.quadraticCurveTo(546,148,550,156);
context.stroke;
context.lineWidth=3;
context.stroke();
context.beginPath();
context.moveTo(535,153);
context.lineTo(559,173);
context.stroke;
context.lineWidth=3;
context.stroke();
context.beginPath();
context.moveTo(541,166);
context.lineTo(563,185);
context.stroke;
context.lineWidth=3;
context.stroke();
context.beginPath();
context.moveTo(545,178);
context.lineTo(571,195);
context.stroke;
context.lineWidth=3;
context.stroke();
context.beginPath();
context.moveTo(547,186);
context.lineTo(578,207);
context.stroke;
context.lineWidth=3;
context.stroke();
context.beginPath();
context.moveTo(549,190);
context.quadraticCurveTo(578,230,568,264);
context.stroke;
context.lineWidth=3;
context.stroke();
context.beginPath();
context.moveTo(551,204);
context.quadraticCurveTo(570,238,560,261);
context.stroke;
context.lineWidth=3;
context.stroke();
context.beginPath();
context.moveTo(553,227);
context.quadraticCurveTo(562,246,550,262);
context.stroke;
context.lineWidth=3;
context.stroke();
context.beginPath();
context.moveTo(568,266);
context.quadraticCurveTo(554,256,536,273);
context.bezierCurveTo(520,290,520,320,522,327);
context.stroke;
context.lineWidth=3;
context.stroke();
context.beginPath();
context.moveTo(567,271);
context.bezierCurveTo(528,265,525,318,533,336);
context.stroke;
context.lineWidth=3;
context.stroke();
context.beginPath();
context.moveTo(565,278);
context.quadraticCurveTo(548,276,540,290);
context.bezierCurveTo(532,304,530,324,551,342);
context.stroke;
context.lineWidth=3;
context.stroke();
context.beginPath();
context.moveTo(563,285);
context.quadraticCurveTo(548,288,542,300);
context.bezierCurveTo(538,314,542,326,557,338);
context.stroke;
context.lineWidth=3;
context.stroke();
context.beginPath();
context.moveTo(561,293);
context.quadraticCurveTo(548,298,546,308);
context.bezierCurveTo(546,320,552,326,558,330);
context.stroke;
context.lineWidth=3;
context.stroke();
context.beginPath();
context.moveTo(558,302);
context.quadraticCurveTo(552,304,552,310);
context.quadraticCurveTo(552,316,558,322);
context.stroke;
context.lineWidth=3;
context.stroke();
/////////front mid curves
context.beginPath();
context.moveTo(499,283);
context.quadraticCurveTo(512,336,550,345);
context.stroke;
context.lineWidth=3;
context.stroke();
context.beginPath();
context.moveTo(491,281);
context.quadraticCurveTo(498,330,537,354);
context.stroke;
context.lineWidth=3;
context.stroke();
context.beginPath();
context.moveTo(484,277);
context.quadraticCurveTo(486,324,527,361);
context.stroke;
context.lineWidth=3;
context.stroke();
context.beginPath();
context.moveTo(471,268);
context.quadraticCurveTo(480,340,521,368);
context.stroke;
context.lineWidth=3;
context.stroke();
context.beginPath();
context.moveTo(458,249);
context.quadraticCurveTo(456,323,509,373);
context.stroke;
context.lineWidth=3;
context.stroke();
context.beginPath();
context.moveTo(447,238);
context.quadraticCurveTo(449,338,504,379);
context.stroke;
context.lineWidth=3;
context.stroke();
context.beginPath();
context.moveTo(439,257);
context.quadraticCurveTo(440,354,499,388);
context.stroke;
context.lineWidth=3;
context.stroke();
context.beginPath();
context.moveTo(430,276);
context.quadraticCurveTo(439,367,494,396);
context.stroke;
context.lineWidth=3;
context.stroke();
context.beginPath();
context.moveTo(423,289);
context.quadraticCurveTo(430,376,489,403);
context.stroke;
context.lineWidth=3;
context.stroke();
context.beginPath();
context.moveTo(390,414);
context.bezierCurveTo(407,407,430,348,435,348);
context.stroke;
context.lineWidth=3;
context.stroke();
context.beginPath();
context.moveTo(392,423);
context.bezierCurveTo(410,421,434,357,440,357);
context.stroke;
context.lineWidth=3;
context.stroke();
context.beginPath();
context.moveTo(390,433);
context.bezierCurveTo(412,434,438,362,445,365);
context.stroke;
context.lineWidth=3;
context.stroke();
context.beginPath();
context.moveTo(390,444);
context.bezierCurveTo(412,444,442,370,450,372);
context.stroke;
context.lineWidth=3;
context.stroke();
context.beginPath();
context.moveTo(414,440);
context.quadraticCurveTo(448,383,456,379);
context.stroke;
context.lineWidth=3;
context.stroke();
context.beginPath();
context.moveTo(455,381);
context.quadraticCurveTo(456,410,481,411);
context.stroke;
context.lineWidth=3;
context.stroke();
context.beginPath();
context.moveTo(460,386);
context.quadraticCurveTo(465,405,485,406);
context.stroke;
context.lineWidth=3;
context.stroke();
context.beginPath();
context.moveTo(464,407);
context.quadraticCurveTo(465,424,471,429);
context.stroke;
context.lineWidth=3;
context.stroke();
context.beginPath();
context.moveTo(471,410);
context.quadraticCurveTo(469,418,474,422);
context.stroke;
context.lineWidth=3;
context.stroke();
context.beginPath();
context.moveTo(455,390);
context.quadraticCurveTo(456,428,467,435);
context.stroke;
context.lineWidth=3;
context.stroke();
context.beginPath();
context.moveTo(449,387);
context.quadraticCurveTo(450,430,462,442);
context.stroke;
context.lineWidth=3;
context.stroke();
context.beginPath();
context.moveTo(445,394);
context.quadraticCurveTo(443,426,458,448);
context.stroke;
context.lineWidth=3;
context.stroke();
context.beginPath();
context.moveTo(439,403);
context.quadraticCurveTo(440,438,451,454);
context.stroke;
context.lineWidth=3;
context.stroke();
context.beginPath();
context.moveTo(433,411);
context.quadraticCurveTo(434,436,440,446);
context.stroke;
context.lineWidth=3;
context.stroke();
///large lower swirl
context.beginPath();
context.moveTo(385,450);
context.quadraticCurveTo(426,430,453,457);
context.stroke;
context.lineWidth=3;
context.stroke();
context.beginPath();
context.moveTo(383,461);
context.quadraticCurveTo(426,438,448,466);
context.stroke;
context.lineWidth=3;
context.stroke();
context.beginPath();
context.moveTo(380,471);
context.quadraticCurveTo(420,446,445,473);
context.stroke;
context.lineWidth=3;
context.stroke();
context.beginPath();
context.moveTo(375,489);
context.quadraticCurveTo(420,456,437,486);
context.stroke;
context.lineWidth=3;
context.stroke();
context.beginPath();
context.moveTo(370,510);
context.quadraticCurveTo(410,469,427,501);
context.stroke;
context.lineWidth=3;
context.stroke();
context.beginPath();
context.moveTo(614,354);
context.quadraticCurveTo(596,336,556,343);
context.bezierCurveTo(516,352,476,424,470,432);
context.quadraticCurveTo(412,536,401,533);
context.bezierCurveTo(392,530,388,520,395,514);
context.bezierCurveTo(400,508,409,509,408,516);
context.bezierCurveTo(408,524,400,518,400,520);
context.quadraticCurveTo(396,518,400,516);
context.stroke;
context.lineWidth=3;
context.stroke();
///////////////HOOD BORDER CONT
////CODE BY MEAGAN GLENNON!
////INNER BORDER
context.beginPath();
context.moveTo(111,202);
context.quadraticCurveTo(110,144,120,126);
context.quadraticCurveTo(136,64,197,55);
context.quadraticCurveTo(348,48,369,235);
context.quadraticCurveTo(386,432,327,563);
context.quadraticCurveTo(360,449,361,331);
context.quadraticCurveTo(346,180,320,150);
context.quadraticCurveTo(252,70,204,73);
context.bezierCurveTo(144,90,118,150,111,202);
context.closePath();
var grd = context.createLinearGradient(350, 100, 232, 350);
grd.addColorStop(1, "#313550"); //hood border shade
grd.addColorStop(0,"#4d579e"); /// hood border color
context.fill;
context.fill();
///main border
context.beginPath();
context.moveTo(175,60);
context.bezierCurveTo(238,40,316,36,366,132);
context.bezierCurveTo(404,228,406,383,387,449);
context.quadraticCurveTo(338,662,327,678);
context.lineTo(317,703);
context.lineTo(284,700);
context.quadraticCurveTo(320,572,336,532);
context.quadraticCurveTo(352,494,369,353);
context.quadraticCurveTo(372,116,277,78);
context.quadraticCurveTo(250,60,225,57);
context.closePath();
var grd = context.createLinearGradient(350, 250, 532, 400);
grd.addColorStop(1, "#313550"); //hood border shade
grd.addColorStop(0.5,"#4d579e"); /// hood border color
grd.addColorStop(0,"#7d86c8"); ///hood highlight
context.fill;
context.fill();
//top of head border design
context.beginPath();
context.moveTo(225,55);
context.quadraticCurveTo(274,16,310,14);
context.bezierCurveTo(342,10,442,2,503,52);
context.quadraticCurveTo(400,-3,291,61);
context.closePath();
var grd = context.createLinearGradient(350, 250, 532, 400);
grd.addColorStop(1, "#313550"); //hood border shade
grd.addColorStop(0.5,"#4d579e"); /// hood border color
grd.addColorStop(0,"#7d86c8"); ///hood highlight
context.fill;
context.fill();
////shoulder border
context.beginPath();
context.moveTo(263,779);
context.lineTo(279,802);
context.bezierCurveTo(320,790,346,788,372,802);
context.lineTo(452,802);
context.quadraticCurveTo(384,755,327,754);
var grd = context.createLinearGradient(700, 730, 700, 800);
grd.addColorStop(1, "#313550"); //hood border shade
grd.addColorStop(0.5,"#4d579e"); /// hood border color
grd.addColorStop(0,"#7d86c8"); ///hood highlight
context.fill;
context.fill();
///// BROOCHES
//connecting strap
context.beginPath();
context.moveTo(202,704);
context.quadraticCurveTo(259,708,276,701);
context.lineTo(266,761);
context.quadraticCurveTo(194,770,175,754);
context.closePath();
var grd = context.createLinearGradient(700, 670, 700, 750);
grd.addColorStop(0, "#4b4c6a"); ///light grey blue
grd.addColorStop(1,"#15162a"); ///dark blue
context.fill;
context.fill();
//left
context.beginPath();
context.moveTo(209,685);
context.quadraticCurveTo(220,689,218,699);
context.bezierCurveTo(216,721,208,742,195,762);
context.quadraticCurveTo(185,778,162,787);
context.quadraticCurveTo(154,786,154,778);
context.closePath();
var grd = context.createLinearGradient(216, 575, 180, 751);
grd.addColorStop(1, "#212433"); //dark brooch color
grd.addColorStop(0,"#6a7194"); ///light brooch color
context.fill;
context.fill();
context.beginPath();
context.moveTo(205,684);
context.bezierCurveTo(216,685,213,707,200,732);
context.bezierCurveTo(189,757,168,780,157,779);
context.bezierCurveTo(146,779,152,756,164,730);
context.bezierCurveTo(176,705,195,684,205,684);
context.closePath();
var grd = context.createLinearGradient(216, 650, 180, 751);
grd.addColorStop(1, "#212433"); //dark brooch color
grd.addColorStop(0.5,"#505b74"); ///light brooch color
grd.addColorStop(0,"#c8daf2"); // brooch high light
context.fill;
context.fill();
//right
context.beginPath();
context.moveTo(258,736);
context.bezierCurveTo(270,708,301,685,327,684);
context.bezierCurveTo(355,685,367,709,354,737);
context.bezierCurveTo(343,764,312,789,284,789);
context.bezierCurveTo(258,789,246,766,258,736);
context.closePath();
var grd = context.createLinearGradient(316, 550, 180, 651);
grd.addColorStop(1, "#212433"); //dark brooch color
grd.addColorStop(0,"#505b74"); ///light brooch color
context.fill;
context.fill();
context.beginPath();
context.moveTo(250,728);
context.bezierCurveTo(262,700,293,677,319,676);
context.bezierCurveTo(347,677,359,701,346,729);
context.bezierCurveTo(335,756,304,781,276,781);
context.bezierCurveTo(250,781,238,758,250,728);
context.closePath();
var grd = context.createLinearGradient(316, 550, 180, 651);
grd.addColorStop(1, "#212433"); //dark brooch color
grd.addColorStop(0.5,"#505b74"); ///light brooch color
grd.addColorStop(0,"#c8daf2"); // brooch high light
context.fill;
context.fill();
////BROOCH DETAILS
//right
context.beginPath();
context.moveTo(301,710);
context.bezierCurveTo(310,710,314,718,311,725);
context.bezierCurveTo(310,734,301,740,293,740);
context.bezierCurveTo(286,740,280,734,283,725);
context.bezierCurveTo(286,718,292,710,301,710);
context.stroke;
context.lineWidth=3;
context.stroke();
context.beginPath();
context.moveTo(306,694);
context.bezierCurveTo(322,697,332,710,326,725);
context.bezierCurveTo(322,744,306,756,289,756);
context.bezierCurveTo(273,757,264,744,268,726);
context.bezierCurveTo(273,710,290,696,306,694);
context.stroke;
context.lineWidth=3;
context.stroke();
context.beginPath();
context.moveTo(250,728);
context.bezierCurveTo(262,700,293,677,319,676);
context.bezierCurveTo(347,677,359,701,346,729);
context.bezierCurveTo(335,756,304,781,276,781);
context.bezierCurveTo(250,781,238,758,250,728);
context.closePath();
context.stroke;
context.lineWidth=3;
context.stroke();
//left
context.beginPath();
context.moveTo(186,716);
context.bezierCurveTo(189,716,189,723,185,730);
context.bezierCurveTo(182,739,176,745,174,745);
context.bezierCurveTo(170,746,170,739,174,731);
context.bezierCurveTo(178,723,183,716,186,716);
context.closePath();
context.stroke;
context.lineWidth=3;
context.stroke();
context.beginPath();
context.moveTo(196,698);
context.bezierCurveTo(203,698,200,712,192,728);
context.bezierCurveTo(185,744,174,757,167,757);
context.bezierCurveTo(162,758,164,744,172,728);
context.bezierCurveTo(181,712,191,698,196,698);
context.closePath();
context.stroke;
context.lineWidth=3;
context.stroke();
context.beginPath();
context.moveTo(205,684);
context.bezierCurveTo(216,685,213,707,200,732);
context.bezierCurveTo(189,757,168,780,157,779);
context.bezierCurveTo(146,779,152,756,164,730);
context.bezierCurveTo(176,705,195,684,205,684);
context.closePath();
context.stroke;
context.lineWidth=3;
context.stroke();
////// water mark
context.font = "40pt Calibri";
context.fillStyle = "rgba(255,255,255,0.3)";
context.fillText("CODE BY",10, 750);
context.font = "40pt Calibri";
context.fillStyle = "rgba(255,255,255,0.3)";
context.fillText("MEAGAN GLENNON",10, 800);
////////////////////////////////////// end here
};
/////code by meagan glennon!
</script>
</head>
<body>
<canvas id="myCanvas" width="700" height="800"></canvas>
</body>
</html>
"Twist"
<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var R1 = Math.round(Math.random()*255);
var G1 = Math.round(Math.random()*255);
var B1 = Math.round(Math.random()*255);
var RGBA1 = "rgba("+R1+","+G1+","+B1+",0.03)";
var R2 = Math.round(Math.random()*255);
var G2 = Math.round(Math.random()*255);
var B2 = Math.round(Math.random()*255);
var RGBA2 = "rgba("+R2+","+G2+","+B2+",1)";
var R3 = Math.round(Math.random()*255);
var G3 = Math.round(Math.random()*255);
var B3 = Math.round(Math.random()*255);
var RGBA3 = "rgba("+R3+","+G3+","+B3+",1)";
var R4 = Math.round(Math.random()*255);
var G4 = Math.round(Math.random()*255);
var B4 = Math.round(Math.random()*255);
var RGBA4 = "rgba("+R4+","+G4+","+B4+",0.03)";
var R5 = Math.round(Math.random()*255);
var G5 = Math.round(Math.random()*255);
var B5 = Math.round(Math.random()*255);
var RGBA5 = "rgba("+R5+","+G5+","+B5+",1)";
for (var i=0; i<700; i+=1) {
var x = canvas.width * Math.random();
var y = canvas.height * Math.random();
// var rad = i;
var rad = Math.random()*100;
var startA = 0;
var endA = Math.PI * 2;
var cw = true;
var x1 = x ;
var y1 = y ;
var x2 = x + i;
var y2 = y + i;
context.beginPath();
context.arc(x,y,rad,startA,endA,cw);
var grd = context.createRadialGradient(x1,y1,rad/5,x1,y1,rad);
grd.addColorStop(0, RGBA5);
grd.addColorStop(0.5, RGBA4);
grd.addColorStop(1, RGBA1);
context.fillStyle = grd;
context.fill();
//context.stroke();
context.closePath();
}
var inc = 5;
for (var i=0; i < canvas.height; i+=inc ) {
hcurves(canvas.width-i, canvas.height/2, 0,i,0,0, RGBA1, RGBA2 );
hcurves(i, canvas.height/2, canvas.width,canvas.height-i,canvas.width,canvas.height, RGBA1, RGBA2 );
hcurves(canvas.width/2, i,i,0,canvas.width, 0, RGBA4, RGBA3);
hcurves(canvas.width/2, i, i, canvas.height, 0, canvas.height, RGBA4, RGBA3);
/*context.beginPath();
context.moveTo(canvas.width-i, 400);
context.lineTo(0,i);
context.lineTo(0,0);
context.fill;
context.fill();
context.stroke RGBA2;
context.stroke();
context.closePath();
context.beginPath();
context.moveTo(i, canvas.height/2);
context.lineTo(canvas.width, canvas.height-i);
context.lineTo(canvas.width, canvas.height);
context.fillStyle = RGBA1;
context.fill();
context.stroke RGBA2;
context.stroke();
context.closePath();
context.beginPath();
context.moveTo(canvas.width/2, i);
context.lineTo(i,0);
context.lineTo(canvas.width, 0);
context.fillStyle = RGBA4;
context.fill();
context.stroke RGBA3;
context.stroke();
context.closePath();
context.beginPath();
context.moveTo(400, i);
context.lineTo(i, canvas.height);
context.lineTo(0, canvas.height);
context.fillStyle = RGBA4;
context.fill();
context.stroke RGBA3;
context.stroke();
context.closePath();
*/
}
for (var i=0; i<50; i+=1) {
var x = canvas.width * Math.random();
var y = canvas.height * Math.random();
// var rad = i;
var rad = Math.random()*50;
var startA = 0;
var endA = Math.PI * 2;
var cw = true;
var x1 = x ;
var y1 = y ;
var x2 = x + i;
var y2 = y + i;
context.beginPath();
context.arc(x,y,rad,startA,endA,cw);
var grd = context.createRadialGradient(x1,y1,rad/5,x1,y1,rad);
grd.addColorStop(0, RGBA3);
grd.addColorStop(0.5, RGBA4);
grd.addColorStop(1, RGBA1);
context.fillStyle = grd;
context.fill();
//context.stroke();
context.closePath();
}
function hcurves(startx, starty, x2, y2, x3, y3, color1, color2 ) {
context.beginPath();
context.moveTo(startx, starty);
context.lineTo(x2,y2);
context.lineTo(x3,y3);
context.fill;
context.fill();
context.stroke color2;
context.stroke();
context.closePath();
}
};
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="800"></canvas>
</body>
</html>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var R1 = Math.round(Math.random()*255);
var G1 = Math.round(Math.random()*255);
var B1 = Math.round(Math.random()*255);
var RGBA1 = "rgba("+R1+","+G1+","+B1+",0.03)";
var R2 = Math.round(Math.random()*255);
var G2 = Math.round(Math.random()*255);
var B2 = Math.round(Math.random()*255);
var RGBA2 = "rgba("+R2+","+G2+","+B2+",1)";
var R3 = Math.round(Math.random()*255);
var G3 = Math.round(Math.random()*255);
var B3 = Math.round(Math.random()*255);
var RGBA3 = "rgba("+R3+","+G3+","+B3+",1)";
var R4 = Math.round(Math.random()*255);
var G4 = Math.round(Math.random()*255);
var B4 = Math.round(Math.random()*255);
var RGBA4 = "rgba("+R4+","+G4+","+B4+",0.03)";
var R5 = Math.round(Math.random()*255);
var G5 = Math.round(Math.random()*255);
var B5 = Math.round(Math.random()*255);
var RGBA5 = "rgba("+R5+","+G5+","+B5+",1)";
for (var i=0; i<700; i+=1) {
var x = canvas.width * Math.random();
var y = canvas.height * Math.random();
// var rad = i;
var rad = Math.random()*100;
var startA = 0;
var endA = Math.PI * 2;
var cw = true;
var x1 = x ;
var y1 = y ;
var x2 = x + i;
var y2 = y + i;
context.beginPath();
context.arc(x,y,rad,startA,endA,cw);
var grd = context.createRadialGradient(x1,y1,rad/5,x1,y1,rad);
grd.addColorStop(0, RGBA5);
grd.addColorStop(0.5, RGBA4);
grd.addColorStop(1, RGBA1);
context.fillStyle = grd;
context.fill();
//context.stroke();
context.closePath();
}
var inc = 5;
for (var i=0; i < canvas.height; i+=inc ) {
hcurves(canvas.width-i, canvas.height/2, 0,i,0,0, RGBA1, RGBA2 );
hcurves(i, canvas.height/2, canvas.width,canvas.height-i,canvas.width,canvas.height, RGBA1, RGBA2 );
hcurves(canvas.width/2, i,i,0,canvas.width, 0, RGBA4, RGBA3);
hcurves(canvas.width/2, i, i, canvas.height, 0, canvas.height, RGBA4, RGBA3);
/*context.beginPath();
context.moveTo(canvas.width-i, 400);
context.lineTo(0,i);
context.lineTo(0,0);
context.fill;
context.fill();
context.stroke RGBA2;
context.stroke();
context.closePath();
context.beginPath();
context.moveTo(i, canvas.height/2);
context.lineTo(canvas.width, canvas.height-i);
context.lineTo(canvas.width, canvas.height);
context.fillStyle = RGBA1;
context.fill();
context.stroke RGBA2;
context.stroke();
context.closePath();
context.beginPath();
context.moveTo(canvas.width/2, i);
context.lineTo(i,0);
context.lineTo(canvas.width, 0);
context.fillStyle = RGBA4;
context.fill();
context.stroke RGBA3;
context.stroke();
context.closePath();
context.beginPath();
context.moveTo(400, i);
context.lineTo(i, canvas.height);
context.lineTo(0, canvas.height);
context.fillStyle = RGBA4;
context.fill();
context.stroke RGBA3;
context.stroke();
context.closePath();
*/
}
for (var i=0; i<50; i+=1) {
var x = canvas.width * Math.random();
var y = canvas.height * Math.random();
// var rad = i;
var rad = Math.random()*50;
var startA = 0;
var endA = Math.PI * 2;
var cw = true;
var x1 = x ;
var y1 = y ;
var x2 = x + i;
var y2 = y + i;
context.beginPath();
context.arc(x,y,rad,startA,endA,cw);
var grd = context.createRadialGradient(x1,y1,rad/5,x1,y1,rad);
grd.addColorStop(0, RGBA3);
grd.addColorStop(0.5, RGBA4);
grd.addColorStop(1, RGBA1);
context.fillStyle = grd;
context.fill();
//context.stroke();
context.closePath();
}
function hcurves(startx, starty, x2, y2, x3, y3, color1, color2 ) {
context.beginPath();
context.moveTo(startx, starty);
context.lineTo(x2,y2);
context.lineTo(x3,y3);
context.fill;
context.fill();
context.stroke color2;
context.stroke();
context.closePath();
}
};
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="800"></canvas>
</body>
</html>
"Fall"
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title> fall </title>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var canvas1 = document.createElement("canvas");
var context1 = canvas1.getContext("2d");
////swirl
for (var i=1; i<200; i+=1){
var centerX = 0*i;
var centerY = 50+i;
var radius = 200-i;
var R = Math.round(Math.random()* 255);
var G = Math.round(Math.random()* 255);
var B = Math.round(Math.random()* 255);
var RGBA1 = "rgba("+R+", "+G+", 0, 0.3)";
var RGBA2 = "rgba("+B+", 0, "+G+", 0.5)";
context.save();
context.translate(canvas.width / 2, canvas.height / 2);
context.rotate(Math.PI/i*canvas.width);
context.scale(2, 1);
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.restore();
context.fillStyle = RGBA1;
context.fill();
context.lineWidth = 5-i;
context.strokeStyle = RGBA2;
context.stroke();
}
///lines
for (var i=1; i<canvas1.height; i+=10) {
var x = 0+i;
var y = 0;
var c1 = canvas1.width+i;
var c2 = 0;
var c3 = canvas1.width-i;
var c4 = canvas1.height;
var x2 = canvas1.width-i;
var y2 = canvas1.height;
var R = Math.round(Math.random()* 255);
var G = Math.round(Math.random()* 255);
var B = Math.round(Math.random()* 255);
var STROKE = "rgba("+R+", "+G+", 0, .5)";
var R = Math.round(Math.random()* 255);
var G = Math.round(Math.random()* 255);
var B = Math.round(Math.random()* 255);
var FILL = "rgba("+R+", "+G+", "+B+", .08)";
context1.beginPath();
context1.moveTo(x,y);
context1.bezierCurveTo(c1,c2,c3,c4,x2,y2);
context1.lineWidth = i/100;
context1.strokeStyle = STROKE;
//context1.fill FILL;
//context1.fill();
context1.stroke();
context1.closePath();
}
for (var i=1; i<canvas1.height; i+=20) {
var x = 0+i;
var y = 0;
var c1 = canvas1.width/2-i;
var c2 = 0;
var c3 = canvas1.width/2-i;
var c4 = canvas1.height;
var x2 = 0+i;
var y2 = canvas1.height;
var R = Math.round(Math.random()* 255);
var G = Math.round(Math.random()* 255);
var B = Math.round(Math.random()* 255);
var STROKE = "rgba("+R+", "+G+", 0, .5)";
var R = Math.round(Math.random()* 255);
var G = Math.round(Math.random()* 255);
var B = Math.round(Math.random()* 255);
var FILL = "rgba("+R+", "+G+", 0, .08)";
context1.beginPath();
context1.moveTo(x,y);
context1.bezierCurveTo(c1,c2,c3,c4,x2,y2);
context1.lineWidth = i/100;
context1.strokeStyle = STROKE;
//context1.fill FILL;
//context1.fill();
context1.stroke();
}
context.drawImage(canvas1, 0,0, canvas.width, canvas.height);
context.save();
context.translate(canvas.width/2, canvas.height/2);
for (var i=1; i<10; i+=1) {
context.rotate(Math.PI/canvas.width+i);
//context.scale(1,-1);
context.drawImage(canvas1, 0,0, canvas.width, canvas.height);
};
context.restore();
///lines unrotated
for (var i=1; i<canvas.height; i+=10) {
var x = 0+i;
var y = 0;
var c1 = canvas.width+i;
var c2 = 0;
var c3 = canvas.width-i;
var c4 = canvas.height;
var x2 = canvas.width-i;
var y2 = canvas.height;
var R = Math.round(Math.random()* 255);
var G = Math.round(Math.random()* 255);
var B = Math.round(Math.random()* 255);
var STROKE = "rgba("+R+", "+G+", 0, .5)";
var R = Math.round(Math.random()* 255);
var G = Math.round(Math.random()* 255);
var B = Math.round(Math.random()* 255);
var FILL = "rgba("+R+", "+G+", "+B+", .08)";
context.beginPath();
context.moveTo(x,y);
context.bezierCurveTo(c1,c2,c3,c4,x2,y2);
context.lineWidth = i/100;
context.strokeStyle = STROKE;
//context.fill FILL;
//context.fill();
context.stroke();
context.closePath();
}
for (var i=1; i<canvas.height; i+=20) {
var x = 0+i;
var y = 0;
var c1 = canvas.width/2-i;
var c2 = 0;
var c3 = canvas.width/2-i;
var c4 = canvas.height;
var x2 = 0+i;
var y2 = canvas.height;
var R = Math.round(Math.random()* 255);
var G = Math.round(Math.random()* 255);
var B = Math.round(Math.random()* 255);
var STROKE = "rgba("+R+", "+G+", 0, .5)";
var R = Math.round(Math.random()* 255);
var G = Math.round(Math.random()* 255);
var B = Math.round(Math.random()* 255);
var FILL = "rgba("+R+", "+G+", 0, .08)";
context.beginPath();
context.moveTo(x,y);
context.bezierCurveTo(c1,c2,c3,c4,x2,y2);
context.lineWidth = i/100;
context.strokeStyle = STROKE;
//context.fill FILL;
//context.fill();
context.stroke();
}
};
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="800"></canvas>
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<title> fall </title>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var canvas1 = document.createElement("canvas");
var context1 = canvas1.getContext("2d");
////swirl
for (var i=1; i<200; i+=1){
var centerX = 0*i;
var centerY = 50+i;
var radius = 200-i;
var R = Math.round(Math.random()* 255);
var G = Math.round(Math.random()* 255);
var B = Math.round(Math.random()* 255);
var RGBA1 = "rgba("+R+", "+G+", 0, 0.3)";
var RGBA2 = "rgba("+B+", 0, "+G+", 0.5)";
context.save();
context.translate(canvas.width / 2, canvas.height / 2);
context.rotate(Math.PI/i*canvas.width);
context.scale(2, 1);
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.restore();
context.fillStyle = RGBA1;
context.fill();
context.lineWidth = 5-i;
context.strokeStyle = RGBA2;
context.stroke();
}
///lines
for (var i=1; i<canvas1.height; i+=10) {
var x = 0+i;
var y = 0;
var c1 = canvas1.width+i;
var c2 = 0;
var c3 = canvas1.width-i;
var c4 = canvas1.height;
var x2 = canvas1.width-i;
var y2 = canvas1.height;
var R = Math.round(Math.random()* 255);
var G = Math.round(Math.random()* 255);
var B = Math.round(Math.random()* 255);
var STROKE = "rgba("+R+", "+G+", 0, .5)";
var R = Math.round(Math.random()* 255);
var G = Math.round(Math.random()* 255);
var B = Math.round(Math.random()* 255);
var FILL = "rgba("+R+", "+G+", "+B+", .08)";
context1.beginPath();
context1.moveTo(x,y);
context1.bezierCurveTo(c1,c2,c3,c4,x2,y2);
context1.lineWidth = i/100;
context1.strokeStyle = STROKE;
//context1.fill FILL;
//context1.fill();
context1.stroke();
context1.closePath();
}
for (var i=1; i<canvas1.height; i+=20) {
var x = 0+i;
var y = 0;
var c1 = canvas1.width/2-i;
var c2 = 0;
var c3 = canvas1.width/2-i;
var c4 = canvas1.height;
var x2 = 0+i;
var y2 = canvas1.height;
var R = Math.round(Math.random()* 255);
var G = Math.round(Math.random()* 255);
var B = Math.round(Math.random()* 255);
var STROKE = "rgba("+R+", "+G+", 0, .5)";
var R = Math.round(Math.random()* 255);
var G = Math.round(Math.random()* 255);
var B = Math.round(Math.random()* 255);
var FILL = "rgba("+R+", "+G+", 0, .08)";
context1.beginPath();
context1.moveTo(x,y);
context1.bezierCurveTo(c1,c2,c3,c4,x2,y2);
context1.lineWidth = i/100;
context1.strokeStyle = STROKE;
//context1.fill FILL;
//context1.fill();
context1.stroke();
}
context.drawImage(canvas1, 0,0, canvas.width, canvas.height);
context.save();
context.translate(canvas.width/2, canvas.height/2);
for (var i=1; i<10; i+=1) {
context.rotate(Math.PI/canvas.width+i);
//context.scale(1,-1);
context.drawImage(canvas1, 0,0, canvas.width, canvas.height);
};
context.restore();
///lines unrotated
for (var i=1; i<canvas.height; i+=10) {
var x = 0+i;
var y = 0;
var c1 = canvas.width+i;
var c2 = 0;
var c3 = canvas.width-i;
var c4 = canvas.height;
var x2 = canvas.width-i;
var y2 = canvas.height;
var R = Math.round(Math.random()* 255);
var G = Math.round(Math.random()* 255);
var B = Math.round(Math.random()* 255);
var STROKE = "rgba("+R+", "+G+", 0, .5)";
var R = Math.round(Math.random()* 255);
var G = Math.round(Math.random()* 255);
var B = Math.round(Math.random()* 255);
var FILL = "rgba("+R+", "+G+", "+B+", .08)";
context.beginPath();
context.moveTo(x,y);
context.bezierCurveTo(c1,c2,c3,c4,x2,y2);
context.lineWidth = i/100;
context.strokeStyle = STROKE;
//context.fill FILL;
//context.fill();
context.stroke();
context.closePath();
}
for (var i=1; i<canvas.height; i+=20) {
var x = 0+i;
var y = 0;
var c1 = canvas.width/2-i;
var c2 = 0;
var c3 = canvas.width/2-i;
var c4 = canvas.height;
var x2 = 0+i;
var y2 = canvas.height;
var R = Math.round(Math.random()* 255);
var G = Math.round(Math.random()* 255);
var B = Math.round(Math.random()* 255);
var STROKE = "rgba("+R+", "+G+", 0, .5)";
var R = Math.round(Math.random()* 255);
var G = Math.round(Math.random()* 255);
var B = Math.round(Math.random()* 255);
var FILL = "rgba("+R+", "+G+", 0, .08)";
context.beginPath();
context.moveTo(x,y);
context.bezierCurveTo(c1,c2,c3,c4,x2,y2);
context.lineWidth = i/100;
context.strokeStyle = STROKE;
//context.fill FILL;
//context.fill();
context.stroke();
}
};
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="800"></canvas>
</body>
</html>
"Jelly"
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title> jelly </title>
<script>
var canvas;
var context;
window.onload =function init() {
canvas = document.getElementById("myCanvas");
context = canvas.getContext("2d");
// FILL BACKGROUND
context.fillStyle = "black";
context.fillRect(0,0,canvas.width, canvas.height);
///berbles
var R1 = Math.round(Math.random()*55);
var G1 = Math.round(Math.random()*155);
var B1 = Math.round(Math.random()*255);
var RGBA1 = "rgba("+R1+","+G1+","+B1+",0.03)";
var R4 = Math.round(Math.random()*55);
var G4 = Math.round(Math.random()*155);
var B4 = Math.round(Math.random()*255);
var RGBA4 = "rgba("+R4+","+G4+","+B4+",0.03)";
var R5 = Math.round(Math.random()*55);
var G5 = Math.round(Math.random()*155);
var B5 = Math.round(Math.random()*255);
var RGBA5 = "rgba("+R5+","+G5+","+B5+",.5)";
for (var i=0; i<500; i+=5) {
var x = canvas.width * Math.random();
var y = canvas.height * Math.random();
// var rad = i;
var rad = Math.random()*100;
var startA = 0;
var endA = Math.PI * 2;
var cw = true;
var x1 = x ;
var y1 = y ;
var x2 = x + i;
var y2 = y + i;
context.beginPath();
context.arc(x,y,rad,startA,endA,cw);
var grd = context.createRadialGradient(x1,y1,rad/5,x1,y1,rad);
grd.addColorStop(0, RGBA5);
grd.addColorStop(0.5, RGBA4);
grd.addColorStop(1, RGBA1);
context.fillStyle = grd;
context.fill();
//context.stroke();
context.closePath();
}
////swirl
for (var i=1; i<200; i+=1){
var centerX = 0*i;
var centerY = 50+i;
var radius = 200-i;
var R = Math.round(Math.random()* 255);
var G = Math.round(Math.random()* 255);
var B = Math.round(Math.random()* 255);
var RGBA1 = "rgba("+R+", "+G+", "+B+", 0.3)";
var RGBA2 = "rgba("+B+", "+R+", "+G+", 0.5)";
context.save();
context.translate(canvas.width / 2, canvas.height / 2);
context.rotate(Math.PI/i*canvas.width);
context.scale(2, 1);
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.restore();
context.fillStyle = RGBA1;
context.fill();
context.lineWidth = 5-i;
context.strokeStyle = RGBA2;
context.stroke();
}
///jellys
for (var i=1; i<40; i+=10){
var imageObj = new Image();
var cw= canvas.width/8
var ch= canvas.height/8
var a = Math.PI*2/24
var w = canvas.width/2
var h = canvas.height/2
Pokeball(imageObj,cw,ch,i);
}
function Pokeball(imageObj,cw,ch,i){
imageObj.onload = function() {
;
context.save();
context.translate(canvas.width/2, canvas.height/2);
for (var i=1; i<100; i++) {
context.rotate(a);
context.translate (w/100+i,h/100);
context.drawImage(imageObj, -cw,-ch, cw/2, ch);
}
context.restore();
}
imageObj.src = 'jelly2.png';
}
}
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="800"></canvas>
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<title> jelly </title>
<script>
var canvas;
var context;
window.onload =function init() {
canvas = document.getElementById("myCanvas");
context = canvas.getContext("2d");
// FILL BACKGROUND
context.fillStyle = "black";
context.fillRect(0,0,canvas.width, canvas.height);
///berbles
var R1 = Math.round(Math.random()*55);
var G1 = Math.round(Math.random()*155);
var B1 = Math.round(Math.random()*255);
var RGBA1 = "rgba("+R1+","+G1+","+B1+",0.03)";
var R4 = Math.round(Math.random()*55);
var G4 = Math.round(Math.random()*155);
var B4 = Math.round(Math.random()*255);
var RGBA4 = "rgba("+R4+","+G4+","+B4+",0.03)";
var R5 = Math.round(Math.random()*55);
var G5 = Math.round(Math.random()*155);
var B5 = Math.round(Math.random()*255);
var RGBA5 = "rgba("+R5+","+G5+","+B5+",.5)";
for (var i=0; i<500; i+=5) {
var x = canvas.width * Math.random();
var y = canvas.height * Math.random();
// var rad = i;
var rad = Math.random()*100;
var startA = 0;
var endA = Math.PI * 2;
var cw = true;
var x1 = x ;
var y1 = y ;
var x2 = x + i;
var y2 = y + i;
context.beginPath();
context.arc(x,y,rad,startA,endA,cw);
var grd = context.createRadialGradient(x1,y1,rad/5,x1,y1,rad);
grd.addColorStop(0, RGBA5);
grd.addColorStop(0.5, RGBA4);
grd.addColorStop(1, RGBA1);
context.fillStyle = grd;
context.fill();
//context.stroke();
context.closePath();
}
////swirl
for (var i=1; i<200; i+=1){
var centerX = 0*i;
var centerY = 50+i;
var radius = 200-i;
var R = Math.round(Math.random()* 255);
var G = Math.round(Math.random()* 255);
var B = Math.round(Math.random()* 255);
var RGBA1 = "rgba("+R+", "+G+", "+B+", 0.3)";
var RGBA2 = "rgba("+B+", "+R+", "+G+", 0.5)";
context.save();
context.translate(canvas.width / 2, canvas.height / 2);
context.rotate(Math.PI/i*canvas.width);
context.scale(2, 1);
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.restore();
context.fillStyle = RGBA1;
context.fill();
context.lineWidth = 5-i;
context.strokeStyle = RGBA2;
context.stroke();
}
///jellys
for (var i=1; i<40; i+=10){
var imageObj = new Image();
var cw= canvas.width/8
var ch= canvas.height/8
var a = Math.PI*2/24
var w = canvas.width/2
var h = canvas.height/2
Pokeball(imageObj,cw,ch,i);
}
function Pokeball(imageObj,cw,ch,i){
imageObj.onload = function() {
;
context.save();
context.translate(canvas.width/2, canvas.height/2);
for (var i=1; i<100; i++) {
context.rotate(a);
context.translate (w/100+i,h/100);
context.drawImage(imageObj, -cw,-ch, cw/2, ch);
}
context.restore();
}
imageObj.src = 'jelly2.png';
}
}
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="800"></canvas>
</body>
</html>
"King"
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title> king </title>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
////background
var m = 20;
var inc = 12;
for (var i=1; i<m; i++) {
var x = 0 +i*inc;
var y = 0 +i*inc;
var w = canvas.width -2*inc*i;
var h = canvas.height - 2*inc*i;
var C = Math.round(Math.random()*255);
context.beginPath();
context.rect(x, y, w, h);
context.fillStyle = "rgba("+C+","+C+","+C+",0.5)";
context.fill();
context.lineWidth = 5;
context.strokeStyle = "black";
context.stroke();
context.closePath();
}
///// twister
for (var i=0; i<100; i++){
var x = canvas.width+i;
var y = 0+i;
var x2 = -10+i;
var y2 = canvas.height+10+i;
var cx1 = 0+i;
var cy1 = 0+i;
var cx2 = canvas.width+i;
var cy2 = canvas.height+i;
var C = Math.round(Math.random()*255);
context.beginPath();
context.moveTo(x,y);
context.bezierCurveTo(cx1,cy1,cx2,cy2,x2,y2);
context.bezierCurveTo(cx1,cy1,cx2,cy2,x,y);
context.stroke+C+","+C+","+C+",0.5)"
context.stroke();
context.closePath();
}
var inc = 30;
for (var i=0; i < canvas.height; i+=inc ) {
context.beginPath();
context.moveTo(canvas.width-i, 0);
context.lineTo(0, i);
context.lineTo(0,0);
context.stroke "rgba("+C+","+C+","+C+",0.5)";
context.stroke();
context.closePath();
context.beginPath();
context.moveTo(i, canvas.height);
context.lineTo(canvas.width, canvas.height-i);
context.lineTo(canvas.width, canvas.height);
context.stroke+C+","+C+","+C+",0.5)";
context.stroke();
context.closePath();
}
//// double moe
var image1 = new Image();
image1.src = "moeK.png";
image1.onload = function() {
for (var i=0; i<2; i++) {
context.save();
context.translate(canvas.width/2, canvas.height/2 );
context.rotate(Math.PI*2*i/2);
context.drawImage(image1, 0, 0,500,500);
context.restore();
}
}
};
</script>
</head>
<body>
<canvas id="myCanvas" width="600" height="800"></canvas>
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<title> king </title>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
////background
var m = 20;
var inc = 12;
for (var i=1; i<m; i++) {
var x = 0 +i*inc;
var y = 0 +i*inc;
var w = canvas.width -2*inc*i;
var h = canvas.height - 2*inc*i;
var C = Math.round(Math.random()*255);
context.beginPath();
context.rect(x, y, w, h);
context.fillStyle = "rgba("+C+","+C+","+C+",0.5)";
context.fill();
context.lineWidth = 5;
context.strokeStyle = "black";
context.stroke();
context.closePath();
}
///// twister
for (var i=0; i<100; i++){
var x = canvas.width+i;
var y = 0+i;
var x2 = -10+i;
var y2 = canvas.height+10+i;
var cx1 = 0+i;
var cy1 = 0+i;
var cx2 = canvas.width+i;
var cy2 = canvas.height+i;
var C = Math.round(Math.random()*255);
context.beginPath();
context.moveTo(x,y);
context.bezierCurveTo(cx1,cy1,cx2,cy2,x2,y2);
context.bezierCurveTo(cx1,cy1,cx2,cy2,x,y);
context.stroke+C+","+C+","+C+",0.5)"
context.stroke();
context.closePath();
}
var inc = 30;
for (var i=0; i < canvas.height; i+=inc ) {
context.beginPath();
context.moveTo(canvas.width-i, 0);
context.lineTo(0, i);
context.lineTo(0,0);
context.stroke "rgba("+C+","+C+","+C+",0.5)";
context.stroke();
context.closePath();
context.beginPath();
context.moveTo(i, canvas.height);
context.lineTo(canvas.width, canvas.height-i);
context.lineTo(canvas.width, canvas.height);
context.stroke+C+","+C+","+C+",0.5)";
context.stroke();
context.closePath();
}
//// double moe
var image1 = new Image();
image1.src = "moeK.png";
image1.onload = function() {
for (var i=0; i<2; i++) {
context.save();
context.translate(canvas.width/2, canvas.height/2 );
context.rotate(Math.PI*2*i/2);
context.drawImage(image1, 0, 0,500,500);
context.restore();
}
}
};
</script>
</head>
<body>
<canvas id="myCanvas" width="600" height="800"></canvas>
</body>
</html>
"Moe Mobile"
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title> king </title>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
////background
var m = 20;
var inc = 12;
for (var i=1; i<m; i++) {
var x = 0 +i*inc;
var y = 0 +i*inc;
var w = canvas.width -2*inc*i;
var h = canvas.height - 2*inc*i;
var C = Math.round(Math.random()*255);
context.beginPath();
context.rect(x, y, w, h);
context.fillStyle = "rgba("+C+","+C+","+C+",0.5)";
context.fill();
context.lineWidth = 5;
context.strokeStyle = "black";
context.stroke();
context.closePath();
}
///// twister
for (var i=0; i<100; i++){
var x = canvas.width+i;
var y = 0+i;
var x2 = -10+i;
var y2 = canvas.height+10+i;
var cx1 = 0+i;
var cy1 = 0+i;
var cx2 = canvas.width+i;
var cy2 = canvas.height+i;
var C = Math.round(Math.random()*255);
context.beginPath();
context.moveTo(x,y);
context.bezierCurveTo(cx1,cy1,cx2,cy2,x2,y2);
context.bezierCurveTo(cx1,cy1,cx2,cy2,x,y);
context.stroke+C+","+C+","+C+",0.5)"
context.stroke();
context.closePath();
}
var inc = 30;
for (var i=0; i < canvas.height; i+=inc ) {
context.beginPath();
context.moveTo(canvas.width-i, 0);
context.lineTo(0, i);
context.lineTo(0,0);
context.stroke "rgba("+C+","+C+","+C+",0.5)";
context.stroke();
context.closePath();
context.beginPath();
context.moveTo(i, canvas.height);
context.lineTo(canvas.width, canvas.height-i);
context.lineTo(canvas.width, canvas.height);
context.stroke+C+","+C+","+C+",0.5)";
context.stroke();
context.closePath();
}
//// double moe
var image1 = new Image();
image1.src = "moeK.png";
image1.onload = function() {
for (var i=0; i<2; i++) {
context.save();
context.translate(canvas.width/2, canvas.height/2 );
context.rotate(Math.PI*2*i/2);
context.drawImage(image1, 0, 0,500,500);
context.restore();
}
}
};
</script>
</head>
<body>
<canvas id="myCanvas" width="600" height="800"></canvas>
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<title> king </title>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
////background
var m = 20;
var inc = 12;
for (var i=1; i<m; i++) {
var x = 0 +i*inc;
var y = 0 +i*inc;
var w = canvas.width -2*inc*i;
var h = canvas.height - 2*inc*i;
var C = Math.round(Math.random()*255);
context.beginPath();
context.rect(x, y, w, h);
context.fillStyle = "rgba("+C+","+C+","+C+",0.5)";
context.fill();
context.lineWidth = 5;
context.strokeStyle = "black";
context.stroke();
context.closePath();
}
///// twister
for (var i=0; i<100; i++){
var x = canvas.width+i;
var y = 0+i;
var x2 = -10+i;
var y2 = canvas.height+10+i;
var cx1 = 0+i;
var cy1 = 0+i;
var cx2 = canvas.width+i;
var cy2 = canvas.height+i;
var C = Math.round(Math.random()*255);
context.beginPath();
context.moveTo(x,y);
context.bezierCurveTo(cx1,cy1,cx2,cy2,x2,y2);
context.bezierCurveTo(cx1,cy1,cx2,cy2,x,y);
context.stroke+C+","+C+","+C+",0.5)"
context.stroke();
context.closePath();
}
var inc = 30;
for (var i=0; i < canvas.height; i+=inc ) {
context.beginPath();
context.moveTo(canvas.width-i, 0);
context.lineTo(0, i);
context.lineTo(0,0);
context.stroke "rgba("+C+","+C+","+C+",0.5)";
context.stroke();
context.closePath();
context.beginPath();
context.moveTo(i, canvas.height);
context.lineTo(canvas.width, canvas.height-i);
context.lineTo(canvas.width, canvas.height);
context.stroke+C+","+C+","+C+",0.5)";
context.stroke();
context.closePath();
}
//// double moe
var image1 = new Image();
image1.src = "moeK.png";
image1.onload = function() {
for (var i=0; i<2; i++) {
context.save();
context.translate(canvas.width/2, canvas.height/2 );
context.rotate(Math.PI*2*i/2);
context.drawImage(image1, 0, 0,500,500);
context.restore();
}
}
};
</script>
</head>
<body>
<canvas id="myCanvas" width="600" height="800"></canvas>
</body>
</html>
"Nocturnal"
<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var canvas1 = document.createElement("canvas");
var context1 = canvas1.getContext("2d")
/// background
var cw = canvas1.width;
var ch = canvas1.height;
context1.beginPath();
context1.rect(0,0,cw,ch);
var grd= context1.createRadialGradient(0, ch, 20,0, ch, cw);
grd.addColorStop( 0, "black");
grd.addColorStop(0.5, "#101417");
grd.addColorStop(1, "#3e8c98");
context1.fill;
context1.fill();
///lines
for (var i=0; i<ch; i+=10) {
context1.beginPath();
context1.lineWidth = i/200;
context1.strokeStyle = "#3e8c98";
context1.moveTo(cw+i,ch+i);
context1.lineTo(-i,ch-i);
context1.stroke();
context1.beginPath();
context1.lineWidth = i/40;
context1.strokeStyle = "#d74221";
context1.moveTo(i,400-i);
context1.lineTo(i, i);
context1.stroke();
context1.beginPath();
context1.lineWidth = i/50;
context1.strokeStyle = "#df7e3a";
context1.moveTo(cw+i,320+i);
context1.lineTo(cw-i,ch/i);
context1.stroke();
}
/// bubbles
for (var j=1; j<10; j+=1){
var x = cw*Math.random();
var y = ch*Math.random();
var rad =100*Math.random() ;
CIR();
}
function CIR(){
context1.beginPath();
context1.arc(x, y, rad, 0 , 2 * Math.PI, false);
var grd= context1.createRadialGradient(x,y, rad/2,x,y, rad);
grd.addColorStop( 0, "rgba(255,255,255,.01)");
grd.addColorStop(0.7, "rgba(255,255,255,.03)");
grd.addColorStop(1,"rgba(255,255,255,.3)");
context1.fill;
context1.fill();
}
context.translate(canvas.width/2, canvas.height/2);
context.save();
context.drawImage(canvas1, -400,0, canvas.width/2, canvas.height/2);
context.scale(1,1);
context.restore();
context.save();
context.scale(1,-1);
context.drawImage(canvas1, -400,0, canvas.width/2, canvas.height/2);
context.restore();
context.save();
context.scale(-1,-1);
context.drawImage(canvas1, -400,0, canvas.width/2, canvas.height/2);
context.restore();
context.save();
context.scale(-1,1);
context.drawImage(canvas1, -400,0, canvas.width/2, canvas.height/2);
context.restore();
};
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="800"></canvas>
</body>
</html>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var canvas1 = document.createElement("canvas");
var context1 = canvas1.getContext("2d")
/// background
var cw = canvas1.width;
var ch = canvas1.height;
context1.beginPath();
context1.rect(0,0,cw,ch);
var grd= context1.createRadialGradient(0, ch, 20,0, ch, cw);
grd.addColorStop( 0, "black");
grd.addColorStop(0.5, "#101417");
grd.addColorStop(1, "#3e8c98");
context1.fill;
context1.fill();
///lines
for (var i=0; i<ch; i+=10) {
context1.beginPath();
context1.lineWidth = i/200;
context1.strokeStyle = "#3e8c98";
context1.moveTo(cw+i,ch+i);
context1.lineTo(-i,ch-i);
context1.stroke();
context1.beginPath();
context1.lineWidth = i/40;
context1.strokeStyle = "#d74221";
context1.moveTo(i,400-i);
context1.lineTo(i, i);
context1.stroke();
context1.beginPath();
context1.lineWidth = i/50;
context1.strokeStyle = "#df7e3a";
context1.moveTo(cw+i,320+i);
context1.lineTo(cw-i,ch/i);
context1.stroke();
}
/// bubbles
for (var j=1; j<10; j+=1){
var x = cw*Math.random();
var y = ch*Math.random();
var rad =100*Math.random() ;
CIR();
}
function CIR(){
context1.beginPath();
context1.arc(x, y, rad, 0 , 2 * Math.PI, false);
var grd= context1.createRadialGradient(x,y, rad/2,x,y, rad);
grd.addColorStop( 0, "rgba(255,255,255,.01)");
grd.addColorStop(0.7, "rgba(255,255,255,.03)");
grd.addColorStop(1,"rgba(255,255,255,.3)");
context1.fill;
context1.fill();
}
context.translate(canvas.width/2, canvas.height/2);
context.save();
context.drawImage(canvas1, -400,0, canvas.width/2, canvas.height/2);
context.scale(1,1);
context.restore();
context.save();
context.scale(1,-1);
context.drawImage(canvas1, -400,0, canvas.width/2, canvas.height/2);
context.restore();
context.save();
context.scale(-1,-1);
context.drawImage(canvas1, -400,0, canvas.width/2, canvas.height/2);
context.restore();
context.save();
context.scale(-1,1);
context.drawImage(canvas1, -400,0, canvas.width/2, canvas.height/2);
context.restore();
};
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="800"></canvas>
</body>
</html>
"Relayer"
<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
/////background
/// background
var cw = canvas.width;
var ch = canvas.height;
context.beginPath();
context.rect(0,0,cw,ch);
var grd= context.createRadialGradient(0, ch, 20,0, ch, cw);
grd.addColorStop( 0, "black");
grd.addColorStop(0.5, "#101417");
grd.addColorStop(1, "#3e8c98");
context.fill;
context.fill();
///lines
for (var i=0; i<canvas.height; i+=10) {
context.beginPath();
context.lineWidth = i/200;
context.strokeStyle = "#3e8c98";
context.moveTo(cw+i,ch+i);
context.lineTo(-i,ch-i);
context.stroke();
context.beginPath();
context.lineWidth = i/40;
context.strokeStyle = "#d74221";
context.moveTo(i,400-i);
context.lineTo(i, i);
context.stroke();
context.beginPath();
context.lineWidth = i/50;
context.strokeStyle = "#df7e3a";
context.moveTo(cw+i,320+i);
context.lineTo(cw-i,ch/i);
context.stroke();
}
/// bubbles
for (var j=1; j<10; j+=1){
var x = cw*Math.random();
var y = ch*Math.random();
var rad =100*Math.random() ;
CIR();
}
function CIR (){
context.beginPath();
context.arc(x, y, rad, 0 , 2 * Math.PI, false);
var grd= context.createRadialGradient(x,y, rad/2,x,y, rad);
grd.addColorStop( 0, "rgba(255,255,255,.01)");
grd.addColorStop(0.7, "rgba(255,255,255,.03)");
grd.addColorStop(1,"rgba(255,255,255,.3)");
context.fill;
context.fill();
}
////img
/*
for (var i=0; i <10; i+=1){
var imageObj = new Image();
var x = Math.random()*canvas.width/3;
var y = Math.random()*canvas.height/2;
var w = 100;
var h = 200;
MOE(imageObj, x, y,w,h);
}
function MOE (imageObj, x, y,w,h) {
imageObj.onload = function() {
context.drawImage(imageObj, x, y, w, h);
};
imageObj.src = 'moeR.png';
}*/
//BWlines
for (var i=0; i<canvas.height; i+=1){
var x = canvas.width*2/3+i;
var y =-100-i;
var cx1 = canvas.width+300+i;
var cy1 = 0+i;
var cx2 = 0-i;
var cy2 = canvas.height+i;
var x2 = canvas.width/2+i;
var y2 = canvas.height*i;
var L = 10-i;
var R = Math.round(Math.random()* 155+i);
var G = Math.round(Math.random()* 100);
var B = Math.round(Math.random()* 155+i);
var RGBA4 = "rgba("+R+", "+R+", "+R+", .5)";
BW (x,y,cx1,cy1,cx2,cy2,x2,y2, RGBA4, L);
}
function BW (x,y,cx1,cy1,cx2,cy2,x2,y2, RGBA4, L) {
context.beginPath();
context.moveTo(x,y);
context.bezierCurveTo(cx1,cy1,cx2,cy2,x2,y2);
context.stroke RGBA4;
context.lineWidth= L ;
context.stroke();
}
//green/blu lines
for (var i=0; i<canvas.height; i+=1){
var x = canvas.width-i;
var y = 0-i;
var cx1 = canvas.width/3*i;
var cy1 = 0-i;
var cx2 = canvas.width+i;
var cy2 = canvas.height-i;
var x2 = 0+i;
var y2 = canvas.height+i;
var L = 1+i;
var R = Math.round(Math.random()* 55);
var G = Math.round(Math.random()* 100+i);
var B = Math.round(Math.random()* 155-i);
var RGBA4 = "rgba("+G+", "+G+", "+B+", .5)";
GB (x,y,cx1,cy1,cx2,cy2,x2,y2, RGBA4, L);
}
function GB (x,y,cx1,cy1,cx2,cy2,x2,y2, RGBA4, L) {
context.beginPath();
context.moveTo(x,y);
context.bezierCurveTo(cx1,cy1,cx2,cy2,x2,y2);
context.stroke RGBA4;
context.lineWidth= L ;
context.stroke();
}
//red/blu lines
for (var i=0; i<canvas.height; i+=1){
var x = canvas.width-i;
var y = 0-i;
var cx1 = 0-i;
var cy1 = 0+i;
var cx2 = canvas.width/2+i;
var cy2 = canvas.height+i;
var x2 = -300+i;
var y2 = canvas.height+i;
var L = 20-i;
var R = Math.round(Math.random()* 50+i);
var G = Math.round(Math.random()* 100);
var B = Math.round(Math.random()* 255);
var RGBA4 = "rgba("+R+", "+B+", "+B+", .5)";
RB (x,y,cx1,cy1,cx2,cy2,x2,y2, RGBA4, L);
}
function RB (x,y,cx1,cy1,cx2,cy2,x2,y2, RGBA4, L) {
context.beginPath();
context.moveTo(x,y);
context.bezierCurveTo(cx1,cy1,cx2,cy2,x2,y2);
context.stroke RGBA4;
context.lineWidth= L ;
context.stroke();
}
};
</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");
/////background
/// background
var cw = canvas.width;
var ch = canvas.height;
context.beginPath();
context.rect(0,0,cw,ch);
var grd= context.createRadialGradient(0, ch, 20,0, ch, cw);
grd.addColorStop( 0, "black");
grd.addColorStop(0.5, "#101417");
grd.addColorStop(1, "#3e8c98");
context.fill;
context.fill();
///lines
for (var i=0; i<canvas.height; i+=10) {
context.beginPath();
context.lineWidth = i/200;
context.strokeStyle = "#3e8c98";
context.moveTo(cw+i,ch+i);
context.lineTo(-i,ch-i);
context.stroke();
context.beginPath();
context.lineWidth = i/40;
context.strokeStyle = "#d74221";
context.moveTo(i,400-i);
context.lineTo(i, i);
context.stroke();
context.beginPath();
context.lineWidth = i/50;
context.strokeStyle = "#df7e3a";
context.moveTo(cw+i,320+i);
context.lineTo(cw-i,ch/i);
context.stroke();
}
/// bubbles
for (var j=1; j<10; j+=1){
var x = cw*Math.random();
var y = ch*Math.random();
var rad =100*Math.random() ;
CIR();
}
function CIR (){
context.beginPath();
context.arc(x, y, rad, 0 , 2 * Math.PI, false);
var grd= context.createRadialGradient(x,y, rad/2,x,y, rad);
grd.addColorStop( 0, "rgba(255,255,255,.01)");
grd.addColorStop(0.7, "rgba(255,255,255,.03)");
grd.addColorStop(1,"rgba(255,255,255,.3)");
context.fill;
context.fill();
}
////img
/*
for (var i=0; i <10; i+=1){
var imageObj = new Image();
var x = Math.random()*canvas.width/3;
var y = Math.random()*canvas.height/2;
var w = 100;
var h = 200;
MOE(imageObj, x, y,w,h);
}
function MOE (imageObj, x, y,w,h) {
imageObj.onload = function() {
context.drawImage(imageObj, x, y, w, h);
};
imageObj.src = 'moeR.png';
}*/
//BWlines
for (var i=0; i<canvas.height; i+=1){
var x = canvas.width*2/3+i;
var y =-100-i;
var cx1 = canvas.width+300+i;
var cy1 = 0+i;
var cx2 = 0-i;
var cy2 = canvas.height+i;
var x2 = canvas.width/2+i;
var y2 = canvas.height*i;
var L = 10-i;
var R = Math.round(Math.random()* 155+i);
var G = Math.round(Math.random()* 100);
var B = Math.round(Math.random()* 155+i);
var RGBA4 = "rgba("+R+", "+R+", "+R+", .5)";
BW (x,y,cx1,cy1,cx2,cy2,x2,y2, RGBA4, L);
}
function BW (x,y,cx1,cy1,cx2,cy2,x2,y2, RGBA4, L) {
context.beginPath();
context.moveTo(x,y);
context.bezierCurveTo(cx1,cy1,cx2,cy2,x2,y2);
context.stroke RGBA4;
context.lineWidth= L ;
context.stroke();
}
//green/blu lines
for (var i=0; i<canvas.height; i+=1){
var x = canvas.width-i;
var y = 0-i;
var cx1 = canvas.width/3*i;
var cy1 = 0-i;
var cx2 = canvas.width+i;
var cy2 = canvas.height-i;
var x2 = 0+i;
var y2 = canvas.height+i;
var L = 1+i;
var R = Math.round(Math.random()* 55);
var G = Math.round(Math.random()* 100+i);
var B = Math.round(Math.random()* 155-i);
var RGBA4 = "rgba("+G+", "+G+", "+B+", .5)";
GB (x,y,cx1,cy1,cx2,cy2,x2,y2, RGBA4, L);
}
function GB (x,y,cx1,cy1,cx2,cy2,x2,y2, RGBA4, L) {
context.beginPath();
context.moveTo(x,y);
context.bezierCurveTo(cx1,cy1,cx2,cy2,x2,y2);
context.stroke RGBA4;
context.lineWidth= L ;
context.stroke();
}
//red/blu lines
for (var i=0; i<canvas.height; i+=1){
var x = canvas.width-i;
var y = 0-i;
var cx1 = 0-i;
var cy1 = 0+i;
var cx2 = canvas.width/2+i;
var cy2 = canvas.height+i;
var x2 = -300+i;
var y2 = canvas.height+i;
var L = 20-i;
var R = Math.round(Math.random()* 50+i);
var G = Math.round(Math.random()* 100);
var B = Math.round(Math.random()* 255);
var RGBA4 = "rgba("+R+", "+B+", "+B+", .5)";
RB (x,y,cx1,cy1,cx2,cy2,x2,y2, RGBA4, L);
}
function RB (x,y,cx1,cy1,cx2,cy2,x2,y2, RGBA4, L) {
context.beginPath();
context.moveTo(x,y);
context.bezierCurveTo(cx1,cy1,cx2,cy2,x2,y2);
context.stroke RGBA4;
context.lineWidth= L ;
context.stroke();
}
};
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>
"Spiral"
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title> spiral </title>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var maxLoop = 50
for (var i=0; i <canvas.width; i+=20){
var x = 0+i;
var y = 0;
var w = 50;
var h = 150;
var R = Math.round(Math.random()* 255);
var G = Math.round(Math.random()* 255);
var B = Math.round(Math.random()* 255);
var RGBA1 = "rgba("+R+", "+G+", "+B+", 0.3)";
var RGBA2 = "rgba("+B+", "+R+", "+G+", 0.3)";
var RGBA3 = "rgba("+G+", "+B+", "+R+", 0.3)";
var white = "white";
RECT(x,y,w,h,RGBA1);
RECT(x, y + 100, w, h, RGBA2);
RECT(x, y + 200, w, h, RGBA1);
RECT(x, y + 300, w, h, RGBA3);
RECT(x, y + 400, w, h, RGBA1);
RECT(x, y + 500, w, h, RGBA2);
RECT(x, y + 600, w, h, RGBA3);
RECT(x, y + 700, w, h, RGBA2);
}
function RECT(x,y,w,h,RGBA1){
context.save();
context.translate(canvas.width/2, canvas.height/2);
for (var i=1; i<20; i+=1) {
context.rotate(Math.PI / i);
context.beginPath();
context.rect(x,y,w,h);
context.fillStyle = RGBA1;
context.fill();
//context.stroke();
context.closePath();
}
context.restore();
}
var R4 = Math.round(Math.random()*255);
var G4 = Math.round(Math.random()*255);
var B4 = Math.round(Math.random()*255);
var RGBA4 = "rgba("+R4+","+G4+","+B4+",0.03)";
var R2 = Math.round(Math.random()*255);
var G2 = Math.round(Math.random()*255);
var B2 = Math.round(Math.random()*255);
var RGBA2 = "rgba("+R2+","+G2+","+B2+",1)";
var R3 = Math.round(Math.random()*255);
var G3 = Math.round(Math.random()*255);
var B3 = Math.round(Math.random()*255);
var RGBA3 = "rgba("+R3+","+G3+","+B3+",1)";
var inc = 20;
for (var i=0; i < canvas.height; i+=inc ) {
context.beginPath();
context.moveTo(canvas.width-i, canvas.height/2);
context.lineTo(0, i);
context.lineTo(0,0);
context.fill;
context.fill();
context.stroke RGBA2;
context.lineWidth= 5;
context.stroke();
context.closePath();
context.beginPath();
context.moveTo(i, canvas.height);
context.lineTo(canvas.width, canvas.height-i);
context.lineTo(canvas.width, canvas.height);
context.fillStyle = RGBA4;
context.fill();
context.lineWidth= 5;
context.stroke RGBA2;
context.stroke();
context.closePath();
context.beginPath();
context.moveTo(0, i);
context.lineTo(i, canvas.height/2);
context.lineTo(0, canvas.height);
context.stroke RGBA3;
context.lineWidth= 1;
context.stroke();
context.closePath();
context.beginPath();
context.moveTo(i, 0);
context.lineTo(canvas.width, i);
context.lineTo(canvas.width, 0);
context.stroke RGBA3;
context.stroke();
context.closePath();
}
var sine;
var cose;
var sine1;
var cose1;
var rad;
// center of circle or spiral
var x = canvas.width/2;
var y = canvas.height/2;
var inc = 0.1;
for (var i=0; i<=Math.PI*2 ; i+=inc) {
sine = Math.sin(i); // VERTICAL
cose = Math.cos(i); // HORIZONTAL
sine1 = Math.sin(i+0.1); // VERTICAL
cose1 = Math.cos(i+0.1); // HORIZONTAL
rad = 100;
context.moveTo(x,y);
context.lineTo(canvas.width/2+ cose1*rad, canvas.height + sine1*rad);
context.lineWidth= .03;
context.stroke "white";
context.stroke();
context.moveTo(x,y);
context.lineTo(canvas.width/2+ cose1*rad, 0 + sine1*rad);
context.lineWidth= .03;
context.stroke "white";
context.stroke();
context.moveTo(x,y);
context.lineTo(canvas.width+ cose1*rad, canvas.height/2 + sine1*rad);
context.lineWidth= .03;
context.stroke "white";
context.stroke();
context.moveTo(x,y);
context.lineTo(0+ cose1*rad, canvas.height/2 + sine1*rad);
context.lineWidth= .03;
context.stroke "white";
context.stroke();
context.moveTo(x,y);
context.lineTo(canvas.width/3+ cose1*rad, canvas.height/3 + sine1*rad);
context.lineWidth= .5;
context.stroke "white";
context.stroke();
context.moveTo(x,y);
context.lineTo(canvas.width/3+ cose1*rad, canvas.height*2/3 + sine1*rad);
context.lineWidth= .5;
context.stroke "white";
context.stroke();
context.moveTo(x,y);
context.lineTo(canvas.width*2/3+ cose1*rad, canvas.height*2/3 + sine1*rad);
context.lineWidth= .5;
context.stroke "white";
context.stroke();
context.moveTo(x,y);
context.lineTo(canvas.width*2/3+ cose1*rad, canvas.height/3 + sine1*rad);
context.lineWidth= .5;
context.stroke "white";
context.stroke();
}
};
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="800"></canvas>
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<title> spiral </title>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var maxLoop = 50
for (var i=0; i <canvas.width; i+=20){
var x = 0+i;
var y = 0;
var w = 50;
var h = 150;
var R = Math.round(Math.random()* 255);
var G = Math.round(Math.random()* 255);
var B = Math.round(Math.random()* 255);
var RGBA1 = "rgba("+R+", "+G+", "+B+", 0.3)";
var RGBA2 = "rgba("+B+", "+R+", "+G+", 0.3)";
var RGBA3 = "rgba("+G+", "+B+", "+R+", 0.3)";
var white = "white";
RECT(x,y,w,h,RGBA1);
RECT(x, y + 100, w, h, RGBA2);
RECT(x, y + 200, w, h, RGBA1);
RECT(x, y + 300, w, h, RGBA3);
RECT(x, y + 400, w, h, RGBA1);
RECT(x, y + 500, w, h, RGBA2);
RECT(x, y + 600, w, h, RGBA3);
RECT(x, y + 700, w, h, RGBA2);
}
function RECT(x,y,w,h,RGBA1){
context.save();
context.translate(canvas.width/2, canvas.height/2);
for (var i=1; i<20; i+=1) {
context.rotate(Math.PI / i);
context.beginPath();
context.rect(x,y,w,h);
context.fillStyle = RGBA1;
context.fill();
//context.stroke();
context.closePath();
}
context.restore();
}
var R4 = Math.round(Math.random()*255);
var G4 = Math.round(Math.random()*255);
var B4 = Math.round(Math.random()*255);
var RGBA4 = "rgba("+R4+","+G4+","+B4+",0.03)";
var R2 = Math.round(Math.random()*255);
var G2 = Math.round(Math.random()*255);
var B2 = Math.round(Math.random()*255);
var RGBA2 = "rgba("+R2+","+G2+","+B2+",1)";
var R3 = Math.round(Math.random()*255);
var G3 = Math.round(Math.random()*255);
var B3 = Math.round(Math.random()*255);
var RGBA3 = "rgba("+R3+","+G3+","+B3+",1)";
var inc = 20;
for (var i=0; i < canvas.height; i+=inc ) {
context.beginPath();
context.moveTo(canvas.width-i, canvas.height/2);
context.lineTo(0, i);
context.lineTo(0,0);
context.fill;
context.fill();
context.stroke RGBA2;
context.lineWidth= 5;
context.stroke();
context.closePath();
context.beginPath();
context.moveTo(i, canvas.height);
context.lineTo(canvas.width, canvas.height-i);
context.lineTo(canvas.width, canvas.height);
context.fillStyle = RGBA4;
context.fill();
context.lineWidth= 5;
context.stroke RGBA2;
context.stroke();
context.closePath();
context.beginPath();
context.moveTo(0, i);
context.lineTo(i, canvas.height/2);
context.lineTo(0, canvas.height);
context.stroke RGBA3;
context.lineWidth= 1;
context.stroke();
context.closePath();
context.beginPath();
context.moveTo(i, 0);
context.lineTo(canvas.width, i);
context.lineTo(canvas.width, 0);
context.stroke RGBA3;
context.stroke();
context.closePath();
}
var sine;
var cose;
var sine1;
var cose1;
var rad;
// center of circle or spiral
var x = canvas.width/2;
var y = canvas.height/2;
var inc = 0.1;
for (var i=0; i<=Math.PI*2 ; i+=inc) {
sine = Math.sin(i); // VERTICAL
cose = Math.cos(i); // HORIZONTAL
sine1 = Math.sin(i+0.1); // VERTICAL
cose1 = Math.cos(i+0.1); // HORIZONTAL
rad = 100;
context.moveTo(x,y);
context.lineTo(canvas.width/2+ cose1*rad, canvas.height + sine1*rad);
context.lineWidth= .03;
context.stroke "white";
context.stroke();
context.moveTo(x,y);
context.lineTo(canvas.width/2+ cose1*rad, 0 + sine1*rad);
context.lineWidth= .03;
context.stroke "white";
context.stroke();
context.moveTo(x,y);
context.lineTo(canvas.width+ cose1*rad, canvas.height/2 + sine1*rad);
context.lineWidth= .03;
context.stroke "white";
context.stroke();
context.moveTo(x,y);
context.lineTo(0+ cose1*rad, canvas.height/2 + sine1*rad);
context.lineWidth= .03;
context.stroke "white";
context.stroke();
context.moveTo(x,y);
context.lineTo(canvas.width/3+ cose1*rad, canvas.height/3 + sine1*rad);
context.lineWidth= .5;
context.stroke "white";
context.stroke();
context.moveTo(x,y);
context.lineTo(canvas.width/3+ cose1*rad, canvas.height*2/3 + sine1*rad);
context.lineWidth= .5;
context.stroke "white";
context.stroke();
context.moveTo(x,y);
context.lineTo(canvas.width*2/3+ cose1*rad, canvas.height*2/3 + sine1*rad);
context.lineWidth= .5;
context.stroke "white";
context.stroke();
context.moveTo(x,y);
context.lineTo(canvas.width*2/3+ cose1*rad, canvas.height/3 + sine1*rad);
context.lineWidth= .5;
context.stroke "white";
context.stroke();
}
};
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="800"></canvas>
</body>
</html>
"Star Loop City"
<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
////////////////////////////////////// start here
context.beginPath();
context.rect(0,0,canvas.width,canvas.height);
context.fill;
context.fill();
/// FOUR POINT STAR
//var cw = canvas.width;
//var ch = canvas.height;
var maxLoop = 50
for (var i =0; i<maxLoop; i+=1){
var cw =Math.random()*100;
var ch =cw ;
context.beginPath();
var locY = Math.random()*canvas.height/2;
var locX = Math.random()*canvas.width;
var Ax = cw*5/10+locX;
var Ay = ch*2/10+locY;
var Bx = cw*4/10+locX;
var By = ch*4/10+locY;
var Cx = cw*2/10+locX;
var Cy = ch*5/10+locY;
var Dx = Bx;
var Dy = ch*6/10+locY;
var Ex = Ax;
var Ey = ch*8/10+locY;
var Fx = cw*6/10+locX;
var Fy = Dy;
var Gx = cw*8/10+locX;
var Gy = Cy;
var Hx = Fx;
var Hy = By;
var R2 = Math.round(Math.random()*255);
var G2 = Math.round(Math.random()*255);
var B2 = Math.round(Math.random()*255);
var RGBA1 = "rgba("+R2+","+G2+","+B2+",0.5)";
var R3 = Math.round(Math.random()*255);
var G3 = Math.round(Math.random()*255);
var B3 = Math.round(Math.random()*255);
var RGBA2 = "rgba("+R3+","+G3+","+B3+",0.5)";
context.moveTo(Ax, Ay);
context.lineTo(Bx, By);
context.lineTo(Cx, Cy);
context.lineTo(Dx, Dy);
context.lineTo(Ex, Ey);
context.lineTo(Fx, Fy);
context.lineTo(Gx, Gy);
context.lineTo(Hx, Hy);
context.lineTo(Ax, Ay);
context.fillStyle = RGBA1;
context.fill();
context.lineWidth = 3;
context.stroke RGBA2;
context.lineJoin = "round";
context.lineCap = 'round';
context.stroke();
context.closePath();
}
///orange star
var maxLoop = 50
for (var i =0; i<maxLoop; i+=1){
var cw =Math.random()*100;
var ch =cw ;
context.beginPath();
var locY = Math.random()*400;
var locX = Math.random()*800;
var Ax = cw*5/10+locX;
var Ay = ch*2/10+locY;
var Bx = cw*4/10+locX;
var By = ch*4/10+locY;
var Cx = cw*2/10+locX;
var Cy = ch*5/10+locY;
var Dx = Bx;
var Dy = ch*6/10+locY;
var Ex = Ax;
var Ey = ch*8/10+locY;
var Fx = cw*6/10+locX;
var Fy = Dy;
var Gx = cw*8/10+locX;
var Gy = Cy;
var Hx = Fx;
var Hy = By;
var R2 = Math.round(Math.random()*255);
var G2 = Math.round(Math.random()*255);
var B2 = Math.round(Math.random()*255);
var RGBA3 = "rgba("+R2+","+G2+","+B2+",0.3)";
var R3 = Math.round(Math.random()*255);
var G3 = Math.round(Math.random()*255);
var B3 = Math.round(Math.random()*255);
var RGBA4 = "rgba("+R3+","+G3+","+B3+",0.3)";
context.moveTo(Ax, Ay);
context.lineTo(Bx, By);
context.lineTo(Cx, Cy);
context.lineTo(Dx, Dy);
context.lineTo(Ex, Ey);
context.lineTo(Fx, Fy);
context.lineTo(Gx, Gy);
context.lineTo(Hx, Hy);
context.lineTo(Ax, Ay);
context.fillStyle = RGBA3;
context.fill();
context.lineWidth = 3;
context.stroke RGBA4;
context.lineJoin = "round";
context.lineCap = 'round';
context.stroke();
context.closePath();
}
//// city
var maxLoop = 20
for (var i =0; i<maxLoop; i+=1){
var x = canvas.width * Math.random() ;
var y = 400 * Math.random() ;
var w = 300 * Math.random();
var h = 600 * Math.random() + canvas.height/2;
var R2 = Math.round(Math.random()*255);
var G2 = Math.round(Math.random()*255);
var B2 = Math.round(Math.random()*255);
var RGBA5 = "rgba("+R2+","+G2+","+B2+",0.7)";
var R3 = Math.round(Math.random()*255);
var G3 = Math.round(Math.random()*255);
var B3 = Math.round(Math.random()*255);
var RGBA6 = "rgba("+R3+","+G3+","+B3+",0.7)";
context.beginPath();
context.rect(x,y+400,w,h);
context.fillStyle = RGBA5;
context.fill();
context.lineWidth = 5;
context.stroke;
context.stroke();
context.closePath();
}
};
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="800"></canvas>
</body>
</html>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
////////////////////////////////////// start here
context.beginPath();
context.rect(0,0,canvas.width,canvas.height);
context.fill;
context.fill();
/// FOUR POINT STAR
//var cw = canvas.width;
//var ch = canvas.height;
var maxLoop = 50
for (var i =0; i<maxLoop; i+=1){
var cw =Math.random()*100;
var ch =cw ;
context.beginPath();
var locY = Math.random()*canvas.height/2;
var locX = Math.random()*canvas.width;
var Ax = cw*5/10+locX;
var Ay = ch*2/10+locY;
var Bx = cw*4/10+locX;
var By = ch*4/10+locY;
var Cx = cw*2/10+locX;
var Cy = ch*5/10+locY;
var Dx = Bx;
var Dy = ch*6/10+locY;
var Ex = Ax;
var Ey = ch*8/10+locY;
var Fx = cw*6/10+locX;
var Fy = Dy;
var Gx = cw*8/10+locX;
var Gy = Cy;
var Hx = Fx;
var Hy = By;
var R2 = Math.round(Math.random()*255);
var G2 = Math.round(Math.random()*255);
var B2 = Math.round(Math.random()*255);
var RGBA1 = "rgba("+R2+","+G2+","+B2+",0.5)";
var R3 = Math.round(Math.random()*255);
var G3 = Math.round(Math.random()*255);
var B3 = Math.round(Math.random()*255);
var RGBA2 = "rgba("+R3+","+G3+","+B3+",0.5)";
context.moveTo(Ax, Ay);
context.lineTo(Bx, By);
context.lineTo(Cx, Cy);
context.lineTo(Dx, Dy);
context.lineTo(Ex, Ey);
context.lineTo(Fx, Fy);
context.lineTo(Gx, Gy);
context.lineTo(Hx, Hy);
context.lineTo(Ax, Ay);
context.fillStyle = RGBA1;
context.fill();
context.lineWidth = 3;
context.stroke RGBA2;
context.lineJoin = "round";
context.lineCap = 'round';
context.stroke();
context.closePath();
}
///orange star
var maxLoop = 50
for (var i =0; i<maxLoop; i+=1){
var cw =Math.random()*100;
var ch =cw ;
context.beginPath();
var locY = Math.random()*400;
var locX = Math.random()*800;
var Ax = cw*5/10+locX;
var Ay = ch*2/10+locY;
var Bx = cw*4/10+locX;
var By = ch*4/10+locY;
var Cx = cw*2/10+locX;
var Cy = ch*5/10+locY;
var Dx = Bx;
var Dy = ch*6/10+locY;
var Ex = Ax;
var Ey = ch*8/10+locY;
var Fx = cw*6/10+locX;
var Fy = Dy;
var Gx = cw*8/10+locX;
var Gy = Cy;
var Hx = Fx;
var Hy = By;
var R2 = Math.round(Math.random()*255);
var G2 = Math.round(Math.random()*255);
var B2 = Math.round(Math.random()*255);
var RGBA3 = "rgba("+R2+","+G2+","+B2+",0.3)";
var R3 = Math.round(Math.random()*255);
var G3 = Math.round(Math.random()*255);
var B3 = Math.round(Math.random()*255);
var RGBA4 = "rgba("+R3+","+G3+","+B3+",0.3)";
context.moveTo(Ax, Ay);
context.lineTo(Bx, By);
context.lineTo(Cx, Cy);
context.lineTo(Dx, Dy);
context.lineTo(Ex, Ey);
context.lineTo(Fx, Fy);
context.lineTo(Gx, Gy);
context.lineTo(Hx, Hy);
context.lineTo(Ax, Ay);
context.fillStyle = RGBA3;
context.fill();
context.lineWidth = 3;
context.stroke RGBA4;
context.lineJoin = "round";
context.lineCap = 'round';
context.stroke();
context.closePath();
}
//// city
var maxLoop = 20
for (var i =0; i<maxLoop; i+=1){
var x = canvas.width * Math.random() ;
var y = 400 * Math.random() ;
var w = 300 * Math.random();
var h = 600 * Math.random() + canvas.height/2;
var R2 = Math.round(Math.random()*255);
var G2 = Math.round(Math.random()*255);
var B2 = Math.round(Math.random()*255);
var RGBA5 = "rgba("+R2+","+G2+","+B2+",0.7)";
var R3 = Math.round(Math.random()*255);
var G3 = Math.round(Math.random()*255);
var B3 = Math.round(Math.random()*255);
var RGBA6 = "rgba("+R3+","+G3+","+B3+",0.7)";
context.beginPath();
context.rect(x,y+400,w,h);
context.fillStyle = RGBA5;
context.fill();
context.lineWidth = 5;
context.stroke;
context.stroke();
context.closePath();
}
};
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="800"></canvas>
</body>
</html>
"Swoosh"
<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var canvas1 = document.createElement("canvas");
var context1 = canvas1.getContext("2d");
////////////////////////////////////// start here
var maxLoop = 50
for (var i=0; i <canvas1.width; i+=10){
var x = 0+i;
var y = 0;
var w = 50;
var h = 150;
var R = Math.round(Math.random()* 255);
var G = Math.round(Math.random()* 255);
var B = Math.round(Math.random()* 255);
var RGBA1 = "rgba("+R+", "+B+", "+B+", 0.5)";
var RGBA2 = "rgba("+B+", "+R+", "+B+", 0.5)";
var RGBA3 = "rgba("+G+", "+B+", "+R+", 0.5)";
RECT(x,y,w,h,RGBA1);
RECT(x, y + 100, w, h, RGBA2);
RECT(x, y + 200, w, h, RGBA1);
RECT(x, y + 300, w, h, RGBA3);
RECT(x, y + 400, w, h, RGBA1);
RECT(x, y + 500, w, h, RGBA2);
RECT(x, y + 600, w, h, RGBA3);
RECT(x, y + 700, w, h, RGBA2);
var x1= 0-i;
var y2= -200+i;
}
function RECT(x,y,w,h,RGBA1){
context1.save();
context1.translate(x1,y2); // NEW (0,0) coordinates
context1.rotate(Math.PI/4);
context1.scale (1, -1);
context1.beginPath();
context1.rect(x,y,w,h);
context1.fillStyle = RGBA1;
context1.fill();
//context1.stroke();
context1.closePath();
context1.restore();
}
//lines
for (var i=0; i<canvas1.height; i+=1){
var x = canvas1.width+i;
var y = 0+i;
var cx1 = 0+i;
var cy1 = y;
var cx2 = x+i;
var cy2 = canvas1.height+i;
var x2 = -100+i;
var y2 = cy2;
var L = 20-i;
var R = Math.round(Math.random()* 255);
var G = Math.round(Math.random()* 255);
var B = Math.round(Math.random()* 255);
var RGBA4 = "rgba("+R+", "+G+", "+B+", 1)";
context1.beginPath();
context1.moveTo(x,y);
context1.bezierCurveTo(cx1,cy1,cx2,cy2,x2,y2);
context1.stroke RGBA4;
context1.lineWidth= L ;
context1.stroke();
}
context.drawImage(canvas1, 0,0, canvas.width/2, canvas.height/2);
context.save();
context.translate(canvas.width/2, canvas.height/2);
for (var i=1; i<10; i+=1) {
context.rotate(Math.PI/canvas.width+i);
//context.scale(1,-1);
context.drawImage(canvas1, 0,0, canvas.width/2, canvas.height);
};
context.restore();
for (var i=1; i<canvas.height; i+=20) {
var x = 0+i;
var y = 0;
var c1 = canvas.width/2+i;
var c2 = 0;
var c3 = canvas.width/2-i;
var c4 = canvas.height;
var x2 = canvas.width-i;
var y2 = canvas.height;
var R = Math.round(Math.random()* 255);
var G = Math.round(Math.random()* 255);
var B = Math.round(Math.random()* 255);
var STROKE = "rgba("+R+", "+G+", "+B+", .5)";
var R = Math.round(Math.random()* 255);
var G = Math.round(Math.random()* 255);
var B = Math.round(Math.random()* 255);
var FILL = "rgba("+R+", "+G+", "+B+", .08)";
context.beginPath();
context.moveTo(x,y);
context.bezierCurveTo(c1,c2,c3,c4,x2,y2);
context.lineWidth = i/100;
context.strokeStyle = STROKE;
//context.fill FILL;
//context.fill();
context.stroke();
context.closePath();
}
};
</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");
var canvas1 = document.createElement("canvas");
var context1 = canvas1.getContext("2d");
////////////////////////////////////// start here
var maxLoop = 50
for (var i=0; i <canvas1.width; i+=10){
var x = 0+i;
var y = 0;
var w = 50;
var h = 150;
var R = Math.round(Math.random()* 255);
var G = Math.round(Math.random()* 255);
var B = Math.round(Math.random()* 255);
var RGBA1 = "rgba("+R+", "+B+", "+B+", 0.5)";
var RGBA2 = "rgba("+B+", "+R+", "+B+", 0.5)";
var RGBA3 = "rgba("+G+", "+B+", "+R+", 0.5)";
RECT(x,y,w,h,RGBA1);
RECT(x, y + 100, w, h, RGBA2);
RECT(x, y + 200, w, h, RGBA1);
RECT(x, y + 300, w, h, RGBA3);
RECT(x, y + 400, w, h, RGBA1);
RECT(x, y + 500, w, h, RGBA2);
RECT(x, y + 600, w, h, RGBA3);
RECT(x, y + 700, w, h, RGBA2);
var x1= 0-i;
var y2= -200+i;
}
function RECT(x,y,w,h,RGBA1){
context1.save();
context1.translate(x1,y2); // NEW (0,0) coordinates
context1.rotate(Math.PI/4);
context1.scale (1, -1);
context1.beginPath();
context1.rect(x,y,w,h);
context1.fillStyle = RGBA1;
context1.fill();
//context1.stroke();
context1.closePath();
context1.restore();
}
//lines
for (var i=0; i<canvas1.height; i+=1){
var x = canvas1.width+i;
var y = 0+i;
var cx1 = 0+i;
var cy1 = y;
var cx2 = x+i;
var cy2 = canvas1.height+i;
var x2 = -100+i;
var y2 = cy2;
var L = 20-i;
var R = Math.round(Math.random()* 255);
var G = Math.round(Math.random()* 255);
var B = Math.round(Math.random()* 255);
var RGBA4 = "rgba("+R+", "+G+", "+B+", 1)";
context1.beginPath();
context1.moveTo(x,y);
context1.bezierCurveTo(cx1,cy1,cx2,cy2,x2,y2);
context1.stroke RGBA4;
context1.lineWidth= L ;
context1.stroke();
}
context.drawImage(canvas1, 0,0, canvas.width/2, canvas.height/2);
context.save();
context.translate(canvas.width/2, canvas.height/2);
for (var i=1; i<10; i+=1) {
context.rotate(Math.PI/canvas.width+i);
//context.scale(1,-1);
context.drawImage(canvas1, 0,0, canvas.width/2, canvas.height);
};
context.restore();
for (var i=1; i<canvas.height; i+=20) {
var x = 0+i;
var y = 0;
var c1 = canvas.width/2+i;
var c2 = 0;
var c3 = canvas.width/2-i;
var c4 = canvas.height;
var x2 = canvas.width-i;
var y2 = canvas.height;
var R = Math.round(Math.random()* 255);
var G = Math.round(Math.random()* 255);
var B = Math.round(Math.random()* 255);
var STROKE = "rgba("+R+", "+G+", "+B+", .5)";
var R = Math.round(Math.random()* 255);
var G = Math.round(Math.random()* 255);
var B = Math.round(Math.random()* 255);
var FILL = "rgba("+R+", "+G+", "+B+", .08)";
context.beginPath();
context.moveTo(x,y);
context.bezierCurveTo(c1,c2,c3,c4,x2,y2);
context.lineWidth = i/100;
context.strokeStyle = STROKE;
//context.fill FILL;
//context.fill();
context.stroke();
context.closePath();
}
};
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>