Welcome!
This site is used to host my work from my Advanced Digital Arts class. For professional portfolio and more artist information please follow the links on the About page! Thank you!
Mandalas: codes on finished work page
Tali'Zorah's code! (╯°□°)╯︵ ┻━┻
Optional background stars have been commented due to darkening of background, but can be added!
<!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.rect(0,0,canvas.width,canvas.height);
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 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>
Optional background stars have been commented due to darkening of background, but can be added!
<!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.rect(0,0,canvas.width,canvas.height);
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 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>