IDeATe

Back to Parent
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title> CMUWS Stats </title>
</head>
<body>
<canvas id="myCanvas" width="940" height="400" style="border:1px solid #000000;">
</canvas>



<script>
var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');
      
      context.beginPath();
	  
	  //Legend
	  context.fillStyle = "yellow";
	  context.fillRect(100, 100, 20, 20);
	  context.font = "20px Arial";
	  context.fillStyle = "black";
	  context.fillText("Freshmen",132,117);
  		
	  context.fillStyle = "red";
	  context.fillRect(100, 130, 20, 20);
	  context.font = "20px Arial";
	  context.fillStyle = "black";
	  context.fillText("Sophomore",132,147);
		
	  context.fillStyle = "green";
	  context.fillRect(100, 160, 20, 20);
	  context.font = "20px Arial";
	  context.fillStyle = "black";
	  context.fillText("Junior",132,177);
		
	  context.fillStyle = "blue";
	  context.fillRect(100, 190, 20, 20);
	  context.font = "20px Arial";
	  context.fillStyle = "black";
	  context.fillText("Senior",132,207);

	 //SHOTS
	 context.arc(100, 200, 24, 0, 2 * Math.PI, false);
	 context.fillStyle = "yellow";
	 context.fill();
	 context.fillStyle = "black";
	 context.font = "20px Arial";
	 context.fillText("24",90,207);
	 
	 context.beginPath();
	 context.arc(360, 200, 162, 0, 2 * Math.PI, false);
	 context.fillStyle = "red";
	 context.fill();
	 context.fillStyle = "black";
	 context.font = "20px Arial";
	 context.fillText("162",345,207);

	 context.beginPath();
	 context.arc(620, 200, 32, 0, 2 * Math.PI, false);
	 context.fillStyle = "green";
	 context.fill();
	 context.fillStyle = "black";
	 context.font = "20px Arial";
	 context.fillText("32",608,207);

	 context.beginPath();
	 context.arc(760, 200, 42, 0, 2 * Math.PI, false);
	 context.fillStyle = "blue";
	 context.fill();
	 context.fillStyle = "black";
	 context.font = "20px Arial";
	 context.fillText("42",745,207);

	 context.fillStyle = "black";
	 context.font = "40px Arial";
	 context.fillText("Shots",50,50);

	  //GOALS
	 context.arc(100, 200, 4*8, 0, 2 * Math.PI, false);
	 context.fillStyle = "yellow";
	 context.fill();
	 context.fillStyle = "black";
	 context.font = "20px Arial";
	 context.fillText("4",90,207);

	 context.beginPath();
	 context.arc(360, 200, 18*8, 0, 2 * Math.PI, false);
	 context.fillStyle = "red";
	 context.fill();
	 context.fillStyle = "black";
	 context.font = "20px Arial";
	 context.fillText("18",345,207);

	 context.beginPath();
	 context.arc(620, 200, 7*8, 0, 2 * Math.PI, false);
	 context.fillStyle = "green";
	 context.fill();
	 context.fillStyle = "black";
	 context.font = "20px Arial";
	 context.fillText("7",608,207);

	 context.beginPath();
	 context.arc(800, 200, 11*8, 0, 2 * Math.PI, false);
	 context.fillStyle = "blue";
	 context.fill();
	 context.fillStyle = "black";
	 context.font = "20px Arial";
	 context.fillText("11",790,207);

	 context.fillStyle = "black";
	 context.font = "40px Arial";
	 context.fillText("Goals",50,50);

	  //ASSISTS
	 context.arc(100, 200, 2*8, 0, 2 * Math.PI, false);
	 context.fillStyle = "yellow";
	 context.fill();
	 context.fillStyle = "black";
	 context.font = "20px Arial";
	 context.fillText("2",90,207);

	 context.beginPath();
	 context.arc(360, 200, 17*8, 0, 2 * Math.PI, false);
	 context.fillStyle = "red";
	 context.fill();
	 context.fillStyle = "black";
	 context.font = "20px Arial";
	 context.fillText("17",345,207);

	 context.beginPath();
	 context.arc(620, 200, 3*8, 0, 2 * Math.PI, false);
	 context.fillStyle = "green";
	 context.fill();
	 context.fillStyle = "black";
	 context.font = "20px Arial";
	 context.fillText("3",608,207);

	 context.beginPath();
	 context.arc(800, 200, 3*8, 0, 2 * Math.PI, false);
	 context.fillStyle = "blue";
	 context.fill();
	 context.fillStyle = "black";
	 context.font = "20px Arial";
	 context.fillText("3",790,207);

	 context.fillStyle = "black";
	 context.font = "40px Arial";
	 context.fillText("Assists",50,50);
	  
      //SOG
      context.arc(100, 200, 15*1.5, 0, 2 * Math.PI, false);
      context.fillStyle = "yellow";
      context.fill();
      context.fillStyle = "black";
      context.font = "20px Arial";
      context.fillText("15",90,207);


      context.beginPath();
      context.arc(360, 200, 96*1.5, 0, 2 * Math.PI, false);
      context.fillStyle = "red";
      context.fill();
      context.fillStyle = "black";
      context.font = "20px Arial";
      context.fillText("96",345,207);

      context.beginPath();
      context.arc(620, 200, 17*1.5, 0, 2 * Math.PI, false);
      context.fillStyle = "green";
      context.fill();
      context.fillStyle = "black";
      context.font = "20px Arial";
      context.fillText("17",608,207);

       context.beginPath();
       context.arc(800, 200, 24*1.5, 0, 2 * Math.PI, false);
       context.fillStyle = "blue";
       context.fill();
       context.fillStyle = "black";
       context.font = "20px Arial";
       context.fillText("24",790,207);

         context.fillStyle = "black";
	 context.font = "40px Arial";
	 context.fillText("Shots on Goal",50,50);

	 //GAME WINNERS
	 context.arc(100, 200, 0*20, 0, 2 * Math.PI, false);
	 context.fillStyle = "yellow";
	 context.fill();
	 context.fillStyle = "black";
	 context.font = "20px Arial";
	 context.fillText("0",90,207);

	 context.beginPath();
	 context.arc(360, 200, 7*20, 0, 2 * Math.PI, false);
	 context.fillStyle = "red";
	 context.fill();
	 context.fillStyle = "black";
	 context.font = "20px Arial";
	 context.fillText("7",345,207);

	 context.beginPath();
	 context.arc(620, 200, 3*20, 0, 2 * Math.PI, false);
	 context.fillStyle = "green";
	 context.fill();
	 context.fillStyle = "black";
	 context.font = "20px Arial";
	 context.fillText("3",608,207);

	 context.beginPath();
	 context.arc(800, 200, 4*20, 0, 2 * Math.PI, false);
	 context.fillStyle = "blue";
	 context.fill();
	 context.fillStyle = "black";
	 context.font = "20px Arial";
	 context.fillText("4",790,207);

	 context.fillStyle = "black";
	 context.font = "40px Arial";
	 context.fillText("Game Winners",50,50);

</script> 

</body>
</html>
Click to Expand
Content Rating

Is this a good/useful/informative piece of content to include in the project? Have your say!