In A Galaxy Far Far Away

For this project I decided to create the solar system. You have all the planets, the sun, and even a shooting star to portray such a majestic canvas. You have the sun, Mercury, Venus, Earth and its moon, Mars, Jupiter, Saturn, Uranus, Neptune, and a shooting star to convey what the solar system looks like through my eyes. Originally, all the planets were a single color, but the more I stared at the image I had created, the more I realized it needed something so I added a radial gradient to a couple of the planets. Then I tried to convey a 3-D effect for Saturn's ring using a quadratic curve. I started with the sun and made my way out all the way to Neptune, since Pluto has recently been considered a dwarf planet. I think I was successful in creating this piece because you can truly tell it is the solar system.

var x = 0;
var y = 0;
var height = 800;
var width = 600;

//Background
context.beginPath();
context.rect(x, y, height, width);
context.fillStyle = '#000033';
context.fill();
context.stroke();

var centerx = 0;
var centery = 0;
var radius = 250;
var startx1 = 0;
var starty1 = 0;
var startRadius1 = 300;
var endx1 = 250;
var endy1 = 220;
var endRadius1 = 230;

//Sun
context.beginPath();
context.arc(centerx, centery, radius, 0, 2*Math.PI, false);
var grd = context.createRadialGradient(startx1, starty1, startRadius1, endx1, endy1, endRadius1);
grd.addColorStop(.7, '#FF6600');
grd.addColorStop(1, 'yellow');
context.fillStyle = grd;
context.fill();
context.stroke();

var x2 = 300;
var y2 = 0;
var controlx1 = 290;
var controly1 = 290;
var endx1 = 0;
var endy1 = 300;

//Mercury Ring
context.beginPath();
context.moveTo(x2, y2);
context.quadraticCurveTo(controlx1, controly1, endx1, endy1);
context.strokeStyle = 'black';
context.lineWidth = 3;
context.stroke();

var centerx1 = 285;
var centery1 = 100;
var radius1 = 20;

//Mercury
context.beginPath();
context.arc(centerx1, centery1, radius1, 0, 2*Math.PI, false);
context.fillStyle = 'grey';
context.fill();
context.strokeStyle = 'grey';
context.stroke();

var x3 = 350;
var y3 = 0;
var controlx2 = 350;
var controly2 = 350;
var endx2 = 0;
var endy2 = 350;

//Venus Ring
context.beginPath();
context.moveTo(x3, y3);
context.quadraticCurveTo(controlx2, controly2, endx2, endy2);
context.strokeStyle = 'black';
context.lineWidth = 3;
context.stroke();

var centerx2 = 150;
var centery2 = 330;
var radius2 = 40;

//Venus
context.beginPath();
context.arc(centerx2, centery2, radius2, 0, 2*Math.PI, false);
context.fillStyle = 'burlywood';
context.fill();
context.strokeStyle = 'cornsilk';
context.stroke();

var x4 = 400;
var y4 = 0;
var controlx3 = 430;
var controly3 = 430;
var endx3 = 0;
var endy3 = 400;

//Earth Ring
context.beginPath();
context.moveTo(x4, y4);
context.quadraticCurveTo(controlx3, controly3, endx3, endy3);
context.strokeStyle = 'black';
context.lineWidth = 3;
context.stroke();

var centerx3 = 375;
var centery3 = 200;
var radius3 = 40;
var startx = 375;
var starty = 200;
var startRadius = 40;
var endx = 395;
var endy = 220;
var endRadius = 40;

//Earth
context.beginPath();
context.arc(centerx3, centery3, radius3, 0, 2*Math.PI, false);
var grd = context.createRadialGradient(startx, starty, startRadius, endx, endy, endRadius);
grd.addColorStop(0, 'green');
grd.addColorStop(1, 'blue');
context.fillStyle = grd;
context.fill();
context.stroke();


var centerx3 = 430;
var centery3 = 150;
var radius3 = 10;

//Moon
context.beginPath();
context.arc(centerx3, centery3, radius3, 0, 2*Math.PI, false);
context.fillStyle = 'silver';
context.fill();
context.strokeStyle = 'silver';
context.stroke();

var x5 = 450;
var y5 = 0;
var controlx4 = 500;
var controly4 = 500;
var endx4 = 0;
var endy4 = 450;

//Mars Ring
context.beginPath();
context.moveTo(x5, y5);
context.quadraticCurveTo(controlx4, controly4, endx4, endy4);
context.strokeStyle = 'black';
context.lineWidth = 3;
context.stroke();

var centerx4 = 200;
var centery4 = 435;
var radius4 = 35;

//Mars
context.beginPath();
context.arc(centerx4, centery4, radius4, 0, 2*Math.PI, false);
context.fillStyle = 'maroon';
context.fill();
context.strokeStyle = 'brown';
context.stroke();

var x6 = 550;
var y6 = 0;
var controlx5 = 600;
var controly5 = 600;
var endx5 = 0;
var endy5 = 550;

//Jupiter Ring
context.beginPath();
context.moveTo(x6, y6);
context.quadraticCurveTo(controlx5, controly5, endx5, endy5);
context.strokeStyle = 'black';
context.lineWidth = 3;
context.stroke();

var centerx4 = 535;
var centery4 = 270;
var radius4 = 95;
var startx2 = 535;
var starty2 = 270;
var startRadius2 = 205;
var endx2 = 630;
var endy2 = 365;
var endRadius2 = 95;

//Jupiter
context.beginPath();
context.arc(centerx4, centery4, radius4, 0, 2*Math.PI, false);
var grd = context.createRadialGradient(startx2, starty2, startRadius2, endx2, endy2, endRadius2);
grd.addColorStop(.7, 'peru');
grd.addColorStop(1, 'goldenrod');
context.fillStyle = grd;
context.fill();
context.stroke();

var x7 = 100;
var y7 = 600;
var controlx6 = 700;
var controly6 = 700;
var endx6 = 650;
var endy6 = 0;

//Saturn Ring
context.beginPath();
context.moveTo(x7, y7);
context.quadraticCurveTo(controlx6, controly6, endx6, endy6);
context.strokeStyle = 'black';
context.lineWidth = 3;
context.stroke();

var centerx5 = 650;
var centery5 = 100;
var radius5 = 60;
var startx3 = 650;
var starty3 = 100;
var startRadius3 = 80;
var endx3 = 710;
var endy3 = 160;
var endRadius3 = 90;

//Saturn
context.beginPath();
context.arc(centerx5, centery5, radius5, 0, 2*Math.PI, false);
var grd = context.createRadialGradient(startx3, starty3, startRadius3, endx3, endy3, endRadius3);
grd.addColorStop(.7, 'navajowhite');
grd.addColorStop(1, 'linen');
context.fillStyle = grd;
context.fill();
context.lineWidth = 3;
context.stroke();

var x8 = 150;
var y8 = 600;
var controlx7 = 800;
var controly7 = 800;
var endx7 = 730;
var endy7 = 0;

//Uranus Ring
context.beginPath();
context.moveTo(x8, y8);
context.quadraticCurveTo(controlx7, controly7, endx7, endy7);
context.strokeStyle = 'black';
context.lineWidth = 3;
context.stroke();

var centerx6 = 640;
var centery6 = 530;
var radius6 = 55;

//Uranus
context.beginPath();
context.arc(centerx6, centery6, radius6, 0, 2*Math.PI, false);
context.fillStyle = 'MediumTurquoise';
context.fill();
context.strokeStyle = 'lightblue';
context.stroke();

var x9 = 90;
var y9 = 600;
var controlx8 = 900;
var controly8 = 900;
var endx8 = 790;
var endy8 = 0;

//Neptune Ring
context.beginPath();
context.moveTo(x9, y9);
context.quadraticCurveTo(controlx8, controly8, endx8, endy8);
context.strokeStyle = 'black';
context.lineWidth = 3;
context.stroke();

var centerx7 = 745;
var centery7 = 460;
var radius7 = 50;

//Neptune
context.beginPath();
context.arc(centerx7, centery7, radius7, 0, 2*Math.PI, false);
context.fillStyle = 'RoyalBlue';
context.fill();
context.strokeStyle = 'lightblue';
context.stroke();

var x10 = 590;
var y10 = 100;
var controlx10 = 520;
var controly10 = 90;
var endx10 = 725;
var endy10 = 100;

//Saturn's Rings
context.beginPath();
context.moveTo(x10, y10);
context.quadraticCurveTo(controlx10, controly10, endx10, endy10);
context.strokeStyle = 'orange';
context.lineWidth = 10
context.stroke();

var centerx20 = 300;
var centery20 = 500;
var radius20 = 10;

//Shooting Star
context.beginPath();
context.arc(centerx20, centery20, radius20, 0, 2*Math.PI, false);
context.fillStyle = 'white';
context.fill();
context.strokeStyle = 'grey';
context.lineWidth = 3
context.stroke();

context.beginPath();
context.moveTo(310, 500);
context.bezierCurveTo(340, 500, 370, 500, 390, 530);
context.bezierCurveTo(330, 490, 360, 490, 380, 520);
context.stroke();