CANVAS PROJECT

/// background

context.beginPath();

context.moveTo(0,0);

context.lineTo(0,600);

context.lineTo(800,600);

context.lineTo(800,0);

context.lineTo(0,0);

 context.lineWidth = 2;

context.fillStyle = 'purple';

context.fill();

context.stroke();

 context.closePath();

//planet

 var grd3 = context.createLinearGradient(300,320,550,600);

 grd3.addColorStop(0, 'rgba(86,162,255,1)'); 

 grd3.addColorStop(.095, 'rgba(144,0,176,1)');

 grd3.addColorStop(.15,'rgba(255,107,203,1)');

 grd3.addColorStop(.2, 'rgba(58,255,248,1)');

 grd3.addColorStop(0.25,'rgba(255,0,255,1)');

 grd3.addColorStop(.3, 'rgba(0,255,202,1)');

 grd3.addColorStop(.35, 'rgba(255,0,178,1)');

 grd3.addColorStop(.4, 'rgba(255,162,189,1)');

 grd3.addColorStop(.5, 'rgba(0,113,255,1)');

 grd3.addColorStop(.6, 'rgba(11,191,189,1)');

 grd3.addColorStop(.7, 'rgba(0,143,247,1)');

grd3.addColorStop(.8, 'rgba(166,169,255,1)');

grd3.addColorStop(.9, 'rgba(250,130,255,1)');

context.beginPath();

context.arc(680,120,113,0*Math.PI,2*Math.PI,true);

context.lineWidth = .5;

context.fillStyle = grd3;

context.fill();

context.stroke();

context.closePath();

//moon

var rdg = context.createRadialGradient(400,300,200,400,300,100);

rdg.addColorStop(0, 'rgba(255,255,0,1)');

rdg.addColorStop(.25, 'rgba(255,255,60,1)');

rdg.addColorStop(.35, 'rgba(255,255,70,1)');

rdg.addColorStop(.42, 'rgba(255,255,80,1)');

rdg.addColorStop(.5, 'rgba(255,255,90,1)');

rdg.addColorStop(.7, 'rgba(255,255,115,1)');

 rdg.addColorStop(0.8, 'rgba(255,255,136,1)');

 rdg.addColorStop(.85, 'rgba(255,255,149,1)');

 rdg.addColorStop(.9, 'rgba(255,255,170,1)');

 rdg.addColorStop(.97, 'rgba(255,255,180,1)');

 rdg.addColorStop(.98, 'rgba(255,255,190,1)');

context.beginPath();

context.arc(400,300,300,0*Math.PI,2*Math.PI,true);

context.lineWidth = .5;

context.fillStyle = rdg;

context.fill();

context.stroke();

context.closePath();

 /////fourth set of hills

 context.beginPath();

context.moveTo(70,600);

context.quadraticCurveTo(400,90,660,575);

context.lineWidth = 5;

context.fillStyle = 'green';

context.fill();

context.stroke();

context.closePath();

 /// third set of hills

context.beginPath();

context.moveTo(0,600);

context.quadraticCurveTo(200,140,400,575);

context.quadraticCurveTo(600,140,800,600);

context.lineWidth = 5;

context.fillStyle = 'green';

context.fill();

context.stroke();

context.closePath();

/////second set of hills

 context.beginPath();

context.moveTo(0,600);

context.quadraticCurveTo(70,210,290,575);

context.quadraticCurveTo(400,210,600,600);

context.quadraticCurveTo(700,230,800,600);

context.lineWidth = 5;

context.fillStyle = 'green';

context.fill();

context.stroke();

context.closePath();

/// first set of hills

context.beginPath();

context.moveTo(0,600);

context.quadraticCurveTo(200,270,400,600);

context.quadraticCurveTo(600,250,800,600);

context.lineWidth = 5;

context.fillStyle = 'green';

context.fill();

context.stroke();

context.closePath();

///barn

context.beginPath();

context.moveTo(180,230);

context.lineTo(200,200);

context.lineTo(250,175);

context.lineTo(300,200);

context.lineTo(320,230);

context.lineTo(320,315);

context.lineTo(180,315);

context.lineTo(180,230);

context.lineWidth = 2;

context.fillStyle = 'red';

context.fill();

context.stroke();

context.closePath();

//roof

context.beginPath();

context.moveTo(180,230);

context.lineTo(200,200);

context.lineTo(250,175);

context.lineTo(300,200);

context.lineTo(320,230);

context.lineWidth = 10;

context.fillStyle = 'red';

context.fill();

context.stroke();

context.closePath();

//barn details

context.beginPath();

context.moveTo(220,260);

context.lineTo(220,310);

context.lineTo(280,310);

context.lineTo(280,260);

context.lineTo(220,310);

context.lineTo(220,260);

context.lineTo(280,310);

context.lineTo(280,260);

context.lineTo(220,260);

context.moveTo(230,208.3);

context.lineTo(230,235);

context.lineTo(270,235);

context.lineTo(270,210);

context.lineTo(230,210);

context.lineWidth = 4;

context.strokeStyle = 'white';

context.fillStyle = 'black';

context.fill();

context.stroke();

context.closePath();

//

context.moveTo(250,260);

context.lineTo(250,310);

context.lineWidth = 3;

context.strokeStyle = 'white';

context.fillStyle = 'red';

context.fill();

context.stroke();

//RAYS

context.beginPath();

context.moveTo(235,10);

context.lineTo(80,420);

context.lineTo(440,410);

context.lineTo(235,50);

context.lineWidth = .01;

context.fillStyle = 'rgba(11,255,206,.45)';

context.fill();

context.stroke();

context.closePath();

//spaceship

context.beginPath();

context.moveTo(90,100);

context.quadraticCurveTo(250,0,380,100);

context.quadraticCurveTo(250,185,90,100);

context.lineWidth = 2;

context.strokeStyle = 'black';

context.fillStyle = 'rgba(127,132,128,1)';

context.fill();

context.stroke();

context.closePath();

 //

 context.beginPath();

context.arc(235,75,65,0*Math.PI,1*Math.PI,true);

context.lineWidth= 1;

context.fillStyle = 'rgba(127,132,128,1)';

context.fill();

context.stroke();

context.closePath();

// line on spaceship

 context.beginPath();

context.moveTo(150,70);

context.quadraticCurveTo(235,101,330,70);

context.lineWidth = 1;

context.fillStyle = 'rgba(127,132,128,1)';

context.fill();

context.stroke();

context.closePath();

 // SQUARE windows

 context.beginPath();

 context.rect(125,90,20,10);

 context.lineWidth = 1

 context.fillStyle = 'rgba(117,240,255,1)';

 context.fill();

 context.stroke();

 context.closePath;

 //

context.beginPath();

 context.rect(165,90,20,10);

 context.lineWidth = 1

 context.fillStyle = 'rgba(117,240,255,1)';

 context.fill();

 context.stroke();

 context.closePath;

  //

context.beginPath();

 context.rect(205,90,20,10);

 context.lineWidth = 1

 context.fillStyle = 'rgba(117,240,255,1)';

 context.fill();

 context.stroke();

 context.closePath;

  //

context.beginPath();

 context.rect(245,90,20,10);

 context.lineWidth = 1

 context.fillStyle = 'rgba(117,240,255,1)';

 context.fill();

 context.stroke();

 context.closePath;

 //

context.beginPath();

 context.rect(285,90,20,10);

 context.lineWidth = 1

 context.fillStyle = 'rgba(117,240,255,1)';

 context.fill();

 context.stroke();

 context.closePath;

 //

context.beginPath();

 context.rect(325,90,20,10);

 context.lineWidth = 1

 context.fillStyle = 'rgba(117,240,255,1)';

 context.fill();

 context.stroke();

 context.closePath;

////CIRCLE WINDOWS

 context.beginPath();

context.arc(185,65,8,0*Math.PI,2*Math.PI,false);

context.lineWidth = 1;

context.fillStyle = 'black';

context.fill();

context.stroke();

context.closePath();

//

context.beginPath();

context.arc(215,65,8,0*Math.PI,2*Math.PI,false);

context.lineWidth = 1;

context.fillStyle = 'black';

context.fill();

context.stroke();

context.closePath();

//

context.beginPath();

context.arc(245,65,8,0*Math.PI,2*Math.PI,false);

context.lineWidth = 1;

context.fillStyle = 'black';

context.fill();

context.stroke();

context.closePath();

//

context.beginPath();

context.arc(275,65,8,0*Math.PI,2*Math.PI,false);

context.lineWidth = 1;

context.fillStyle = 'black';

context.fill();

context.stroke();

context.closePath();

////spaceship2

 //legs

context.beginPath();

context.moveTo(590,370);

context.lineTo(590,428);

context.lineWidth = 15;

context.strokeStyle = 'black';

context.fill();

context.stroke();

context.closePath();

///

context.moveTo(690,380);

context.lineTo(678,451.5);

context.lineWidth = 15;

context.strokeStyle = 'black';

context.fill();

context.stroke();

context.closePath();

//alien

context.moveTo(635,330);

context.quadraticCurveTo(650,0,700,330);

//ship part

context.beginPath();

context.moveTo(550,350);

context.quadraticCurveTo(675,360,740,390);

context.quadraticCurveTo(620,450,550,350);

context.lineWidth = 2;

context.strokeStyle = 'black';

context.fillStyle = 'rgba(127,132,128,1)';

context.fill();

context.stroke();

context.closePath();

///bubble

 context.beginPath();

context.arc(645,376,60,0*Math.PI,1.125*Math.PI,true);

context.lineWidth= 2;

context.fillStyle = 'rgba(127,132,128,.5)';

context.fill();

context.stroke();

context.closePath();

//alien

context.beginPath();

context.moveTo(640,343);

context.quadraticCurveTo(660,299,670,350);

context.lineWidth= 2;

context.strokeStyle = 'black';

context.fillStyle = "limegreen";

context.fill();

context.stroke();

context.closePath();

//eye1

context.beginPath();

context.arc(651,336,3,0*Math.PI,2*Math.PI,false);

context.lineWidth = 1;

context.fillStyle = 'black';

context.fill();

context.stroke();

context.closePath();

//eye 2

context.beginPath();

context.arc(661,337,3,0*Math.PI,2*Math.PI,false);

context.lineWidth = 1;

context.fillStyle = 'black';

context.fill();

context.stroke();

context.closePath();

//

context.beginPath();

context.moveTo(640,343);

context.quadraticCurveTo(650,380,670,350);

context.lineWidth= 2;

context.strokeStyle = 'black';

context.fillStyle = "limegreen";

context.fill();

context.stroke();

context.closePath();

//mouth

context.beginPath();

context.arc(655,353,7,0*Math.PI,1*Math.PI,true);

context.lineWidth = 1;

context.fillStyle = 'black';

context.fill();

context.stroke();

context.closePath();

//circles windows 2

context.beginPath();

context.arc(585,367,6,0*Math.PI,2*Math.PI,false);

context.lineWidth = 3;

context.fillStyle = 'red';

context.fill();

context.stroke();

context.closePath();

//

context.beginPath();

context.arc(612,373,6,0*Math.PI,2*Math.PI,false);

context.lineWidth = 3;

context.fillStyle = 'red';

context.fill();

context.stroke();

context.closePath();

//

context.beginPath();

context.arc(640,379,6,0*Math.PI,2*Math.PI,false);

context.lineWidth = 3;

context.fillStyle = 'red';

context.fill();

context.stroke();

context.closePath();

//

context.beginPath();

context.arc(670,385,6,0*Math.PI,2*Math.PI,false);

context.lineWidth = 3;

context.fillStyle = 'red';

context.fill();

context.stroke();

context.closePath();

//

context.beginPath();

context.arc(670,385,6,0*Math.PI,2*Math.PI,false);

context.lineWidth = 3;

context.fillStyle = 'red';

context.fill();

context.stroke();

context.closePath();

//

context.beginPath();

context.arc(702,390,6,0*Math.PI,2*Math.PI,false);

context.lineWidth = 3;

context.fillStyle = 'red';

context.fill();

context.stroke();

context.closePath();