Project 1

var x = 0;
var y = 0;
var width = 800;
var height = 600;
var startX = 400
var startY = 0
var endX = 400
var endY = 600

//rectangle
context.beginPath();
context.rect(x, y, width, height);
//context.fillStyle = 'rgb(102,255,204)';
//context.fill();
context.lineWidth = 5;
context.strokeStyle = 'blue'
// add linear gradient           
    var grd = context.createLinearGradient(startX, startY, endX, endY);
    // light blue
    grd.addColorStop(0, "#8ED6FF");
    // dark blue
    grd.addColorStop(1, "#004CB3");
    context.fillStyle = grd;
    context.fill();
context.stroke();


var radius = 60

//circle
    context.beginPath();
    context.arc(600, 100, radius, 0 , 2 * Math.PI, false);
    context.lineWidth = 1
     // create radial gradient
        var grd = context.createRadialGradient(600, 100, 20, 600, 100, 100);
        // light yellow
        grd.addColorStop(0, 'rgb(255,255,153)');
        // dark yellow
        grd.addColorStop(1, 'rgb(204,153,0)');
      
        context.fillStyle = grd;
        context.fill();
    //context.strokeStyle = 'yellow'
    //context.fillStyle = 'yellow'
    //context.fill();


//1st Triangle
context.beginPath();
context.moveTo(180, 145);
context.lineTo(0, 500);
context.lineTo(0, 600);
context.lineTo(360,600);
context.lineTo(360, 500);
context.lineTo(180, 145);
context.lineWidth = 3
context.strokeStyle = 'black'
context.fillStyle = 'rgb(153,153,153)';
context.fill();
context.stroke();
//peak
context.beginPath();
context.moveTo(180,145);
context.lineTo(116,275);
context.lineTo(150,235);
context.lineTo(170,275);
context.lineTo(190,235);
context.lineTo(210,275);
context.lineTo(227,235);
context.lineTo(180,145);
context.fillStyle = 'white'
context.fill();


//2nd Triangle
context.beginPath();
context.moveTo(400, 50);
context.lineTo(200, 500);
context.lineTo(600, 500);
context.lineTo(400, 50);
context.lineWidth = 3
context.strokeStyle = 'black'
context.fillStyle = 'rgb(153,153,153)';
context.fill();
context.stroke();

//Peak
context.beginPath();
context.moveTo(330,200);
context.lineTo(350,260);
context.lineTo(380,200);
context.lineTo(410,260);
context.lineTo(440,200);
context.lineTo(470,260);
context.lineTo(480,230);
context.lineTo(400,50);
context.lineTo(330,200);
context.fillStyle = 'white'
context.fill();



//3rd Triangle
context.beginPath();
context.moveTo(670,140);
context.lineTo(515,500);
context.lineTo(515,600);
context.lineTo(800,600);
context.lineTo(800,440);
context.lineTo(670,140);
context.fillStyle = 'rgb(153,153,153)';
context.fill();
context.stroke();
//peak
context.beginPath();
context.moveTo(670,140);
context.lineTo(618,260);
context.lineTo(635,310);
context.lineTo(655,260);
context.lineTo(680,310);
context.lineTo(700,260);
context.lineTo(720,310);
context.lineTo(730,280);
context.lineTo(670,140);
context.fillStyle = 'white'
context.fill();



//4th Triangle
context.beginPath();
context.moveTo(150,220);
context.lineTo(0,600);
context.lineTo(300,600);
context.lineTo(150,220);
context.fillStyle = 'rgb(102,102,102)';
context.fill();
context.stroke();
//peak
context.beginPath();
context.moveTo(150,220);
context.lineTo(102, 340);
context.lineTo(130, 310);
context.lineTo(145, 340);
context.lineTo(160, 310);
context.lineTo(180, 340);
context.lineTo(190, 320);
context.lineTo(150, 220);
context.fillStyle = 'white'
context.fill();



//5th Triangle
context.beginPath();
context.moveTo(580,250);
context.lineTo(430,600);
context.lineTo(750,600);
context.lineTo(580,250);
context.fillStyle = 'rgb(102,102,102)';
context.fill();
context.stroke();
//peak
context.beginPath();
context.moveTo(580,250);
context.lineTo(529,370);
context.lineTo(560,340);
context.lineTo(575,370);
context.lineTo(590,340);
context.lineTo(610,370);
context.lineTo(623,336);
context.lineTo(580,250);
context.fillStyle = 'white'
context.fill();



//6th Triangle
context.beginPath();
context.moveTo(360, 265);
context.lineTo(180, 600);
context.lineTo(540, 600);
context.lineTo(360, 265);
context.fillStyle = 'rgb(80,80,80)';
context.fill();
context.stroke();
//peak
context.beginPath();
context.moveTo(360,265);
context.lineTo(314,350);
context.lineTo(330,385);
context.lineTo(345,350);
context.lineTo(365,385);
context.lineTo(380,350);
context.lineTo(400,385);
context.lineTo(410,360);
context.lineTo(360,265);
context.fillStyle = 'white'
context.fill();


//cloud
context.globalAlpha = 0.5
context.beginPath();
context.moveTo(170, 80);
context.bezierCurveTo(130, 100, 130, 150, 230, 150);
context.bezierCurveTo(250, 180, 320, 180, 340, 150);
context.bezierCurveTo(420, 150, 420, 120, 390, 100);
context.bezierCurveTo(430, 40, 370, 30, 340, 50);
context.bezierCurveTo(320, 5, 250, 20, 250, 50);
context.bezierCurveTo(200, 5, 150, 20, 170, 80);
 // complete custom shape
context.closePath();
context.fillStyle = 'white'
context.fill();