I found this project absolutely exasperating. I am a very visual learner as well as visually creative. It was very stressful and confusing to have to take a mathematical and entirely unartistic approach to completing this project. My finished design which is of a combination moon and sun, is very simplistic by my standards; however, took me many hours because of the complexity and redundancy of the coding. I can say I really hope I never have to do extensive coding ever again.
Coding:
//Background
context.beginPath();
context.rect(0, 0, 800, 600);
context.fillStyle = '000066';
context.fill();
context.stroke();
//SunRays1
context.beginPath();
context.moveTo(470, 167);
context.lineTo(543, 20);
context.lineWidth = 3;
context.strokeStyle = '#ffff00';
context.lineCap = 'round';
context.stroke();
context.beginPath();
context.moveTo(500, 188);
context.lineTo(600, 75);
context.lineWidth = 3;
context.strokeStyle = '#ffff00';
context.lineCap = 'round';
context.stroke();
context.beginPath();
context.moveTo(530, 225);
context.lineTo(675, 125);
context.lineWidth = 3;
context.strokeStyle = '#ffff00';
context.lineCap = 'round';
context.stroke();
context.beginPath();
context.moveTo(547, 270);
context.lineTo(700, 260);
context.lineWidth = 3;
context.strokeStyle = '#ffff00';
context.lineCap = 'round';
context.stroke();
context.beginPath();
context.moveTo(543, 325);
context.lineTo(680, 410);
context.lineWidth = 3;
context.strokeStyle = '#ffff00';
context.lineCap = 'round';
context.stroke();
context.beginPath();
context.moveTo(530, 375);
context.lineTo(670, 475);
context.lineWidth = 3;
context.strokeStyle = '#ffff00';
context.lineCap = 'round';
context.stroke();
context.beginPath();
context.moveTo(500, 411);
context.lineTo(570, 540);
context.lineWidth = 3;
context.strokeStyle = '#ffff00';
context.lineCap = 'round';
context.stroke();
context.beginPath();
context.moveTo(475, 429);
context.lineTo(518, 580);
context.lineWidth = 3;
context.strokeStyle = '#ffff00';
context.lineCap = 'round';
context.stroke();
//SunRays2
context.beginPath();
context.moveTo(425, 152);
context.quadraticCurveTo(420, 100, 475, 50);
context.bezierCurveTo(450, 75, 500, 125, 470, 167);
context.quadraticCurveTo(442, 150, 425, 152);
context.lineWidth = 7;
context.strokeStyle = '#ffcc00';
context.closePath();
context.stroke();
context.beginPath();
context.moveTo(470, 167);
context.bezierCurveTo(485, 130, 530, 120, 530, 90);
context.quadraticCurveTo(540, 150, 500, 188);
context.quadraticCurveTo(472, 166, 468, 168);
context.lineWidth = 7;
context.strokeStyle = '#ffcc00';
context.closePath();
context.stroke();
context.beginPath();
context.moveTo(500, 188);
context.quadraticCurveTo(540, 140, 600, 133);
context.bezierCurveTo(565, 153, 565, 215, 530, 225);
context.quadraticCurveTo(515, 200, 500, 188);
context.lineWidth = 7;
context.strokeStyle = '#ffcc00';
context.closePath();
context.stroke();
context.beginPath();
context.moveTo(530, 225);
context.quadraticCurveTo(600, 183, 680, 175);
context.bezierCurveTo(615, 205, 575, 285, 547, 270);
context.quadraticCurveTo(540, 240, 530, 225);
context.lineWidth = 7;
context.strokeStyle = '#ffcc00';
context.closePath();
context.stroke();
context.beginPath();
context.moveTo(547, 272);
context.bezierCurveTo(600, 265, 665, 320, 700, 320);
context.bezierCurveTo(635, 320, 580, 365, 548, 325);
context.quadraticCurveTo(554, 300, 547, 272);
context.lineWidth = 7;
context.strokeStyle = '#ffcc00';
context.closePath();
context.stroke();
context.beginPath();
context.moveTo(548, 325);
context.quadraticCurveTo(580, 350, 610, 410);
context.bezierCurveTo(583, 380, 520, 390, 535, 364);
context.quadraticCurveTo(545, 351, 548, 325);
context.lineWidth = 7;
context.strokeStyle = '#ffcc00';
context.closePath();
context.stroke();
context.beginPath();
context.moveTo(530, 375);
context.bezierCurveTo(560, 380, 573, 468, 605, 480);
context.quadraticCurveTo(530, 475, 500, 411);
context.quadraticCurveTo(517, 400, 530, 375);
context.lineWidth = 7;
context.strokeStyle = '#ffcc00';
context.closePath();
context.stroke();
context.beginPath();
context.moveTo(500, 411);
context.quadraticCurveTo(521, 438, 525, 510);
context.quadraticCurveTo(483, 480, 475, 429);
context.quadraticCurveTo(487, 422, 500, 411);
context.lineWidth = 7;
context.strokeStyle = '#ffcc00';
context.closePath();
context.stroke();
context.beginPath();
context.moveTo(475, 429);
context.quadraticCurveTo(495, 490, 470, 565);
context.bezierCurveTo(475, 511, 425, 483, 425, 448)
context.quadraticCurveTo(451, 445, 475, 429);
context.lineWidth = 7;
context.strokeStyle = '#ffcc00';
context.closePath();
context.stroke();
//Sun
context.beginPath();
context.arc(400, 300, 150, 0, 2*Math.PI, false);
context.closePath();
var grd=context.createRadialGradient(400, 300, 50, 400, 400, 400);
grd.addColorStop(0, '#ff9900');
grd.addColorStop(1, '#ffff66');
context.fillStyle = grd;
context.fill();
context.stroke();
//Moon
context.beginPath();
context.moveTo(425, 152);
context.quadraticCurveTo(250, 300, 425, 448);
context.bezierCurveTo(193, 468, 193, 132, 425, 152);
context.closePath();
context.lineWidth = 10;
context.strokeStyle = '#99ccff';
var grd = context.createLinearGradient(200, 300, 600, 300);
grd.addColorStop(0, '#9999cc');
grd.addColorStop(.5, '#99ccff');
context.fillStyle = grd;
context.fill();
context.stroke();
//Stars
context.beginPath();
context.arc(250, 180, 1, 0, 2*Math.PI, false);
context.strokeStyle = '#99ccff';
context.closePath();
context.stroke();
context.beginPath();
context.arc(350, 75, 1, 0, 2*Math.PI, false);
context.strokeStyle = '#99ccff';
context.closePath();
context.stroke();
context.beginPath();
context.arc(100, 200, 1, 0, 2*Math.PI, false);
context.strokeStyle = '#99ccff';
context.closePath();
context.stroke();
context.beginPath();
context.arc(350, 550, 1, 0, 2*Math.PI, false);
context.strokeStyle = '#99ccff';
context.closePath();
context.stroke();
context.beginPath();
context.arc(50, 500, 1, 0, 2*Math.PI, false);
context.strokeStyle = '#99ccff';
context.closePath();
context.stroke();
context.beginPath();
context.arc(200, 435, 1, 0, 2*Math.PI, false);
context.strokeStyle = '#99ccff';
context.closePath();
context.stroke();
context.beginPath();
context.arc(25, 325, 1, 0, 2*Math.PI, false);
context.strokeStyle = '#99ccff';
context.closePath();
context.stroke();
context.beginPath();
context.arc(50, 50, 1, 0, 2*Math.PI, false);
context.strokeStyle = '#99ccff';
context.closePath();
context.stroke();
//Background
context.beginPath();
context.rect(0, 0, 800, 600);
context.fillStyle = '000066';
context.fill();
context.stroke();
//SunRays1
context.beginPath();
context.moveTo(470, 167);
context.lineTo(543, 20);
context.lineWidth = 3;
context.strokeStyle = '#ffff00';
context.lineCap = 'round';
context.stroke();
context.beginPath();
context.moveTo(500, 188);
context.lineTo(600, 75);
context.lineWidth = 3;
context.strokeStyle = '#ffff00';
context.lineCap = 'round';
context.stroke();
context.beginPath();
context.moveTo(530, 225);
context.lineTo(675, 125);
context.lineWidth = 3;
context.strokeStyle = '#ffff00';
context.lineCap = 'round';
context.stroke();
context.beginPath();
context.moveTo(547, 270);
context.lineTo(700, 260);
context.lineWidth = 3;
context.strokeStyle = '#ffff00';
context.lineCap = 'round';
context.stroke();
context.beginPath();
context.moveTo(543, 325);
context.lineTo(680, 410);
context.lineWidth = 3;
context.strokeStyle = '#ffff00';
context.lineCap = 'round';
context.stroke();
context.beginPath();
context.moveTo(530, 375);
context.lineTo(670, 475);
context.lineWidth = 3;
context.strokeStyle = '#ffff00';
context.lineCap = 'round';
context.stroke();
context.beginPath();
context.moveTo(500, 411);
context.lineTo(570, 540);
context.lineWidth = 3;
context.strokeStyle = '#ffff00';
context.lineCap = 'round';
context.stroke();
context.beginPath();
context.moveTo(475, 429);
context.lineTo(518, 580);
context.lineWidth = 3;
context.strokeStyle = '#ffff00';
context.lineCap = 'round';
context.stroke();
//SunRays2
context.beginPath();
context.moveTo(425, 152);
context.quadraticCurveTo(420, 100, 475, 50);
context.bezierCurveTo(450, 75, 500, 125, 470, 167);
context.quadraticCurveTo(442, 150, 425, 152);
context.lineWidth = 7;
context.strokeStyle = '#ffcc00';
context.closePath();
context.stroke();
context.beginPath();
context.moveTo(470, 167);
context.bezierCurveTo(485, 130, 530, 120, 530, 90);
context.quadraticCurveTo(540, 150, 500, 188);
context.quadraticCurveTo(472, 166, 468, 168);
context.lineWidth = 7;
context.strokeStyle = '#ffcc00';
context.closePath();
context.stroke();
context.beginPath();
context.moveTo(500, 188);
context.quadraticCurveTo(540, 140, 600, 133);
context.bezierCurveTo(565, 153, 565, 215, 530, 225);
context.quadraticCurveTo(515, 200, 500, 188);
context.lineWidth = 7;
context.strokeStyle = '#ffcc00';
context.closePath();
context.stroke();
context.beginPath();
context.moveTo(530, 225);
context.quadraticCurveTo(600, 183, 680, 175);
context.bezierCurveTo(615, 205, 575, 285, 547, 270);
context.quadraticCurveTo(540, 240, 530, 225);
context.lineWidth = 7;
context.strokeStyle = '#ffcc00';
context.closePath();
context.stroke();
context.beginPath();
context.moveTo(547, 272);
context.bezierCurveTo(600, 265, 665, 320, 700, 320);
context.bezierCurveTo(635, 320, 580, 365, 548, 325);
context.quadraticCurveTo(554, 300, 547, 272);
context.lineWidth = 7;
context.strokeStyle = '#ffcc00';
context.closePath();
context.stroke();
context.beginPath();
context.moveTo(548, 325);
context.quadraticCurveTo(580, 350, 610, 410);
context.bezierCurveTo(583, 380, 520, 390, 535, 364);
context.quadraticCurveTo(545, 351, 548, 325);
context.lineWidth = 7;
context.strokeStyle = '#ffcc00';
context.closePath();
context.stroke();
context.beginPath();
context.moveTo(530, 375);
context.bezierCurveTo(560, 380, 573, 468, 605, 480);
context.quadraticCurveTo(530, 475, 500, 411);
context.quadraticCurveTo(517, 400, 530, 375);
context.lineWidth = 7;
context.strokeStyle = '#ffcc00';
context.closePath();
context.stroke();
context.beginPath();
context.moveTo(500, 411);
context.quadraticCurveTo(521, 438, 525, 510);
context.quadraticCurveTo(483, 480, 475, 429);
context.quadraticCurveTo(487, 422, 500, 411);
context.lineWidth = 7;
context.strokeStyle = '#ffcc00';
context.closePath();
context.stroke();
context.beginPath();
context.moveTo(475, 429);
context.quadraticCurveTo(495, 490, 470, 565);
context.bezierCurveTo(475, 511, 425, 483, 425, 448)
context.quadraticCurveTo(451, 445, 475, 429);
context.lineWidth = 7;
context.strokeStyle = '#ffcc00';
context.closePath();
context.stroke();
//Sun
context.beginPath();
context.arc(400, 300, 150, 0, 2*Math.PI, false);
context.closePath();
var grd=context.createRadialGradient(400, 300, 50, 400, 400, 400);
grd.addColorStop(0, '#ff9900');
grd.addColorStop(1, '#ffff66');
context.fillStyle = grd;
context.fill();
context.stroke();
//Moon
context.beginPath();
context.moveTo(425, 152);
context.quadraticCurveTo(250, 300, 425, 448);
context.bezierCurveTo(193, 468, 193, 132, 425, 152);
context.closePath();
context.lineWidth = 10;
context.strokeStyle = '#99ccff';
var grd = context.createLinearGradient(200, 300, 600, 300);
grd.addColorStop(0, '#9999cc');
grd.addColorStop(.5, '#99ccff');
context.fillStyle = grd;
context.fill();
context.stroke();
//Stars
context.beginPath();
context.arc(250, 180, 1, 0, 2*Math.PI, false);
context.strokeStyle = '#99ccff';
context.closePath();
context.stroke();
context.beginPath();
context.arc(350, 75, 1, 0, 2*Math.PI, false);
context.strokeStyle = '#99ccff';
context.closePath();
context.stroke();
context.beginPath();
context.arc(100, 200, 1, 0, 2*Math.PI, false);
context.strokeStyle = '#99ccff';
context.closePath();
context.stroke();
context.beginPath();
context.arc(350, 550, 1, 0, 2*Math.PI, false);
context.strokeStyle = '#99ccff';
context.closePath();
context.stroke();
context.beginPath();
context.arc(50, 500, 1, 0, 2*Math.PI, false);
context.strokeStyle = '#99ccff';
context.closePath();
context.stroke();
context.beginPath();
context.arc(200, 435, 1, 0, 2*Math.PI, false);
context.strokeStyle = '#99ccff';
context.closePath();
context.stroke();
context.beginPath();
context.arc(25, 325, 1, 0, 2*Math.PI, false);
context.strokeStyle = '#99ccff';
context.closePath();
context.stroke();
context.beginPath();
context.arc(50, 50, 1, 0, 2*Math.PI, false);
context.strokeStyle = '#99ccff';
context.closePath();
context.stroke();