CANVAS PROJECT

//background grd  

context.rect(0, 0, canvas.width, canvas.height);

      // add linear gradient
var grd = context.createLinearGradient(200, 50, canvas.width, canvas.height);
      // black
      grd.addColorStop(0, 'black');   
      grd.addColorStop(1, 'black');
      context.fillStyle = grd;
      context.fill();


      

//string 1
 context.beginPath();
      context.moveTo(200, 530);
      context.quadraticCurveTo(100, 100, 350, 100);
      context.lineWidth = 15;

      // line color
      context.strokeStyle = '#754C00';
      context.stroke();

//string 2
   context.strokeStyle = 'rgba(255,228,196,1)';
      context.stroke();
     var centerX = canvas.width / 3.3;
      var centerY = canvas.height / 1.32;
      var radius = 13.5;

      context.beginPath();
      context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
      context.fillStyle = 'rgba(255,228,196,1)';
      context.fill();
      context.lineWidth = 5;
      context.strokeStyle = 'rgba(255,228,196,1)';
      context.stroke();
      


//string 3
  context.beginPath();
      context.moveTo(350, 200);
      context.quadraticCurveTo(360, 355, 375, 525);
      context.lineWidth = 15;

      // line color
      context.strokeStyle = 'rgba(255,228,196,1)';
      context.stroke();

//string 3 bead
 context.strokeStyle = 'rgba(255,228,196,1)';
      context.stroke();
     var centerX = canvas.width / 1.65;
      var centerY = canvas.height / 1.35;
      var radius = 13.5;

      context.beginPath();
      context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
      context.fillStyle = 'rgba(255,228,196,1)';
      context.fill();
      context.lineWidth = 10;
      context.strokeStyle = 'rgba(255,228,196,1)';
      context.stroke();
    



//string 4 
 context.beginPath();
      context.moveTo(250, 100);
      context.bezierCurveTo(210, 600, 355, 560, 300, 450);
      context.lineWidth = 11;

      // line color
      context.strokeStyle = 'rgba(255,228,196,1)';
      context.lineCap = 'round'
      context.stroke();
      
//string 5
 context.beginPath();
      context.moveTo(230, 300);
      context.bezierCurveTo(210, 600, 355, 400, 250, 100);
      context.lineWidth = 11;

      // line color
      context.strokeStyle = 'rgba(255,228,196,1)';
      context.lineCap = 'round'
      context.stroke();
   
/// string 6
    context.beginPath();
      context.moveTo(350, 100);
      context.bezierCurveTo(210, 600, 355, 560, 300, 450);
      context.lineWidth = 11;

      // line color
      context.strokeStyle = 'rgba(255,228,196,1)';
      context.lineCap = 'round'
      context.stroke();
   
/// string 7 
    context.beginPath();
      context.moveTo(200, 100);
      context.bezierCurveTo(180, 600, 300, 560, 230, 450);
      context.lineWidth = 11;

      // line color
      context.strokeStyle = 'rgba(255,228,196,1)';
      context.lineCap = 'round'
      context.stroke();
   
   /// string 8  
    context.beginPath();
      context.moveTo(350, 100);
      context.bezierCurveTo(210, 600, 355, 560, 300, 450);
      context.lineWidth = 11;

      // line color
      context.strokeStyle = 'rgba(255,228,196,1)';
      context.lineCap = 'round'
      context.stroke();
   
// frame

   var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');
      var centerX = canvas.width / 2.15;
      var centerY = canvas.height / 4;
      var radius = 120;

      context.beginPath();
      context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
      context.fillStyle = 'rgba(255,228,196,1)';
      context.fill();
      context.lineWidth = 10;
      context.strokeStyle = 'rgba(255,204,255,1)';
      context.stroke();

/// center
 var rdg = context.createRadialGradient(400,300,20,400,300,300);
 rdg.addColorStop(0, "black");
 rdg.addColorStop(0.3, "cyan");
 rdg.addColorStop(1, "white");
 
context.beginPath();
context.arc(280, 150, 60, 0*Math.PI, 2*Math.PI, false);
context.fillStyle = rdg;
context.fill();
context.stroke();
context.closePath();



// TRIANGLE 1
 context.beginPath();

context.moveTo(280,140); // START POINT
 context.lineTo(250,35);
 context.lineTo(310,35);
context.lineTo(280,140); // end point
 
 context.lineWidth = 10;
 context.lineCap = 'round';
 context.lineJoin = 'round';
 
context.strokeStyle = 'rgba(255,204,229,1)';
context.stroke();
 
context.closePath();

// TRIANGLE 2
 context.beginPath();
context.moveTo(280,160);
context.lineTo(310,260);
context.lineTo(250,260);
context.lineTo(280,160);


context.strokeStyle = 'rgba(255,204,229,1)';
context.stroke();

context.closePath();

// crossover
context.beginPath(); 
context.moveTo(180,100); //STARTING POINT
context.lineTo(280,150);
context.lineTo(380,100);
context.lineTo(380,200);
context.lineTo(280,150);
context.lineTo(180,200); 
context.lineTo(180,100);
//ENDING POINT

context.lineWidth = 10; 
context.lineCap = 'round';
context.lineJoin = 'round';

//RGBA = RED GREEN BLUE ALPHA
//THE VALUES FOR RGB go from 0 to 255
//the value for A goes from 0 to 1

context.strokeStyle = 'rgba(255,204,229,1)';
context.stroke();

context.stroke(); 

context.shadowColor = "rgba(0,255,0,0.5)";
context.shadowBlur = 90;

context.closePath(); 

////// smaller rectangle


context.beginPath(); 

context.rect(190,80,180,150);
context.strokeStyle = 'rgba(135,206,235,.7)';
context.lineWidth = 5; // 5 pixels
context.stroke();
context.closePath();