Canvas und Objektmethoden

function main() {

				// canvas -> Canvas Element
				// ctx 	-> Context vom Canvas Element(2d)





		



				  var canvas = document.getElementById("pong");
					if (canvas.getContext) {
						var ctx = canvas.getContext("2d");

						//Zeichnen des angepassten Canvas-Elements mit Hintergrundfarbe
						drawCanvas(canvas,ctx);

						//Erstellen des Ball-Objekts 
						var ball = createBall(ctx);

						ball.draw();








					}
				}




function createBall(ctx) {
	/*
	* ctx    -> Inhalt des zu zeichnenden Elements
	* erstellt den Ball und gibt ihn zurück
	*
	*
	* x	 -> X-Koordinate im Canvas
	* y  -> Y-Koordinate im Canvas
	* r  -> Radius des Balles
	* c  -> Farbe des Balles
	* vx -> Geschwindigkeit in x Richtung
	* vy -> Geschwindigkeit in y Richtung
	*
	* draw() -> Zeichnet den Ball im Canvas-Element
	*/

	var ball = {

		//Zustandsvariablen
		x: 50,
		y: 50,
		vx: 3,
		vy: 6,

		//Fixe Variablen
		r: 5,
		c: "white",

		//Methoden
		draw: function() {

			//Beginne den Pfad
			ctx.beginPath();

			//Farbe definieren
			ctx.fillStyle = this.c;

			//Kreis zeichnen
			ctx.arc(this.x,this.y,this.r,0, Math.Pi*2, false);

			//Kreis färben
			ctx.fill();




		}


	}

	//gibt das Objekt zurück
	return ball;


}