CANVAS PROJECT

var grd1 = context.createRadialGradient(401,329,155,401,329,400);
grd1.addColorStop(0,'rgb(174,96,216)');
grd1.addColorStop(1,'rgb(91,104,209)');

var grd2 = context.createLinearGradient(150,0,600,600);
grd2.addColorStop(0,'rgb(137,111,77)');
grd2.addColorStop(1, 'rgb(255,224,187)');

var grd3 = context.createLinearGradient(81,317,81,538);
grd3.addColorStop(0,'rgb(181,165,143)');
grd3.addColorStop(0.5,'rgb(181,165,143)');
grd3.addColorStop(1, 'rgb(249,238,222)');


context.beginPath();
context.rect(0,0,800,600);
context.lineWidth = 4;
context.stroke();
context.fillStyle = grd1;
context.fill();


context.closePath();

context.beginPath();

context.moveTo(299,68);
context.lineTo(276,239);
context.lineTo(259,418);
context.lineTo(259,542);
context.lineTo(317,542);
context.lineTo(317,236);
context.lineTo(299,68);
context.fillStyle = grd2;
context.fill();
context.closePath();

context.beginPath();
context.moveTo(350,26);
context.lineTo(323,236);
context.lineTo(317,305);
context.lineTo(317,542);
context.lineTo(374,542);
context.lineTo(374,241);
context.lineTo(350,26);
context.fillStyle = grd2;
context.fill();
context.closePath();

context.beginPath();
context.moveTo(449,30);
context.lineTo(422,226);
context.lineTo(422,333);
context.lineTo(422,542);
context.lineTo(472,542);
context.lineTo(472,234);
context.lineTo(464,144);
context.lineTo(449,40);
context.fillStyle = grd2;
context.fill();
context.closePath();

context.beginPath();
context.moveTo(495,68);
context.lineTo(472,231);
context.lineTo(472,542);
context.lineTo(520,542);
context.lineTo(520,332);
context.lineTo(514,229);
context.lineTo(495,68);
context.fillStyle = grd2;
context.fill();
context.closePath();

context.beginPath();
context.moveTo(139,346);
context.lineTo(114,418);
context.lineTo(163,418);
context.lineTo(139,346);
context.fillStyle = grd3;
context.fill();
context.closePath();

context.beginPath();
context.moveTo(186,351);
context.lineTo(163,418);
context.lineTo(212,418);
context.lineTo(186,351);
context.fillStyle = grd3;
context.fill();
context.closePath();

context.beginPath();
context.moveTo(234,346);
context.lineTo(212,418);
context.lineTo(261.5,418);
context.lineTo(234,346);
context.fillStyle = grd3;
context.fill();
context.closePath();

context.beginPath();
context.rect(114,418,49,124);
context.fillStyle = grd3;
context.fill();
context.closePath();

context.beginPath();
context.rect(163,418,49,124);

context.fillStyle = grd3;
context.fill();

context.closePath();

context.beginPath();

context.rect(212,418,49,124);

context.fillStyle = grd3;
context.fill();

context.closePath();


context.beginPath();

context.moveTo(520,319);
context.lineTo(527,337);
context.lineTo(532,319);
context.lineTo(538,342);
context.lineTo(542,347);
context.lineTo(545,364);
context.lineTo(551,326);
context.lineTo(561,380);
context.lineTo(561,413);
context.lineTo(577,413);
context.lineTo(570,351);
context.lineTo(577,312);
context.lineTo(591,356);
context.lineTo(591,417);
context.lineTo(606,417);
context.lineTo(599,365);
context.lineTo(606,317);
context.lineTo(614,346);
context.lineTo(620,320);
context.lineTo(632,377);
context.lineTo(621,379);
context.lineTo(632,417);
context.lineTo(643,417);
context.lineTo(637,542);
context.lineTo(520,542);
context.lineTo(520,319);

context.fillStyle = grd3;
context.fill();

context.closePath();


context.beginPath();

context.moveTo(337,403);
context.lineTo(314,521);
context.lineTo(314,551);
context.lineTo(360,551);
context.lineTo(360,493);
context.lineTo(337,403);

context.fillStyle = 'rgb(175,135,70)';
context.fill();

context.closePath();

context.beginPath();

context.moveTo(402,301);
context.lineTo(360,493);
context.lineTo(360,551);
context.lineTo(493,551);
context.lineTo(439,493);
context.lineTo(402,301);

context.fillStyle = 'rgb(175,135,70)';
context.fill();

context.closePath();

context.beginPath();

context.moveTo(462,420);
context.lineTo(439,493);
context.lineTo(439,551);
context.lineTo(484,551);
context.lineTo(484,529);
context.lineTo(462,420);

context.fillStyle = 'rgb(175,135,70)';
context.fill();

context.closePath();

context.beginPath();

context.moveTo(374,270);
context.lineTo(402,257);
context.lineTo(422,270);
context.lineTo(422,284);
context.lineTo(402,270);
context.lineTo(374,284);
context.lineTo(374,270);

context.fillStyle = 'rgb(175,135,70)';
context.fill();

context.closePath();

context.beginPath();

context.arc(137,449,10,0*Math.PI,2*Math.PI,false);
context.lineWidth = 2;
context.fillStyle = "rgba(0,0,0,.7)";
context.fill();
context.stroke();

context.closePath();

context.beginPath();

context.arc(237,449,10,0*Math.PI,2*Math.PI,false);
context.lineWidth = 2;
context.fillStyle = "rgba(0,0,0,.7)";
context.fill();
context.stroke();

context.closePath();

context.beginPath();

context.arc(187,449,10,0*Math.PI,2*Math.PI,false);
context.lineWidth = 2;
context.fillStyle = "rgba(0,0,0,.7)";
context.fill();
context.stroke();

context.closePath();

context.beginPath();

context.moveTo(72,117);
context.bezierCurveTo(77,157,145,93,162,144);
context.bezierCurveTo(157,92,252,144,241,99);
context.quadraticCurveTo(228,62,181,83);
context.quadraticCurveTo(148,61,133,93);
context.quadraticCurveTo(82,65,72,117);

context.fillStyle = 'rgb(255,255,255)';
context.fill();

context.closePath();

context.beginPath();


context.font = 'italic 30pt Calibri';
context.fillText('Sagrada Familia', 510, 50);

context.closePath();


context.beginPath();

context.rect(565, 97, 220, 130);
context.fillStyle = 'rgb(255,0,0)';
context.fill();
context.lineWidth = 1;
context.strokeStyle = 'rgb(0,0,0)';
context.stroke();

context.closePath();

context.beginPath();

context.moveTo(565,97.5);
context.lineTo(565,110);
context.lineTo(784,111);
context.lineTo(784,97.5);
context.lineWidth = 1;
context.strokeStyle = 'rgb(0,0,0)';
context.stroke();
context.fillStyle = 'rgb(255,255,0)';
context.fill();

context.closePath();

     
context.beginPath();

context.moveTo(565,126);
context.lineTo(784,126);
context.strokeStyle = 1;
context.stroke();

context.closePath();

context.beginPath();

context.moveTo(565,126);
context.lineTo(565,139);
context.lineTo(784,139);
context.lineTo(784,126);
context.lineWidth = 1;
context.strokeStyle = 'rgb(0,0,0)';
context.stroke();
context.fillStyle = 'rgb(255,255,0)';
context.fill();

context.closePath();

context.beginPath();

context.moveTo(565,140);
context.lineTo(784,140);
context.strokeStyle = 1;
context.stroke();

context.closePath();

context.beginPath();

context.moveTo(565,155);
context.lineTo(565,170);
context.lineTo(784,170);
context.lineTo(784,155);
context.lineWidth = 1;
context.strokeStyle = 'rgb(0,0,0)';
context.stroke();
context.fillStyle = 'rgb(255,255,0)';
context.fill();

context.closePath();

context.beginPath();

context.moveTo(565,170);
context.lineTo(784,170);
context.strokeStyle = 1;
context.stroke();

context.closePath();

context.beginPath();

context.moveTo(565,184);
context.lineTo(565,199);
context.lineTo(784,199);
context.lineTo(784,184);
context.lineWidth = 1;
context.strokeStyle = 'rgb(0,0,0)';
context.stroke();
context.fillStyle = 'rgb(255,255,0)';
context.fill();

context.closePath();


context.beginPath();

context.moveTo(565,200);
context.lineTo(784,200);
context.strokeStyle = 2;
context.stroke();

context.closePath();

context.beginPath();

context.moveTo(565,212);
context.lineTo(565,226);
context.lineTo(784,226);
context.lineTo(784,212);
context.lineWidth = 2;
context.strokeStyle = 'rgb(0,0,0)';
context.stroke();
context.fillStyle = 'rgb(255,255,0)';
context.fill();

context.closePath();

context.beginPath();

context.moveTo(565,97);
context.lineTo(654,155);
context.lineTo(565,226);
context.lineTo(565,97);
context.stokeStyle = 'rgb(0,0,0)';
context.stroke();
context.fillStyle = 'rgb(0,0,255)';
context.fill();

context.closePath();

context.beginPath();

context.moveTo(600,125);
context.lineTo(590,143);
context.lineTo(570,146);
context.lineTo(584,160);
context.lineTo(581,180);
context.lineTo(599,171);
context.lineTo(616,180);
context.lineTo(613,160);
context.lineTo(628,147);
context.lineTo(608,143);
context.lineTo(600,124);
context.stokeStyle = 'rgb(0,0,0)';
context.stroke();
context.fillStyle = 'rgb(255,255,255)';
context.fill();

context.closePath();