Project 2: ASCII

I used my professors concept graph in order to size my project the correct way. I don't think I would have been able to do this project without this graph, it was very very helpful. This was definitely one of the more easier projects for me

//Outline
context.beginPath();
context.moveTo(150, 200);
context.lineTo(150, 475);
context.quadraticCurveTo(150, 550, 225, 550);
context.lineTo(575, 550);
context.quadraticCurveTo(650, 550, 650, 475);
context.lineTo(650, 200);
context.lineTo(150, 200);
context.closePath();
var grd = context.createLinearGradient(400, 200, 400, 550);
grd.addColorStop(0, '#F0EAE4');
grd.addColorStop(1, '#B39985');
context.fillStyle = grd;
context.fill();
context.stroke();




//Outline continued
context.beginPath();
context.moveTo(650, 200);
context.lineTo(650, 125);
context.quadraticCurveTo(650, 45, 575, 50);
context.lineTo(225, 50);
context.quadraticCurveTo(150, 55, 150, 125);
context.lineTo(150, 200);
var grd = context.createLinearGradient(400, 50, 400, 200);
grd.addColorStop(.5, '#B39076');
grd.addColorStop(1, '#482118');
context.fillStyle = grd;
context.fill();
context.stroke();


//Big circle
context.beginPath();
context.arc(400, 300, 125, 0, 2*Math.PI);
var grd = context.createLinearGradient(400, 200, 400, 550);
grd.addColorStop(0, '#F0EAE4');
grd.addColorStop(1, '#B39985');
context.fillStyle = grd;
context.fill();
context.stroke();

//Immer big circle
context.beginPath();
context.arc(400, 300, 110, 0, 2*Math.PI);
var grd = context.createLinearGradient(400, 190, 400, 415);
grd.addColorStop(0, '#547549');
grd.addColorStop(1, '#517C7E');
context.fillStyle = grd;
context.fill();
context.stroke();

//Smaller camera
context.beginPath();
context.moveTo(500, 100);
context.lineTo(500, 175);
context.quadraticCurveTo(500, 190, 525, 190);
context.lineTo(600, 190);
context.quadraticCurveTo(615, 190, 615, 175);
context.lineTo(615, 100);
context.quadraticCurveTo(615, 80, 595, 80);
context.lineTo(525, 80);
context.quadraticCurveTo(500, 80, 500, 100);
context.stroke();

//Smallest Camera
context.beginPath();
context.moveTo(515, 100);
context.lineTo(515, 165);
context.quadraticCurveTo(515, 180, 530, 180);
context.lineTo(580, 180);
context.quadraticCurveTo(600, 180, 600, 165);
context.lineTo(600, 100);
context.quadraticCurveTo(600, 88, 580, 90);
context.lineTo(525, 90);
context.quadraticCurveTo(515, 90, 515, 100);
var grd = context.createLinearGradient(550, 150, 550, 185);
grd.addColorStop(.5, '#3A5657');
grd.addColorStop(1, '#0D100F');
context.fillStyle = grd;
context.fill();
context.stroke();

//Rainbow
context.beginPath();
context.moveTo(175, 67);
context.lineTo(175, 200);
context.lineTo(275, 200);
context.lineTo(275, 50);
context.lineTo(225, 50);
context.quadraticCurveTo(172, 59, 175, 69);
var grd = context.createLinearGradient(175, 67, 275, 67);
grd.addColorStop(0, 'rgb(255, 0, 0)');
grd.addColorStop(.24, 'rgb(255, 0, 0)');
grd.addColorStop(.25, 'rgb(255, 255, 0)');
grd.addColorStop(.49, 'rgb(255, 255, 0)');
grd.addColorStop(.50, 'rgb(0, 255, 0)');
grd.addColorStop(.74, 'rgb(0, 255, 0)');
grd.addColorStop(.75, 'rgb(0, 0, 255)');
grd.addColorStop(1, 'rgb(0, 0, 255)');
context.fillStyle = grd;
context.fill();


//Oval
context.beginPath();
context.moveTo(190, 235);
context.lineTo(265, 235);
context.bezierCurveTo(295, 230, 295, 190, 265, 185);
context.lineTo(190, 185);
context.bezierCurveTo(165, 190, 165, 230, 190, 235);
var grd = context.createLinearGradient(200, 190, 265, 235);
grd.addColorStop(.25, '#7D7369');
grd.addColorStop(1, '#4F453F');
context.fillStyle = grd;
context.fill();
context.stroke();

//Smallest circle
context.beginPath();
context.arc(558, 135, 28, 0, 2*Math.PI);
var grd = context.createLinearGradient(555, 110, 555, 160);
grd.addColorStop(0, '#6E8D97');
grd.addColorStop(1, '#514055');
context.fillStyle = grd;
context.fill();
context.stroke();

//Smallest circle in bigger circles
context.beginPath();
context.arc(400, 300, 50, 0, 2*Math.PI);
var grd = context.createLinearGradient(400, 190, 400, 415);
grd.addColorStop(0, '#6E8D97');
grd.addColorStop(1, '#514055');
context.fillStyle = grd;
context.fill();
context.stroke();