<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title> ART 210 - CANVAS PROJECT </title>
<style type="text/css">
body,td,th {
font-family: Helvetica, Arial, sans-serif;
font-size: 12px;
color: rgba(0,0,0,1);
}
body {
background-color: rgba(255,255,255,1);
}
#myCanvas { border: rgba(102,0,255,1) medium dashed; }
</style>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
//// >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> 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(229, 249, 254)'
context.fill();
context.stroke();
context.closePath();
// right pole
context.beginPath();
context.rect (750,100,25,600);
context.fillStyle = 'rgb(229, 249, 254)'
context.fill();
context.stroke();
context.closePath();
//net grad
var grd = context.createLinearGradient(100,100,200,400);
grd.addColorStop(0, 'rgb(253, 251, 252)');
grd.addColorStop(0.5, 'rgba(249, 249, 249, 0.99)');
grd.addColorStop(1, 'rgba(193, 193, 193, 0.99)');
// 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,510); // STARTING POINT
context.lineTo(190,435);
context.lineTo(206,435);
context.lineTo(206,510);
context.lineTo(190,510);
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 = 'black'
context.fillStyle= 'black'
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 = 'black'
context.fillStyle= 'black'
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= 'white'
context.fillStyle= 'white'
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= 'white'
context.fillStyle= 'white'
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= 'white'
context.fillStyle= 'white'
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 = 'white'
context.fillStyle= 'white'
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 = 'white'
context.fillStyle= 'white'
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 = 'black'
context.fillStyle= 'black'
context.fill();
context.stroke();
context.closePath();
//b
context.beginPath();
context.moveTo(330,510); // STARTING POINT
context.lineTo(330,435);
context.lineTo(350,435);
context.lineTo(330,512);
context.lineTo(348,512);
context.lineTo(330,508);
context.lineWidth=6
context.lineCap = 'round';
context.lineJoin= 'round'
context.strokeStyle= 'white'
context.fillStyle= 'white'
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 = 'black'
context.fillStyle= 'black'
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 = 'white'
context.fillStyle = 'clear'
context.fill();
context.stroke();
context.closePath();
//// <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< YOUR CODE ENDS HERE
// CHANGE THE CREDITS
context.beginPath();
context.font = 'bold 20px Arial';
context.fillStyle = "rgba(200,255,0,1)";
context.fillText('ART 210 - CANVAS PROJECT', 20, 550);
context.closePath();
</script>
</body>
</html>
No comments:
Post a Comment