FINAL CANVAS! (:
Inspired by the infamous New York street artists.
Examples:
http://www.youtube.com/watch?v=T9DN0SYY8NY
http://www.youtube.com/watch?v=zMjiD59D3xE
HTML Code:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title> Skylined </title>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
//// >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> START HERE
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
context.rect(0, 0, 800, 600);
// add linear gradient
var grd = context.createLinearGradient(0, 600, 0, 0);
// light blue
grd.addColorStop(0, "rgb(0,0,0)");
// dark blue
grd.addColorStop(1, "rgb(10,0,80)");
context.fillStyle = grd;
context.fill();
//////////////////// PLANETS
// 5
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var centerX = 625;
var centerY = 205;
var radius = 3;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
// create radial gradient
var grd = context.createRadialGradient(624, 205, 0, 624, 205, 1);
grd.addColorStop(0, "rgb(243,205,54)");
grd.addColorStop(1, "rgb(199,0,139)");
context.fillStyle = grd;
context.fill();
context.lineWidth = .15;
context.strokeStyle = "rgba(255,255,255,.15)";
context.stroke();
// 4
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var centerX = 535;
var centerY = 210;
var radius = 9;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
// create radial gradient
var grd = context.createRadialGradient(530, 210, 0, 530, 210, 10);
grd.addColorStop(0, "rgb(111,163,253)");
grd.addColorStop(.4, "rgb(19,87,203)");
grd.addColorStop(1, "rgb(0,33,90)");
context.fillStyle = grd;
context.fill();
context.lineWidth = .25;
context.strokeStyle = "rgba(255,255,255,.15)";
context.stroke();
// 3
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var centerX = 450;
var centerY = 235;
var radius = 20;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
// create radial gradient
var grd = context.createRadialGradient(440, 230, 0.2, 440, 230, 38);
grd.addColorStop(0, "rgb(228,165,18)");
grd.addColorStop(.35, "rgb(238,3,222)");
grd.addColorStop(.55, "rgb(119,0,178)");
grd.addColorStop(1, "rgb(0,29,97)");
context.fillStyle = grd;
context.fill();
context.lineWidth = .5;
context.strokeStyle = "rgba(255,255,255,.15)";
context.stroke();
// 2
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var centerX = 350;
var centerY = 300;
var radius = 75;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
// create radial gradient
var grd = context.createRadialGradient(310, 330, 1, 250, 100, 280);
grd.addColorStop(0, "rgb(0,35,80)");
grd.addColorStop(.4, "rgb(115,0,156)");
grd.addColorStop(.65, "rgb(0,101,233)");
grd.addColorStop(1, "rgb(0,80,60)");
context.fillStyle = grd;
context.fill();
context.lineWidth = 1.5;
context.strokeStyle = "rgba(255,255,255,.15)";
context.stroke();
// 1
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var centerX = 150;
var centerY = 550;
var radius = 300;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
// create radial gradient
var grd = context.createRadialGradient(200, 320, 3, 200, 350, 600);
grd.addColorStop(0, "rgb(255,205,0)");
grd.addColorStop(.4, "rgb(255,0,68)");
grd.addColorStop(.65, "rgb(255,200,0)");
grd.addColorStop(1, "rgb(255,0,0)");
context.fillStyle = grd;
context.fill();
context.lineWidth = 7;
context.strokeStyle = "rgba(255,255,255,.15)";
context.stroke();
// .5
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var centerX = 247;
var centerY = -20;
var radius = 100;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
// create radial gradient
var grd = context.createRadialGradient(200, -10, 3, 200, 50, 600);
grd.addColorStop(0, "rgb(174,0,209)");
grd.addColorStop(.17, "rgb(156,0,83)");
grd.addColorStop(.65, "rgb(255,200,0)");
grd.addColorStop(1, "rgb(255,0,0)");
context.fillStyle = grd;
context.fill();
context.lineWidth = 4;
context.strokeStyle = "rgba(255,255,255,.15)";
context.stroke();
/////////////// STARS
// 1
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var centerX = 247;
var centerY = 100;
var radius = 8;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
// create radial gradient
var grd = context.createRadialGradient(247, 100, 0, 247, 100, 8);
grd.addColorStop(0, "rgb(255,255,255)");
grd.addColorStop(.8, "rgba(0,0,0,0)");
grd.addColorStop(1, "rgba(0,0,0,0)");
context.fillStyle = grd;
context.fill();
// 2
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var centerX = 107;
var centerY = 210;
var radius = 8;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
// create radial gradient
var grd = context.createRadialGradient(107, 210, 0, 107, 210, 8);
grd.addColorStop(0, "rgb(255,255,255)");
grd.addColorStop(1, "rgba(0,0,0,0)");
context.fillStyle = grd;
context.fill();
//3
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var centerX = 45;
var centerY = 166;
var radius = 8;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
// create radial gradient
var grd = context.createRadialGradient(45, 166, 0, 45, 166, 3);
grd.addColorStop(0, "rgb(255,255,255)");
grd.addColorStop(1, "rgba(0,0,0,0)");
context.fillStyle = grd;
context.fill();
//4
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var centerX = 95;
var centerY = 66;
var radius = 8;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
// create radial gradient
var grd = context.createRadialGradient(95, 66, 0, 95, 66, 3);
grd.addColorStop(0, "rgb(255,255,255)");
grd.addColorStop(1, "rgba(0,0,0,0)");
context.fillStyle = grd;
context.fill();
//5
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var centerX = 495;
var centerY = 366;
var radius = 8;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
// create radial gradient
var grd = context.createRadialGradient(495, 366, 0, 495, 366, 3);
grd.addColorStop(0, "rgb(255,255,255)");
grd.addColorStop(1, "rgba(0,0,0,0)");
context.fillStyle = grd;
context.fill();
//6
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var centerX = 505;
var centerY = 376;
var radius = 8;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
// create radial gradient
var grd = context.createRadialGradient(505, 376, 0, 505, 376, 2);
grd.addColorStop(0, "rgb(255,255,255)");
grd.addColorStop(1, "rgba(0,0,0,0)");
context.fillStyle = grd;
context.fill();
//7
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var centerX = 478;
var centerY = 233;
var radius = 8;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
// create radial gradient
var grd = context.createRadialGradient(478, 233, 0, 478, 233, 5);
grd.addColorStop(0, "rgb(255,255,255)");
grd.addColorStop(1, "rgba(0,0,0,0)");
context.fillStyle = grd;
context.fill();
//8
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var centerX = 408;
var centerY = 135;
var radius = 8;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
// create radial gradient
var grd = context.createRadialGradient(408, 135, 0, 408, 135, 5);
grd.addColorStop(0, "rgb(255,255,255)");
grd.addColorStop(1, "rgba(0,0,0,0)");
context.fillStyle = grd;
context.fill();
//9
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var centerX = 608;
var centerY = 100;
var radius = 8;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
// create radial gradient
var grd = context.createRadialGradient(608, 100, 0, 608, 100, 2);
grd.addColorStop(0, "rgb(255,255,255)");
grd.addColorStop(1, "rgba(0,0,0,0)");
context.fillStyle = grd;
context.fill();
//10
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var centerX = 708;
var centerY = 70;
var radius = 8;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
// create radial gradient
var grd = context.createRadialGradient(708, 70, 0, 708, 70, 3);
grd.addColorStop(0, "rgb(255,255,255)");
grd.addColorStop(1, "rgba(0,0,0,0)");
context.fillStyle = grd;
context.fill();
//11
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var centerX = 668;
var centerY = 40;
var radius = 8;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
// create radial gradient
var grd = context.createRadialGradient(668, 40, 0, 668, 40, 4);
grd.addColorStop(0, "rgb(255,255,255)");
grd.addColorStop(1, "rgba(0,0,0,0)");
context.fillStyle = grd;
context.fill();
//12
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var centerX = 648;
var centerY = 440;
var radius = 8;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
// create radial gradient
var grd = context.createRadialGradient(648, 440, 0, 648, 440, 4);
grd.addColorStop(0, "rgb(255,255,255)");
grd.addColorStop(1, "rgba(255,255,255,0)");
context.fillStyle = grd;
context.fill();
//13
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var centerX = 363;
var centerY = 540;
var radius = 8;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
// create radial gradient
var grd = context.createRadialGradient(363, 540, 0, 363, 540, 6);
grd.addColorStop(0, "rgb(255,255,255)");
grd.addColorStop(1, "rgba(255,255,255,0)");
context.fillStyle = grd;
context.fill();
///////////////// SKYLINE
///////// BRIDGE
context.beginPath();
context.moveTo(540, 510);
context.lineTo(540, 600);
context.lineWidth = 5;
context.strokeStyle = "rgb(0,0,0)";
context.stroke();
context.beginPath();
context.moveTo(540, 510);
context.lineTo(540, 600);
context.lineWidth = 5;
var grd = context.createLinearGradient(540, 510, 540, 600);
grd.addColorStop(0, "rgba(255,255,255,0.2)");
grd.addColorStop(1, "rgba(255,255,255,0)");
context.strokeStyle = grd;
context.stroke();
//
context.beginPath();
context.moveTo(520, 518);
context.lineTo(520, 600);
context.lineWidth = 5;
context.strokeStyle = "rgb(0,0,0)";
context.stroke();
context.beginPath();
context.moveTo(520, 518);
context.lineTo(520, 600);
context.lineWidth = 5;
var grd = context.createLinearGradient(520, 518, 520, 600);
grd.addColorStop(0, "rgba(255,255,255,0.2)");
grd.addColorStop(1, "rgba(255,255,255,0)");
context.strokeStyle = grd;
context.stroke();
//
context.beginPath();
context.moveTo(500, 523);
context.lineTo(500, 600);
context.lineWidth = 5;
context.strokeStyle = "rgb(0,0,0)";
context.stroke();
context.beginPath();
context.moveTo(500, 523);
context.lineTo(500, 600);
context.lineWidth = 5;
var grd = context.createLinearGradient(500, 523, 500, 600);
grd.addColorStop(0, "rgba(255,255,255,0.2)");
grd.addColorStop(1, "rgba(255,255,255,0)");
context.strokeStyle = grd;
context.stroke();
//
context.beginPath();
context.moveTo(600, 512);
context.lineTo(600, 600);
context.lineWidth = 5;
context.strokeStyle = "rgb(0,0,0)";
context.stroke();
context.beginPath();
context.moveTo(600, 512);
context.lineTo(600, 600);
context.lineWidth = 5;
var grd = context.createLinearGradient(600, 512, 600, 600);
grd.addColorStop(0, "rgba(255,255,255,0.2)");
grd.addColorStop(1, "rgba(255,255,255,0)");
context.strokeStyle = grd;
context.stroke();
//
context.beginPath();
context.moveTo(620, 522);
context.lineTo(620, 600);
context.lineWidth = 5;
context.strokeStyle = "rgb(0,0,0)";
context.stroke();
context.beginPath();
context.moveTo(620, 522);
context.lineTo(620, 600);
context.lineWidth = 5;
var grd = context.createLinearGradient(620, 522, 620, 600);
grd.addColorStop(0, "rgba(255,255,255,0.2)");
grd.addColorStop(1, "rgba(255,255,255,0)");
context.strokeStyle = grd;
context.stroke();
//
context.beginPath();
context.moveTo(640, 531);
context.lineTo(640, 600);
context.lineWidth = 5;
context.strokeStyle = "rgb(0,0,0)";
context.stroke();
context.beginPath();
context.moveTo(640, 531);
context.lineTo(640, 600);
context.lineWidth = 5;
var grd = context.createLinearGradient(640, 531, 640, 600);
grd.addColorStop(0, "rgba(255,255,255,0.2)");
grd.addColorStop(1, "rgba(255,255,255,0)");
context.strokeStyle = grd;
context.stroke();
//
context.beginPath();
context.moveTo(0, 560);
context.lineTo(800, 560);
context.lineWidth = 7;
context.strokeStyle = "rgb(0,0,0)";
context.stroke();
context.beginPath();
context.moveTo(0, 575);
context.lineTo(800, 575);
context.lineWidth = 10;
context.strokeStyle = "rgb(0,0,0)";
context.stroke();
///////// BUILDING
context.beginPath();
context.moveTo(0, 385);
context.lineTo(0, 800);
context.lineWidth = 100;
context.strokeStyle = "rgb(0,0,0)";
context.stroke();
context.beginPath();
context.moveTo(10, 390);
context.lineTo(10, 600);
context.lineWidth = 7;
var grd = context.createLinearGradient(10, 390, 10, 600);
grd.addColorStop(0, "rgba(255,255,255,0.5)");
grd.addColorStop(0.15, "rgba(0,0,0,0)");
grd.addColorStop(0.16, "rgba(255,255,255,0.5)");
grd.addColorStop(0.3, "rgba(0,0,0,0)");
grd.addColorStop(0.31, "rgba(255,255,255,0.5)");
grd.addColorStop(0.75, "rgba(0,0,0,0)");
grd.addColorStop(1, "rgba(0,0,0,0)");
context.strokeStyle = grd;
context.stroke();
//
context.beginPath();
context.moveTo(70, 480);
context.lineTo(70, 800);
context.lineWidth = 50;
context.strokeStyle = "rgb(0,0,0)";
context.stroke();
context.beginPath();
context.moveTo(45, 485);
context.lineTo(45, 600);
context.lineWidth = 7;
var grd = context.createLinearGradient(45, 485, 45, 600);
grd.addColorStop(0, "rgba(255,255,255,0.5)");
grd.addColorStop(0.15, "rgba(0,0,0,0)");
grd.addColorStop(0.16, "rgba(255,255,255,0.5)");
grd.addColorStop(0.75, "rgba(0,0,0,0)");
grd.addColorStop(1, "rgba(0,0,0,0)");
context.strokeStyle = grd;
context.stroke();
context.moveTo(62, 485);
context.lineTo(62, 600);
context.lineWidth = 7;
var grd = context.createLinearGradient(62, 485, 62, 600);
grd.addColorStop(0, "rgba(255,255,255,0.5)");
grd.addColorStop(0.15, "rgba(0,0,0,0)");
grd.addColorStop(0.16, "rgba(255,255,255,0.5)");
grd.addColorStop(0.45, "rgba(0,0,0,0)");
grd.addColorStop(1, "rgba(0,0,0,0)");
context.strokeStyle = grd;
context.stroke();
//
context.beginPath();
context.moveTo(125, 450);
context.lineTo(125, 800);
context.lineWidth = 50;
context.strokeStyle = "rgb(0,0,0)";
context.stroke();
context.beginPath();
context.moveTo(107, 455);
context.lineTo(107, 600);
context.lineWidth = 7;
var grd = context.createLinearGradient(107, 455, 107, 600);
grd.addColorStop(0, "rgba(255,255,255,0.5)");
grd.addColorStop(0.15, "rgba(0,0,0,0)");
grd.addColorStop(0.16, "rgba(255,255,255,0.5)");
grd.addColorStop(0.3, "rgba(0,0,0,0)");
grd.addColorStop(0.31, "rgba(255,255,255,0.5)");
grd.addColorStop(0.45, "rgba(0,0,0,0)");
grd.addColorStop(0.46, "rgba(255,255,255,0.5)");
grd.addColorStop(1, "rgba(0,0,0,0)");
context.strokeStyle = grd;
context.stroke();
//
context.beginPath();
context.moveTo(150, 800);
context.lineTo(150, 380);
context.lineTo(155, 372);
context.lineTo(160, 380);
context.lineTo(160, 800);
context.lineJoin = 'miter';
context.fillStyle = "rgb(0,0,0)";
context.fill();
context.lineWidth = 50;
context.strokeStyle = "black";
context.stroke();
context.beginPath();
context.moveTo(133, 378);
context.lineTo(133, 600);
context.lineWidth = 7;
var grd = context.createLinearGradient(133, 378, 133, 600);
grd.addColorStop(0, "rgb(255,255,255)");
grd.addColorStop(0.8, "rgba(0,0,0,0)");
grd.addColorStop(1, "rgba(0,0,0,0)");
context.strokeStyle = grd;
context.stroke();
context.beginPath();
context.moveTo(144, 378);
context.lineTo(144, 600);
context.lineWidth = 7;
var grd = context.createLinearGradient(144, 378, 144, 600);
grd.addColorStop(0, "rgba(255,255,255,0.5)");
grd.addColorStop(0.5, "rgba(0,0,0,0)");
grd.addColorStop(1, "rgba(0,0,0,0)");
context.strokeStyle = grd;
context.stroke();
//
context.beginPath();
context.moveTo(200, 420);
context.lineTo(200, 800);
context.lineWidth = 50;
context.strokeStyle = "rgb(0,0,0)";
context.stroke();
context.beginPath();
context.moveTo(193, 425);
context.lineTo(193, 800);
context.lineWidth = 7;
var grd = context.createLinearGradient(193, 425, 193, 600);
grd.addColorStop(0, "rgb(255,255,255)");
grd.addColorStop(0.15, "rgba(0,0,0,0)");
grd.addColorStop(0.16, "rgba(255,255,255,0.5)");
grd.addColorStop(0.3, "rgba(0,0,0,0)");
grd.addColorStop(0.36, "rgba(255,255,255,0.5)");
grd.addColorStop(1, "rgba(0,0,0,0)");
context.strokeStyle = grd;
context.stroke();
//
context.beginPath();
context.moveTo(255, 420);
context.lineTo(255, 800);
context.lineWidth = 50;
context.strokeStyle = "rgb(0,0,0)";
context.stroke();
context.beginPath();
context.moveTo(250, 425);
context.lineTo(250, 600);
context.lineWidth = 7;
var grd = context.createLinearGradient(250, 425, 250, 600);
grd.addColorStop(0, "rgba(255,255,255,0.8)");
grd.addColorStop(0.15, "rgba(0,0,0,0)");
grd.addColorStop(0.16, "rgba(255,255,255,0.5)");
grd.addColorStop(0.8, "rgba(0,0,0,0)");
grd.addColorStop(1, "rgba(0,0,0,0)");
context.strokeStyle = grd;
context.stroke();
///////////ARCS
context.beginPath();
context.moveTo(280, 545);
context.quadraticCurveTo(407.5, 575, 570, 495);
context.lineWidth = 5;
context.strokeStyle = 'black';
context.stroke();
///
context.beginPath();
context.moveTo(280, 545);
context.quadraticCurveTo(407.5, 575, 570, 495);
context.lineWidth = 5;
var grd = context.createLinearGradient(280, 0, 570, 0);
grd.addColorStop(0, "rgba(255,255,255,0.8)");
grd.addColorStop(1, "rgba(255,255,255,0)");
context.strokeStyle = grd;
context.stroke();
///
context.beginPath();
context.moveTo(570, 495);
context.quadraticCurveTo(690, 575, 800, 545);
context.lineWidth = 5;
context.strokeStyle = 'black';
context.stroke();
///
context.beginPath();
context.moveTo(570, 495);
context.quadraticCurveTo(690, 575, 800, 545);
context.lineWidth = 5;
var grd = context.createLinearGradient(570, 0, 800, 0);
grd.addColorStop(0, "rgba(255,255,255,0.6)");
grd.addColorStop(1, "rgba(255,255,255,0)");
context.strokeStyle = grd;
context.stroke();
//////////PILLARS
context.beginPath();
context.moveTo(560, 800);
context.lineTo(560, 515);
context.lineTo(570, 495);
context.lineTo(580, 515);
context.lineTo(580, 800);
context.lineJoin = 'bevel';
context.fillStyle = "rgb(0,0,0)";
context.lineWidth = 13;
context.fill();
var grd = context.createLinearGradient(250, 515, 250, 600);
grd.addColorStop(0, "rgb(255,255,255)");
grd.addColorStop(0.6, "rgba(0,0,0,0)");
grd.addColorStop(1, "rgba(0,0,0,0)");
context.strokeStyle = grd;
context.stroke();
//// <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< END HERE
</script>
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<title> Skylined </title>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
//// >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> START HERE
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
context.rect(0, 0, 800, 600);
// add linear gradient
var grd = context.createLinearGradient(0, 600, 0, 0);
// light blue
grd.addColorStop(0, "rgb(0,0,0)");
// dark blue
grd.addColorStop(1, "rgb(10,0,80)");
context.fillStyle = grd;
context.fill();
//////////////////// PLANETS
// 5
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var centerX = 625;
var centerY = 205;
var radius = 3;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
// create radial gradient
var grd = context.createRadialGradient(624, 205, 0, 624, 205, 1);
grd.addColorStop(0, "rgb(243,205,54)");
grd.addColorStop(1, "rgb(199,0,139)");
context.fillStyle = grd;
context.fill();
context.lineWidth = .15;
context.strokeStyle = "rgba(255,255,255,.15)";
context.stroke();
// 4
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var centerX = 535;
var centerY = 210;
var radius = 9;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
// create radial gradient
var grd = context.createRadialGradient(530, 210, 0, 530, 210, 10);
grd.addColorStop(0, "rgb(111,163,253)");
grd.addColorStop(.4, "rgb(19,87,203)");
grd.addColorStop(1, "rgb(0,33,90)");
context.fillStyle = grd;
context.fill();
context.lineWidth = .25;
context.strokeStyle = "rgba(255,255,255,.15)";
context.stroke();
// 3
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var centerX = 450;
var centerY = 235;
var radius = 20;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
// create radial gradient
var grd = context.createRadialGradient(440, 230, 0.2, 440, 230, 38);
grd.addColorStop(0, "rgb(228,165,18)");
grd.addColorStop(.35, "rgb(238,3,222)");
grd.addColorStop(.55, "rgb(119,0,178)");
grd.addColorStop(1, "rgb(0,29,97)");
context.fillStyle = grd;
context.fill();
context.lineWidth = .5;
context.strokeStyle = "rgba(255,255,255,.15)";
context.stroke();
// 2
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var centerX = 350;
var centerY = 300;
var radius = 75;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
// create radial gradient
var grd = context.createRadialGradient(310, 330, 1, 250, 100, 280);
grd.addColorStop(0, "rgb(0,35,80)");
grd.addColorStop(.4, "rgb(115,0,156)");
grd.addColorStop(.65, "rgb(0,101,233)");
grd.addColorStop(1, "rgb(0,80,60)");
context.fillStyle = grd;
context.fill();
context.lineWidth = 1.5;
context.strokeStyle = "rgba(255,255,255,.15)";
context.stroke();
// 1
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var centerX = 150;
var centerY = 550;
var radius = 300;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
// create radial gradient
var grd = context.createRadialGradient(200, 320, 3, 200, 350, 600);
grd.addColorStop(0, "rgb(255,205,0)");
grd.addColorStop(.4, "rgb(255,0,68)");
grd.addColorStop(.65, "rgb(255,200,0)");
grd.addColorStop(1, "rgb(255,0,0)");
context.fillStyle = grd;
context.fill();
context.lineWidth = 7;
context.strokeStyle = "rgba(255,255,255,.15)";
context.stroke();
// .5
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var centerX = 247;
var centerY = -20;
var radius = 100;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
// create radial gradient
var grd = context.createRadialGradient(200, -10, 3, 200, 50, 600);
grd.addColorStop(0, "rgb(174,0,209)");
grd.addColorStop(.17, "rgb(156,0,83)");
grd.addColorStop(.65, "rgb(255,200,0)");
grd.addColorStop(1, "rgb(255,0,0)");
context.fillStyle = grd;
context.fill();
context.lineWidth = 4;
context.strokeStyle = "rgba(255,255,255,.15)";
context.stroke();
/////////////// STARS
// 1
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var centerX = 247;
var centerY = 100;
var radius = 8;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
// create radial gradient
var grd = context.createRadialGradient(247, 100, 0, 247, 100, 8);
grd.addColorStop(0, "rgb(255,255,255)");
grd.addColorStop(.8, "rgba(0,0,0,0)");
grd.addColorStop(1, "rgba(0,0,0,0)");
context.fillStyle = grd;
context.fill();
// 2
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var centerX = 107;
var centerY = 210;
var radius = 8;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
// create radial gradient
var grd = context.createRadialGradient(107, 210, 0, 107, 210, 8);
grd.addColorStop(0, "rgb(255,255,255)");
grd.addColorStop(1, "rgba(0,0,0,0)");
context.fillStyle = grd;
context.fill();
//3
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var centerX = 45;
var centerY = 166;
var radius = 8;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
// create radial gradient
var grd = context.createRadialGradient(45, 166, 0, 45, 166, 3);
grd.addColorStop(0, "rgb(255,255,255)");
grd.addColorStop(1, "rgba(0,0,0,0)");
context.fillStyle = grd;
context.fill();
//4
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var centerX = 95;
var centerY = 66;
var radius = 8;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
// create radial gradient
var grd = context.createRadialGradient(95, 66, 0, 95, 66, 3);
grd.addColorStop(0, "rgb(255,255,255)");
grd.addColorStop(1, "rgba(0,0,0,0)");
context.fillStyle = grd;
context.fill();
//5
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var centerX = 495;
var centerY = 366;
var radius = 8;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
// create radial gradient
var grd = context.createRadialGradient(495, 366, 0, 495, 366, 3);
grd.addColorStop(0, "rgb(255,255,255)");
grd.addColorStop(1, "rgba(0,0,0,0)");
context.fillStyle = grd;
context.fill();
//6
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var centerX = 505;
var centerY = 376;
var radius = 8;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
// create radial gradient
var grd = context.createRadialGradient(505, 376, 0, 505, 376, 2);
grd.addColorStop(0, "rgb(255,255,255)");
grd.addColorStop(1, "rgba(0,0,0,0)");
context.fillStyle = grd;
context.fill();
//7
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var centerX = 478;
var centerY = 233;
var radius = 8;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
// create radial gradient
var grd = context.createRadialGradient(478, 233, 0, 478, 233, 5);
grd.addColorStop(0, "rgb(255,255,255)");
grd.addColorStop(1, "rgba(0,0,0,0)");
context.fillStyle = grd;
context.fill();
//8
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var centerX = 408;
var centerY = 135;
var radius = 8;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
// create radial gradient
var grd = context.createRadialGradient(408, 135, 0, 408, 135, 5);
grd.addColorStop(0, "rgb(255,255,255)");
grd.addColorStop(1, "rgba(0,0,0,0)");
context.fillStyle = grd;
context.fill();
//9
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var centerX = 608;
var centerY = 100;
var radius = 8;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
// create radial gradient
var grd = context.createRadialGradient(608, 100, 0, 608, 100, 2);
grd.addColorStop(0, "rgb(255,255,255)");
grd.addColorStop(1, "rgba(0,0,0,0)");
context.fillStyle = grd;
context.fill();
//10
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var centerX = 708;
var centerY = 70;
var radius = 8;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
// create radial gradient
var grd = context.createRadialGradient(708, 70, 0, 708, 70, 3);
grd.addColorStop(0, "rgb(255,255,255)");
grd.addColorStop(1, "rgba(0,0,0,0)");
context.fillStyle = grd;
context.fill();
//11
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var centerX = 668;
var centerY = 40;
var radius = 8;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
// create radial gradient
var grd = context.createRadialGradient(668, 40, 0, 668, 40, 4);
grd.addColorStop(0, "rgb(255,255,255)");
grd.addColorStop(1, "rgba(0,0,0,0)");
context.fillStyle = grd;
context.fill();
//12
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var centerX = 648;
var centerY = 440;
var radius = 8;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
// create radial gradient
var grd = context.createRadialGradient(648, 440, 0, 648, 440, 4);
grd.addColorStop(0, "rgb(255,255,255)");
grd.addColorStop(1, "rgba(255,255,255,0)");
context.fillStyle = grd;
context.fill();
//13
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var centerX = 363;
var centerY = 540;
var radius = 8;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
// create radial gradient
var grd = context.createRadialGradient(363, 540, 0, 363, 540, 6);
grd.addColorStop(0, "rgb(255,255,255)");
grd.addColorStop(1, "rgba(255,255,255,0)");
context.fillStyle = grd;
context.fill();
///////////////// SKYLINE
///////// BRIDGE
context.beginPath();
context.moveTo(540, 510);
context.lineTo(540, 600);
context.lineWidth = 5;
context.strokeStyle = "rgb(0,0,0)";
context.stroke();
context.beginPath();
context.moveTo(540, 510);
context.lineTo(540, 600);
context.lineWidth = 5;
var grd = context.createLinearGradient(540, 510, 540, 600);
grd.addColorStop(0, "rgba(255,255,255,0.2)");
grd.addColorStop(1, "rgba(255,255,255,0)");
context.strokeStyle = grd;
context.stroke();
//
context.beginPath();
context.moveTo(520, 518);
context.lineTo(520, 600);
context.lineWidth = 5;
context.strokeStyle = "rgb(0,0,0)";
context.stroke();
context.beginPath();
context.moveTo(520, 518);
context.lineTo(520, 600);
context.lineWidth = 5;
var grd = context.createLinearGradient(520, 518, 520, 600);
grd.addColorStop(0, "rgba(255,255,255,0.2)");
grd.addColorStop(1, "rgba(255,255,255,0)");
context.strokeStyle = grd;
context.stroke();
//
context.beginPath();
context.moveTo(500, 523);
context.lineTo(500, 600);
context.lineWidth = 5;
context.strokeStyle = "rgb(0,0,0)";
context.stroke();
context.beginPath();
context.moveTo(500, 523);
context.lineTo(500, 600);
context.lineWidth = 5;
var grd = context.createLinearGradient(500, 523, 500, 600);
grd.addColorStop(0, "rgba(255,255,255,0.2)");
grd.addColorStop(1, "rgba(255,255,255,0)");
context.strokeStyle = grd;
context.stroke();
//
context.beginPath();
context.moveTo(600, 512);
context.lineTo(600, 600);
context.lineWidth = 5;
context.strokeStyle = "rgb(0,0,0)";
context.stroke();
context.beginPath();
context.moveTo(600, 512);
context.lineTo(600, 600);
context.lineWidth = 5;
var grd = context.createLinearGradient(600, 512, 600, 600);
grd.addColorStop(0, "rgba(255,255,255,0.2)");
grd.addColorStop(1, "rgba(255,255,255,0)");
context.strokeStyle = grd;
context.stroke();
//
context.beginPath();
context.moveTo(620, 522);
context.lineTo(620, 600);
context.lineWidth = 5;
context.strokeStyle = "rgb(0,0,0)";
context.stroke();
context.beginPath();
context.moveTo(620, 522);
context.lineTo(620, 600);
context.lineWidth = 5;
var grd = context.createLinearGradient(620, 522, 620, 600);
grd.addColorStop(0, "rgba(255,255,255,0.2)");
grd.addColorStop(1, "rgba(255,255,255,0)");
context.strokeStyle = grd;
context.stroke();
//
context.beginPath();
context.moveTo(640, 531);
context.lineTo(640, 600);
context.lineWidth = 5;
context.strokeStyle = "rgb(0,0,0)";
context.stroke();
context.beginPath();
context.moveTo(640, 531);
context.lineTo(640, 600);
context.lineWidth = 5;
var grd = context.createLinearGradient(640, 531, 640, 600);
grd.addColorStop(0, "rgba(255,255,255,0.2)");
grd.addColorStop(1, "rgba(255,255,255,0)");
context.strokeStyle = grd;
context.stroke();
//
context.beginPath();
context.moveTo(0, 560);
context.lineTo(800, 560);
context.lineWidth = 7;
context.strokeStyle = "rgb(0,0,0)";
context.stroke();
context.beginPath();
context.moveTo(0, 575);
context.lineTo(800, 575);
context.lineWidth = 10;
context.strokeStyle = "rgb(0,0,0)";
context.stroke();
///////// BUILDING
context.beginPath();
context.moveTo(0, 385);
context.lineTo(0, 800);
context.lineWidth = 100;
context.strokeStyle = "rgb(0,0,0)";
context.stroke();
context.beginPath();
context.moveTo(10, 390);
context.lineTo(10, 600);
context.lineWidth = 7;
var grd = context.createLinearGradient(10, 390, 10, 600);
grd.addColorStop(0, "rgba(255,255,255,0.5)");
grd.addColorStop(0.15, "rgba(0,0,0,0)");
grd.addColorStop(0.16, "rgba(255,255,255,0.5)");
grd.addColorStop(0.3, "rgba(0,0,0,0)");
grd.addColorStop(0.31, "rgba(255,255,255,0.5)");
grd.addColorStop(0.75, "rgba(0,0,0,0)");
grd.addColorStop(1, "rgba(0,0,0,0)");
context.strokeStyle = grd;
context.stroke();
//
context.beginPath();
context.moveTo(70, 480);
context.lineTo(70, 800);
context.lineWidth = 50;
context.strokeStyle = "rgb(0,0,0)";
context.stroke();
context.beginPath();
context.moveTo(45, 485);
context.lineTo(45, 600);
context.lineWidth = 7;
var grd = context.createLinearGradient(45, 485, 45, 600);
grd.addColorStop(0, "rgba(255,255,255,0.5)");
grd.addColorStop(0.15, "rgba(0,0,0,0)");
grd.addColorStop(0.16, "rgba(255,255,255,0.5)");
grd.addColorStop(0.75, "rgba(0,0,0,0)");
grd.addColorStop(1, "rgba(0,0,0,0)");
context.strokeStyle = grd;
context.stroke();
context.moveTo(62, 485);
context.lineTo(62, 600);
context.lineWidth = 7;
var grd = context.createLinearGradient(62, 485, 62, 600);
grd.addColorStop(0, "rgba(255,255,255,0.5)");
grd.addColorStop(0.15, "rgba(0,0,0,0)");
grd.addColorStop(0.16, "rgba(255,255,255,0.5)");
grd.addColorStop(0.45, "rgba(0,0,0,0)");
grd.addColorStop(1, "rgba(0,0,0,0)");
context.strokeStyle = grd;
context.stroke();
//
context.beginPath();
context.moveTo(125, 450);
context.lineTo(125, 800);
context.lineWidth = 50;
context.strokeStyle = "rgb(0,0,0)";
context.stroke();
context.beginPath();
context.moveTo(107, 455);
context.lineTo(107, 600);
context.lineWidth = 7;
var grd = context.createLinearGradient(107, 455, 107, 600);
grd.addColorStop(0, "rgba(255,255,255,0.5)");
grd.addColorStop(0.15, "rgba(0,0,0,0)");
grd.addColorStop(0.16, "rgba(255,255,255,0.5)");
grd.addColorStop(0.3, "rgba(0,0,0,0)");
grd.addColorStop(0.31, "rgba(255,255,255,0.5)");
grd.addColorStop(0.45, "rgba(0,0,0,0)");
grd.addColorStop(0.46, "rgba(255,255,255,0.5)");
grd.addColorStop(1, "rgba(0,0,0,0)");
context.strokeStyle = grd;
context.stroke();
//
context.beginPath();
context.moveTo(150, 800);
context.lineTo(150, 380);
context.lineTo(155, 372);
context.lineTo(160, 380);
context.lineTo(160, 800);
context.lineJoin = 'miter';
context.fillStyle = "rgb(0,0,0)";
context.fill();
context.lineWidth = 50;
context.strokeStyle = "black";
context.stroke();
context.beginPath();
context.moveTo(133, 378);
context.lineTo(133, 600);
context.lineWidth = 7;
var grd = context.createLinearGradient(133, 378, 133, 600);
grd.addColorStop(0, "rgb(255,255,255)");
grd.addColorStop(0.8, "rgba(0,0,0,0)");
grd.addColorStop(1, "rgba(0,0,0,0)");
context.strokeStyle = grd;
context.stroke();
context.beginPath();
context.moveTo(144, 378);
context.lineTo(144, 600);
context.lineWidth = 7;
var grd = context.createLinearGradient(144, 378, 144, 600);
grd.addColorStop(0, "rgba(255,255,255,0.5)");
grd.addColorStop(0.5, "rgba(0,0,0,0)");
grd.addColorStop(1, "rgba(0,0,0,0)");
context.strokeStyle = grd;
context.stroke();
//
context.beginPath();
context.moveTo(200, 420);
context.lineTo(200, 800);
context.lineWidth = 50;
context.strokeStyle = "rgb(0,0,0)";
context.stroke();
context.beginPath();
context.moveTo(193, 425);
context.lineTo(193, 800);
context.lineWidth = 7;
var grd = context.createLinearGradient(193, 425, 193, 600);
grd.addColorStop(0, "rgb(255,255,255)");
grd.addColorStop(0.15, "rgba(0,0,0,0)");
grd.addColorStop(0.16, "rgba(255,255,255,0.5)");
grd.addColorStop(0.3, "rgba(0,0,0,0)");
grd.addColorStop(0.36, "rgba(255,255,255,0.5)");
grd.addColorStop(1, "rgba(0,0,0,0)");
context.strokeStyle = grd;
context.stroke();
//
context.beginPath();
context.moveTo(255, 420);
context.lineTo(255, 800);
context.lineWidth = 50;
context.strokeStyle = "rgb(0,0,0)";
context.stroke();
context.beginPath();
context.moveTo(250, 425);
context.lineTo(250, 600);
context.lineWidth = 7;
var grd = context.createLinearGradient(250, 425, 250, 600);
grd.addColorStop(0, "rgba(255,255,255,0.8)");
grd.addColorStop(0.15, "rgba(0,0,0,0)");
grd.addColorStop(0.16, "rgba(255,255,255,0.5)");
grd.addColorStop(0.8, "rgba(0,0,0,0)");
grd.addColorStop(1, "rgba(0,0,0,0)");
context.strokeStyle = grd;
context.stroke();
///////////ARCS
context.beginPath();
context.moveTo(280, 545);
context.quadraticCurveTo(407.5, 575, 570, 495);
context.lineWidth = 5;
context.strokeStyle = 'black';
context.stroke();
///
context.beginPath();
context.moveTo(280, 545);
context.quadraticCurveTo(407.5, 575, 570, 495);
context.lineWidth = 5;
var grd = context.createLinearGradient(280, 0, 570, 0);
grd.addColorStop(0, "rgba(255,255,255,0.8)");
grd.addColorStop(1, "rgba(255,255,255,0)");
context.strokeStyle = grd;
context.stroke();
///
context.beginPath();
context.moveTo(570, 495);
context.quadraticCurveTo(690, 575, 800, 545);
context.lineWidth = 5;
context.strokeStyle = 'black';
context.stroke();
///
context.beginPath();
context.moveTo(570, 495);
context.quadraticCurveTo(690, 575, 800, 545);
context.lineWidth = 5;
var grd = context.createLinearGradient(570, 0, 800, 0);
grd.addColorStop(0, "rgba(255,255,255,0.6)");
grd.addColorStop(1, "rgba(255,255,255,0)");
context.strokeStyle = grd;
context.stroke();
//////////PILLARS
context.beginPath();
context.moveTo(560, 800);
context.lineTo(560, 515);
context.lineTo(570, 495);
context.lineTo(580, 515);
context.lineTo(580, 800);
context.lineJoin = 'bevel';
context.fillStyle = "rgb(0,0,0)";
context.lineWidth = 13;
context.fill();
var grd = context.createLinearGradient(250, 515, 250, 600);
grd.addColorStop(0, "rgb(255,255,255)");
grd.addColorStop(0.6, "rgba(0,0,0,0)");
grd.addColorStop(1, "rgba(0,0,0,0)");
context.strokeStyle = grd;
context.stroke();
//// <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< END HERE
</script>
</body>
</html>
No comments:
Post a Comment