Alien Landscape

This is my alien landscape project from the canvas folder I worked on in Dreamweaver. I really enjoyed this project because I liked learning how to work with Dreamweaver and create things by code, but this took me days to complete this project. I learned how to create a gradient in Dreamweaver and I also learned how to create distinctive shapes.

//// >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> YOUR CODE STARTS HERE   // BACKGROUND   var myGradient0 = context.createRadialGradient(0,0,50,100,100,300);      myGradient0.addColorStop(0,"rgba(174,160,217,1)");      myGradient0.addColorStop(0.25,"rgba(102,122,230,1)");      myGradient0.addColorStop(0.5,"rgba(144,116,153,1)");      myGradient0.addColorStop(0.75,"rgba(123,47,211,1)");      myGradient0.addColorStop(1,"rgba(92,30,157,1)");            context.beginPath();       context.rect(0,0,800,600);       context.closePath();           context.fillStyle = myGradient0;      context.fill();   ///// BIG CIRCLE 3           var grdBigCircle3 =      context.createRadialGradient(550,125,25,550,125,200);      grdBigCircle3.addColorStop(0, "rgba(202,252,254,1)");      grdBigCircle3.addColorStop(0.25, "rgba(167,254,248,1)");      grdBigCircle3.addColorStop(0.5, "rgba(0,254,227,1)");      grdBigCircle3.addColorStop(0.75, "rgba(7,187,240,1)");      grdBigCircle3.addColorStop(1, "rgba(15,121,254,1)");           context.beginPath();               context.arc(550,125,200,0,Math.PI*2,true);           context.closePath();           context.fillStyle = grdBigCircle3;      context.fill();           context.stroke();                  /// TRIANGLE   var myGradient1 = context.createRadialGradient(500,100,50,500,100,400);      myGradient1.addColorStop(0, "rgba(174,160,217,1)");      myGradient1.addColorStop(0.25, "rgba(102,122,230,1)");      myGradient1.addColorStop(0.5, "rgba(144,116,153,1)");      myGradient1.addColorStop(0.75, "rgba(123,47,211,1)");      myGradient1.addColorStop(1, "rgba(92,30,157,1)");       context.beginPath();           context.moveTo(500,100);      context.lineTo(300,500);      context.lineTo(700,500);       context.closePath();       context.fillStyle = myGradient1;  context.fill();        ///// BIG CIRCLE           context.beginPath();               context.arc(450,220,190,0,Math.PI*2,true);           context.closePath();           // DRAW AT LEAST 4 ADDITIONAL CIRCLES           // CHANGE THE fillStyle TO 4 DIFFERENT RADIAL GRADIENTS           context.fillStyle = "rgba(0,64,255,0.5)";      context.fill();           context.stroke();       ///// BIG CIRCLE 2           var grdBigCircle2 =      context.createRadialGradient(100,500,15,100,500,140);      grdBigCircle2.addColorStop(0, "rgba(255,64,20,1)");      grdBigCircle2.addColorStop(0.25, "rgba(255,82,82,1)");      grdBigCircle2.addColorStop(0.5, "rgba(1,255,0,1)");      grdBigCircle2.addColorStop(0.75, "rgba(136,0,255,1)");      grdBigCircle2.addColorStop(1, "rgba(253,253,253,1)");           context.beginPath();               context.arc(100,500,140,0,Math.PI*2,true);           context.closePath();           context.fillStyle = grdBigCircle2;      context.fill();           context.stroke();           ///// CIRCLE 1           var grdCircle1 =      context.createRadialGradient(700,500,5,700,500,150);      grdCircle1.addColorStop(0, "rgba(243,0,85,1)");      grdCircle1.addColorStop(0.25, "rgba(211,0,230,1)");      grdCircle1.addColorStop(0.5, "rgba(178,0,255,1)");      grdCircle1.addColorStop(0.75, "rgba(253,0,190,1)");      grdCircle1.addColorStop(1, "rgba(123,12,243,1)");        context.beginPath();               context.arc(700,500,150,0,Math.PI*2,true);           context.closePath();           context.fillStyle = grdCircle1;      context.fill();           context.stroke();           ///// SMALL CIRCLE 1           var grdSmallCircle =      context.createRadialGradient(88,130,5,88,130,10);      grdSmallCircle.addColorStop(0, "rgba(129,232,213,1)");      grdSmallCircle.addColorStop(1, "rgba(53,255,169,1)");           context.beginPath();               context.arc(88,130,10,0,Math.PI*2,true);           context.closePath();           context.fillStyle = grdSmallCircle;      context.fill();           context.stroke();       ///// SMALL CIRCLE 8           var grdSmallCircle8 =      context.createRadialGradient(264,147,5,264,147,10);      grdSmallCircle8.addColorStop(0, "rgba(129,232,213,1)");      grdSmallCircle8.addColorStop(1, "rgba(53,255,169,1)");                context.beginPath();               context.arc(264,147,10,0,Math.PI*2,true);           context.closePath();           context.fillStyle = grdSmallCircle8;      context.fill();           context.stroke();           ///// SMALL CIRCLE 9           var grdSmallCircle9 =      context.createRadialGradient(231,130,2,231,130,10);      grdSmallCircle9.addColorStop(0, "rgba(129,232,213,1)");      grdSmallCircle9.addColorStop(1, "rgba(53,255,169,1)");                context.beginPath();               context.arc(231,130,10,0,Math.PI*2,true);           context.closePath();           context.fillStyle = grdSmallCircle9;      context.fill();           context.stroke();                ///// CIRCLE 2           var grdCircle2 = context.createRadialGradient(160,170,15,160,170,75);      grdCircle2.addColorStop(0, "rgba(71,243,222,1)");      grdCircle2.addColorStop(0.25, "rgba(79,217,207,1)");      grdCircle2.addColorStop(0.5, "rgba(122,183,230,1)");           grdCircle2.addColorStop(0.75, "rgba(74,116,240,1)");           grdCircle2.addColorStop(1, "rgba(24,210,253,1)");           context.beginPath();               context.arc(160,170,75,0,Math.PI*2,true);           context.closePath();           context.fillStyle = grdCircle2;      context.fill();           context.stroke();           context.fillStyle             ///// SMALL CIRCLE 2           var grdSmallCircle2 =      context.createRadialGradient(54,147,3,54,147,10);      grdSmallCircle2.addColorStop(0, "rgba(129,232,213,1)");      grdSmallCircle2.addColorStop(1, "rgba(53,255,169,1)");           context.beginPath();               context.arc(54,147,10,0,Math.PI*2,true);           context.closePath();           context.fillStyle = grdSmallCircle2;      context.fill();           context.stroke();       ///// SMALL CIRCLE 3           var grdSmallCircle3 =      context.createRadialGradient(85,167,2,85,167,10);      grdSmallCircle3.addColorStop(0, "rgba(129,232,213,1)");      grdSmallCircle3.addColorStop(1, "rgba(53,255,169,1)");           context.beginPath();               context.arc(85,167,10,0,Math.PI*2,true);           context.closePath();           context.fillStyle = grdSmallCircle3;      context.fill();           context.stroke();       ///// SMALL CIRCLE 4           var grdSmallCircle4 =      context.createRadialGradient(123,181,2,123,181,10);      grdSmallCircle4.addColorStop(0, "rgba(129,232,213,1)");      grdSmallCircle4.addColorStop(1, "rgba(53,255,169,1)");       context.beginPath();               context.arc(123,181,10,0,Math.PI*2,true);           context.closePath();           context.fillStyle = grdSmallCircle4;      context.fill();           context.stroke();       ///// SMALL CIRCLE 5           var grdSmallCircle5 =      context.createRadialGradient(163,185,2,163,185,10);      grdSmallCircle5.addColorStop(0, "rgba(129,232,213,1)");      grdSmallCircle5.addColorStop(1, "rgba(53,255,169,1)");           context.beginPath();               context.arc(163,185,10,0,Math.PI*2,true);           context.closePath();           context.fillStyle = grdSmallCircle5;      context.fill();           context.stroke();       ///// SMALL CIRCLE 6           var grdSmallCircle6 =      context.createRadialGradient(203,181,2,203,181,10);           grdSmallCircle6.addColorStop(0, "rgba(129,232,213,1)");      grdSmallCircle6.addColorStop(1, "rgba(53,255,169,1)");           context.beginPath();               context.arc(203,181,10,0,Math.PI*2,true);           context.closePath();           context.fillStyle = grdSmallCircle6;      context.fill();           context.stroke();       ///// SMALL CIRCLE 7           var grdSmallCircle7 =      context.createRadialGradient(237,167,2,237,167,10);      grdSmallCircle7.addColorStop(0, "rgba(129,232,213,1)");      grdSmallCircle7.addColorStop(1, "rgba(53,255,169,1)");           context.beginPath();               context.arc(237,167,10,0,Math.PI*2,true);           context.closePath();           context.fillStyle = grdSmallCircle7;      context.fill();           context.stroke();             ///// CIRCLE 3           var grdCircle3 =      context.createRadialGradient(47,65,10,47,65,25);      grdCircle3.addColorStop(0, "rgba(54,47,68,1)");      grdCircle3.addColorStop(0.25, "rgba(0,208,178,1)");      grdCircle3.addColorStop(0.5, "rgba(16,103,132,1)");      grdCircle3.addColorStop(0.75, "rgba(70,77,145,1)");      grdCircle3.addColorStop(1, "rgba(106,65,84,1)");                context.beginPath();               context.arc(47,65,25,0,Math.PI*2,true);           context.closePath();           context.fillStyle = grdCircle3;      context.fill();           context.stroke();       ///// BIG CIRCLE 4       var grdBigCircle4 =      context.createRadialGradient(550,750,25,550,750,300);      grdBigCircle4.addColorStop(0, "rgba(1,9,183,1)");      grdBigCircle4.addColorStop(0.25, "rgba(118,123,234,1)");      grdBigCircle4.addColorStop(0.5, "rgba(14,81,132,1)");      grdBigCircle4.addColorStop(0.75, "rgba(108,201,234,1)");      grdBigCircle4.addColorStop(1, "rgba(29,142,182,1)");       context.beginPath();               context.arc(550,750,300,0,Math.PI*2,true);       context.closePath();           context.fillStyle = grdBigCircle4;      context.fill();           context.stroke();       ///// ALIEN BODY       var grdAlienBody = context.createLinearGradient(400,350,450,600);      grdAlienBody.addColorStop(0, "rgba(7,133,145,1)");      grdAlienBody.addColorStop(0.25, "rgba(8,155,125,1)");      grdAlienBody.addColorStop(0.5, "rgba(0,132,68,1)");      grdAlienBody.addColorStop(0.75, "rgba(65,143,80,1)");      grdAlienBody.addColorStop(1, "rgba(132,145,129,1)");           context.beginPath();           context.moveTo(400,350);      context.lineTo(350,600);      context.lineTo(450,600);       context.closePath();       context.fillStyle = grdAlienBody;  context.fill();       ///// ALIEN HEAD       var grdAlienHead = context.createLinearGradient(325,275,325,400);      grdAlienHead.addColorStop(0, "rgba(7,133,145,1)");      grdAlienHead.addColorStop(0.25, "rgba(8,155,125,1)");      grdAlienHead.addColorStop(0.5, "rgba(0,132,68,1)");      grdAlienHead.addColorStop(0.75, "rgba(65,143,80,1)");      grdAlienHead.addColorStop(1, "rgba(132,145,129,1)");       context.beginPath();      // STARTING POINT COORDINATES Ax, Ay  context.moveTo(325,275);      // BEIZER CURVE      // CP1x, CP1y, CP2x, CP2y, Bx, By  context.bezierCurveTo(325,400,475,400,475,275);  context.bezierCurveTo(475,175,325,175,325,275);       context.closePath();       context.fillStyle = grdAlienHead;  context.fill();   context.stroke();          ///// RIGHT EYE       context.beginPath();       var grdRightEye =  context.createRadialGradient(450,225,10,450,225,50);      grdRightEye.addColorStop(0, "rgba(255,255,255,1)");      grdRightEye.addColorStop(0.5, "rgba(122,7,0,1)");      grdRightEye.addColorStop(1, "rgba(0,0,0,1)");           context.moveTo(450,225); // C      context.quadraticCurveTo(475,275,425,275); // CP5, D      context.quadraticCurveTo(415,225,450,225); // CP6, C            context.closePath();      context.fillStyle = grdRightEye;      context.fill();           context.stroke();   ///// LEFT EYE       var grdLeftEye =  context.createRadialGradient(350,225,10,350,225,50);      grdLeftEye.addColorStop(0, "rgba(255,255,255,1)");      grdLeftEye.addColorStop(0.5, "rgba(122,7,0,1)");      grdLeftEye.addColorStop(1, "rgba(0,0,0,1)");          context.beginPath();           context.moveTo(350,225); // E      context.quadraticCurveTo(325,275,375,275); // CP7, F      context.quadraticCurveTo(387,225,350,225); // CP8, E                context.closePath();      context.fillStyle =      context.fill();           context.stroke();                                       //// <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< YOUR CODE ENDS HERE