Canvas Final: Volleyball

//// >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> YOUR CODE STARTS HERE

//
var rdg2 = context.createLinearGradient(0,0,800,800);
rdg2.addColorStop(0, 'rgba(255, 30, 30, 0.75)');
rdg2.addColorStop(0.5, 'rgba(0, 0, 0, 0.90)');
// left pole
context.beginPath();
context.rect (0,0,800,600);
context.fillStyle = rdg2
context.fill();
context.stroke();
context.closePath();

 //VOLLEYBALL grad
var rdg = context.createRadialGradient(400,300,150,400,300,200);
rdg.addColorStop(0, 'rgb(253, 251, 252)');
rdg.addColorStop(0.5, 'rgba(249, 249, 249, 0.94)');
rdg.addColorStop(1, 'rgba(193, 193, 193, 0.99)');
//volleyball
  context.beginPath();
 context.arc(500, 450, 100, 0*Math.PI, 2*Math.PI,false)
 context.lineWidth=2;
  context.strokeStyle = 'rgba(0, 0, 0, 1)'
 context.fillStyle= rdg
 context.fill();
 context.stroke();
context.closePath();
// TOP left middle LINE
context.beginPath();
 context.moveTo(401,430);
 context.quadraticCurveTo(450,370,503,400);
 context.stroke();
 context.closePath();
 // TOP  left bottom LINE
context.beginPath();
 context.moveTo(401,470);
 context.quadraticCurveTo(440,410,500,440);
 context.stroke();
 context.closePath();
// TOP top LEFT LINE
context.beginPath();
 context.moveTo(413,400);
 context.quadraticCurveTo(450,350,505,365);
 context.stroke();
 context.closePath();

 // bottom top LINE
context.beginPath();
 context.moveTo(413,500);
 context.quadraticCurveTo(480,400,599,460);
 context.stroke();
 context.closePath();

  // bottom bottom LINE
context.beginPath();
 context.moveTo(470,545);
 context.quadraticCurveTo(515,500,565,525);
 context.stroke();
 context.closePath();

  // bottom middle LINE
context.beginPath();
 context.moveTo(438,530);
 context.quadraticCurveTo(500,450,590,492);
 context.stroke();
 context.closePath();

 // right center (most left) LINE
context.beginPath();
 context.moveTo(510,350);
 context.quadraticCurveTo(490,430,520,438);
 context.stroke();
 context.closePath();

 // right side middle LINE
context.beginPath();
 context.moveTo(545,360);
 context.quadraticCurveTo(525,430,569,448);
 context.stroke();
 context.closePath();

  //
context.beginPath();
 context.moveTo(580,390);
 context.quadraticCurveTo(575,430,600,450);
 context.stroke();
 context.closePath();

// left pole
context.beginPath();
context.rect (50,100,25,600);
context.fillStyle = 'rgb(46, 49, 50)'
context.fill();
context.stroke();
context.closePath();
  
// right pole
context.beginPath();
context.rect (750,100,25,600);
context.fillStyle = 'rgb(46, 49, 50)'
context.fill();
context.stroke();
context.closePath();

//net grad
var grd = context.createLinearGradient(350,120,350,250);
grd.addColorStop(0, 'rgb(253, 251, 252)');
grd.addColorStop(0.5, 'rgba(249, 249, 249, 0.99)');
grd.addColorStop(1, 'rgb(147, 147, 147)');


// net
context.beginPath();
context.rect (75,100,675,200);
context.fillStyle = grd
context.fill();
context.stroke();
context.closePath();

//going left
context.beginPath();
context.moveTo(75,250);
context.lineTo(125,300);
context.lineTo(75,300);
context.stroke();
context.closePath();

//going left
 context.beginPath();
context.moveTo(75,200);
context.lineTo(175,300);
context.lineTo(75,300);
context.stroke();
context.closePath();

//going left
 context.beginPath();
context.moveTo(75,150);
context.lineTo(230,300);
context.lineTo(75,300);
context.stroke();
context.closePath();


//going left
 context.beginPath();
context.moveTo(75,100);
context.lineTo(280,300);
context.lineTo(75,300);
context.stroke();
context.closePath();

//going left
 context.beginPath();
context.moveTo(125,100);
context.lineTo(330,300);
context.lineTo(75,300);
context.stroke();
context.closePath();

//going left
 context.beginPath();
context.moveTo(175,100);
context.lineTo(380,300);
context.lineTo(75,300);
context.stroke();
context.closePath();
//going left
 context.beginPath();
context.moveTo(225,100);
context.lineTo(425,300);
context.lineTo(75,300);
context.stroke();
context.closePath();
//going left
 context.beginPath();
context.moveTo(275,100);
context.lineTo(475,300);
context.lineTo(75,300);
context.stroke();
context.closePath();
//going left
 context.beginPath();
context.moveTo(315,100);
context.lineTo(515,300);
context.lineTo(75,300);
context.stroke();
context.closePath();
//going left
 context.beginPath();
context.moveTo(360,100);
context.lineTo(560,300);
context.lineTo(75,300);
context.stroke();
context.closePath();

//going left
 context.beginPath();
context.moveTo(400,100);
context.lineTo(600,300);
context.lineTo(75,300);
context.stroke();
context.closePath();

//going left
 context.beginPath();
context.moveTo(450,100);
context.lineTo(650,300);
context.lineTo(75,300);
context.stroke();
context.closePath();

//going left
 context.beginPath();
context.moveTo(500,100);
context.lineTo(700,300);
context.lineTo(75,300);
context.stroke();
context.closePath();
//going left
 context.beginPath();
context.moveTo(550,100);
context.lineTo(750,300);
context.lineTo(75,300);
context.stroke();
context.closePath();

//going left
 context.beginPath();
context.moveTo(550,100);
context.lineTo(750,300);
context.lineTo(75,300);
context.stroke();
context.closePath();

//going left
 context.beginPath();
context.moveTo(750,250);
context.lineTo(600,100);
context.lineTo(750,100);
context.stroke();
context.closePath();
//going left
 context.beginPath();
context.moveTo(750,200);
context.lineTo(650,100);
context.lineTo(750,100);
context.stroke();
context.closePath();
// going left
 context.beginPath();
context.moveTo(750,150);
context.lineTo(700,100);
context.lineTo(750,100);
context.stroke();
context.closePath();

// going right
 context.beginPath();
context.moveTo(750,300);
context.lineTo(700,300);
context.lineTo(750,250);
context.stroke();
context.closePath();
// going right
 context.beginPath();
context.moveTo(750,300);
context.lineTo(650,300);
context.lineTo(750,200);
context.stroke();
context.closePath();
// going right
 context.beginPath();
context.moveTo(750,300);
context.lineTo(600,300);
context.lineTo(750,150);
context.stroke();
context.closePath();
// going right
 context.beginPath();
context.moveTo(750,300);
context.lineTo(550,300);
context.lineTo(750,100);
context.stroke();
context.closePath();
// going right
 context.beginPath();
context.moveTo(750,300);
context.lineTo(500,300);
context.lineTo(700,100);
context.stroke();
context.closePath();
// going right
 context.beginPath();
context.moveTo(750,300);
context.lineTo(450,300);
context.lineTo(650,100);
context.stroke();
context.closePath();
// going right
 context.beginPath();
context.moveTo(750,300);
context.lineTo(400,300);
context.lineTo(600,100);
context.stroke();
context.closePath();
// going right
 context.beginPath();
context.moveTo(750,300);
context.lineTo(350,300);
context.lineTo(550,100);
context.stroke();
context.closePath();
// going right
 context.beginPath();
context.moveTo(750,300);
context.lineTo(300,300);
context.lineTo(500,100);
context.stroke();
context.closePath();
// going right
 context.beginPath();
context.moveTo(750,300);
context.lineTo(250,300);
context.lineTo(450,100);
context.stroke();
context.closePath();
// going right
 context.beginPath();
context.moveTo(750,300);
context.lineTo(200,300);
context.lineTo(400,100);
context.stroke();
context.closePath();
// going right
 context.beginPath();
context.moveTo(750,300);
context.lineTo(150,300);
context.lineTo(350,100);
context.stroke();
context.closePath();
// going right
 context.beginPath();
context.moveTo(750,300);
context.lineTo(100,300);
context.lineTo(300,100);
context.stroke();
context.closePath();
// going right
 context.beginPath();
context.moveTo(75,100);
context.lineTo(75,280);
context.lineTo(250,100);
context.stroke();
context.closePath();
// going right
 context.beginPath();
context.moveTo(75,100);
context.lineTo(75,230);
context.lineTo(200,100);
context.stroke();
context.closePath();
// going right
 context.beginPath();
context.moveTo(75,100);
context.lineTo(75,170);
context.lineTo(150,100);
context.stroke();
context.closePath();
// going right
 context.beginPath();
context.moveTo(75,100);
context.lineTo(75,130);
context.lineTo(110,100);
context.stroke();
context.closePath();

// t
context.beginPath();

context.moveTo(150,510); // STARTING POINT
context.lineTo(150,450);
context.lineTo(125,450);
context.lineTo(150,510);
context.lineTo(125,510);
context.lineTo(125,450);
context.lineWidth=6
context.lineCap = 'round';
context.lineJoin= 'round'
context.strokeStyle= 'white'
context.fillStyle= 'white'
context.fill()
context.stroke();
context.closePath();


// t
context.beginPath();

context.moveTo(175,450); // STARTING POINT
context.lineTo(100,450);
context.lineTo(100,435);
context.lineTo(175,435);
context.lineTo(175,450);
context.lineWidth=6
context.lineCap = 'round';
context.lineJoin= 'round'
context.strokeStyle= 'white'
context.fillStyle= 'white'
context.fill()
context.stroke();
context.closePath();

//b
  context.beginPath();
 context.arc(215, 455, 23, 0*Math.PI, 2*Math.PI,false)
 context.lineWidth=2;
  context.strokeStyle = 'white'
 context.fillStyle= 'white'
 context.fill();
 context.stroke();
context.closePath();
//b
  context.beginPath();
 context.arc(215, 490, 25, 0*Math.PI, 2*Math.PI,false)
 context.lineWidth=2;
  context.strokeStyle = 'white'
 context.fillStyle= 'white'
 context.fill();
 context.stroke();
context.closePath();

// b
context.beginPath();
context.moveTo(190,513); // STARTING POINT
context.lineTo(190,434);
context.lineTo(212,434);
context.lineTo(204,513);
context.lineTo(190,513);
context.lineTo(212,513);
context.lineWidth=6
context.lineCap = 'round';
context.lineJoin= 'round'
context.strokeStyle= 'white'
context.fillStyle= 'white'
context.fill()
context.stroke();
context.closePath();

//b
  context.beginPath();
 context.arc(215, 490, 7, 0*Math.PI, 2*Math.PI,false)
 context.lineWidth=2;
  context.strokeStyle = rdg2
 context.fillStyle= rdg2
 context.fill();
 context.stroke();
context.closePath();

//b
  context.beginPath();
 context.arc(215, 455, 7, 0*Math.PI, 2*Math.PI,false)
 context.lineWidth=2;
  context.strokeStyle = rdg2
 context.fillStyle= rdg2
 context.fill();
 context.stroke();
context.closePath();

// v
context.beginPath();
context.moveTo(280,515); // STARTING POINT
context.lineTo(255,435);
context.lineTo(270,435);
context.lineWidth=6
context.lineCap = 'round';
context.lineJoin= 'round'
context.strokeStyle= 'rgb(255, 255, 255)'
context.fillStyle= 'rgb(255, 255, 255)'
context.fill()
context.stroke();
context.closePath();

// v
context.beginPath();
context.moveTo(285,480); // STARTING POINT
context.lineTo(270,435);
context.lineWidth=6
context.lineCap = 'round';
context.lineJoin= 'round'
context.strokeStyle= 'white'
context.fillStyle= 'white'
context.fill()
context.stroke();
context.closePath();

// v
context.beginPath();
context.moveTo(280,515); // STARTING POINT
context.lineTo(290,515);
context.lineTo(315,435);
context.lineTo(300,435);
context.lineTo(285,480);
context.lineWidth=6
context.lineCap = 'round';
context.lineJoin= 'round'
context.strokeStyle= 'rgb(255, 255, 255)'
context.fillStyle= 'rgb(255, 255, 255)'
context.fill()
context.stroke();
context.closePath();

//v
// v
context.beginPath();
context.moveTo(280,515); // STARTING POINT
context.lineTo(285,480);
context.lineTo(280,470);
context.lineTo(270,470);
context.lineTo(270,470);
context.lineTo(275,480);
context.lineTo(280,500);
context.lineTo(270,440);
context.lineWidth=6
context.lineCap = 'round';
context.lineJoin= 'round'
context.strokeStyle= 'rgb(255, 255, 255)'
context.fillStyle= 'rgb(255, 255, 255)'
context.fill()
context.stroke();
context.closePath();

//b
  context.beginPath();
 context.arc(355, 455, 23, 0*Math.PI, 2*Math.PI,false)
 context.lineWidth=2;
  context.strokeStyle = 'rgb(255, 255, 255)'
 context.fillStyle= 'rgb(255, 255, 255)'
 context.fill();
 context.stroke();
context.closePath();
//b
  context.beginPath();
 context.arc(355, 490, 25, 0*Math.PI, 2*Math.PI,false)
 context.lineWidth=2;
  context.strokeStyle = 'rgb(255, 255, 255)'
 context.fillStyle= 'rgb(255, 255, 255)'
 context.fill();
 context.stroke();
context.closePath();


//b bottom circle cut out
  context.beginPath();
 context.arc(355, 490, 7, 0*Math.PI, 2*Math.PI,false)
 context.lineWidth=2;
  context.strokeStyle = rdg2
 context.fillStyle= rdg2
 context.fill();
 context.stroke();
context.closePath();

//b
context.beginPath();
context.moveTo(330,510); // STARTING POINT
context.lineTo(330,434);
context.lineTo(355,434);
context.lineTo(330,513);
context.lineTo(352,513);
context.lineTo(330,513);
context.lineTo(337,509);
context.lineWidth=6
context.lineCap = 'round';
context.lineJoin= 'round'
context.strokeStyle= 'rgb(255, 255, 255)'
context.fillStyle= 'rgb(255, 255, 255)'
context.fill()
context.stroke();
context.closePath();

//b bottom circle cutout
 context.beginPath();
 context.arc(355, 455, 7, 0*Math.PI, 2*Math.PI,false)
 context.lineWidth=2;
  context.strokeStyle = rdg2
 context.fillStyle= rdg2
 context.fill();
 context.stroke();
context.closePath();

//underline
context.beginPath();
context.moveTo(100,550);
context.bezierCurveTo(250,485,200,615,390,550);
 context.lineWidth=10;
  context.strokeStyle = 'rgb(255, 255, 255)'
  context.fillStyle = 'clear'
 context.fill();
 context.stroke();
context.closePath();
//// <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< YOUR CODE ENDS HERE