HTML 5

Drawing a Circle versus making a Circle Object Video Tutorial

Circle.html

<!DOCTYPE html>
<HEAD>
	<TITLE>Circle</TITLE>
</HEAD>
<BODY>
<CANVAS id="C1" width="200" height="100" style="border:1px solid black;">
</CANVAS>

<SCRIPT>
  var myStuff=document.getElementById("C1");
  var circle=myStuff.getContext("2d");
  circle.fillStyle="blue";
  circle.beginPath();
  circle.arc(100,48,15,0,2*Math.PI,true);
  circle.closePath();
  circle.fill();
</SCRIPT>
</BODY>
</HTML>

CircleClass.html

<!DOCTYPE html>
<HEAD>
	<TITLE>Circle Class</TITLE>
</HEAD>
<BODY>
<CANVAS id="C1" width="200" height="100" style="border:1px solid black;">
Your Browser is too old to support the canas element.
</CANVAS>

<SCRIPT>
  myCircle = new Circle();
  myCircle.Color = "green";
  myCircle.R = 50;
  myCircle.drawIt();
</SCRIPT>
</BODY>
</HTML>

You define the Circle object in the HEAD section:

<HEAD>
	<TITLE>Circle Class</TITLE>
	<SCRIPT>
	function Circle()
	{
		this.Color = "blue";
		this.X = 100;
		this.Y = 48;
		this.R = 15;
		this.drawIt = drawIt;	
	}
	function drawIt()
	{
	  var myStuff=document.getElementById("C1");
	  var circle=myStuff.getContext("2d");
	  circle.fillStyle=this.Color;
	  circle.beginPath();
	  circle.arc(this.X,this.Y,this.R,0,2*Math.PI,true);
	  circle.closePath();
	  circle.fill();
	}
	</SCRIPT>
</HEAD>

Now you can make new instances of Circle very easily, and you can update it very easily too!