KSurface chaining

2 files changed, 40 insertions, 3 deletions

diff --git a/examples/adding_up_to_10/js/lesson_multiple.js b/examples/adding_up_to_10/js/lesson_multiple.js
index b128938..318649f 100755
--- a/examples/adding_up_to_10/js/lesson_multiple.js
+++ b/examples/adding_up_to_10/js/lesson_multiple.js
@@ -2,8 +2,8 @@ $(document).ready(function(){
 var k = $.karma ({container: "#karma-main"});
 k.init({
 	images: [
-		{id: "ball",   file: "ball37.png",   localized : false },
-		{id: "balloon", file: "balloo.png", localized : false },
+		{id: "ball",   file: "ball37px.png",   localized : false },
+		{id: "balloon", file: "balloon.png", localized : false },
 		{id: "banana", file: "banana.png", localized : false },
 		{id: "chilli", file: "chilli.png", localized : false },
 		{id: "fish"  , file: "fish.png",   localized : false },
@@ -34,11 +34,13 @@ k.main(function() {
 	library.images["ball"].draw( surfaces["inline1"].ctx );
 	library.images["fish"].draw( surfaces["inline2"].ctx );
 	
+	//surfaces["inline1"].ctx.drawWindow(window, 0, 0, 100, 200, "rgb(0,0,0)");
 
 	surfaces["inline2"].addEventListener(
 		"click", 
 		function(){surfaces["inline2"].clear();}
 	);
+	surfaces["inline1"].fillStyle("#006699").fillRect(0, 0, 150, 150);
 	/*
 	surfaces["inline1"].ctx.fillStyle = "#00f";
     surfaces["inline1"].ctx.fillRect(0, 0, 150, 150);
diff --git a/js/jquery.karma.js b/js/jquery.karma.js
index d7407ef..07783b8 100755
--- a/js/jquery.karma.js
+++ b/js/jquery.karma.js
@@ -1,4 +1,4 @@
-/*
+/*
 *	Karma Framework
 *	http://wiki.sugarlabs.org/go/Karma
 *	
@@ -666,6 +666,40 @@ var KSurface = Class(
 				throw new Error ("Your browser doesn't support canvas, \
 				try the newest Firefox, Safari or Google Chrome");
 			}
+			//ctx methods chaining stuff
+			var toChain = [
+			"globalAlpha", "globalCompositeOperation", "lineWidth", "lineCap", 
+			"lineJoin", "miterLimit", "font", "textAlign", "textBaseline", "save", 
+			"restore", "scale", "rotate", "translate", "transform", "setTransform", 
+			"clearRect", "fillRect", "strokeRect", "beginPath", "closePath", 
+			"moveTo", "lineTo", "quadraticCurveTo", "bezierCurveTo", "arcTo", 
+			"arc", "rect", "fill", "stroke", "clip", "fillText", "strokeText", 
+			"measureText", "isPointInPath", "strokeStyle", "fillStyle", 
+			"createLinearGradient", "createRadialGradient", "createPattern", 
+			"shadowOffsetX", "shadowOffsetY", "shadowBlur", "shadowColor", 
+			//"mozTextStyle", "mozDrawText", "mozMeasureText", "mozPathText", 
+			"mozTextAlongPath", "drawImage", "getImageData", "putImageData", 
+			"createImageData", "drawWindow"
+			];
+			var that=this;
+			var chainMaker = function ( name ){
+				that[ name ] = function ( ){
+					var type = typeof that.ctx[name];
+					if ( type === "function") {
+						that.ctx[ name ].apply( that.ctx, arguments );
+					}else if ( type === "string" ){
+						that.ctx[ name ] = arguments[0];
+					}else {
+						throw ("wtf?!: impossible to chain " + name + "!");
+					}
+					return that;
+				}
+			}
+			for (var i=0; i<toChain.length; i++){
+				chainMaker(  toChain[ i ] );
+			}
+
+			
 			//events
 			this.canvas.addEventListener("contextmenu", function(ev){
 				//
@@ -675,6 +709,7 @@ var KSurface = Class(
 				handleEvents,
 				false
 			);
+			
 		},
 		/**
 		Adds an event listener to the surface