Add ProxyContext helper class to assist in debugging problems relating to interactions with the canvas' 2d context.

src/paper.js

@@ -124,6 +124,9 @@ var paper = new function() {
 /*#*/ include('util/CanvasProvider.js');
 /*#*/ include('util/Numerical.js');
 /*#*/ include('util/BlendMode.js');
+/*#*/ if (options.version == 'dev') {
+/*#*/ include('util/ProxyContext.js');
+/*#*/ } // options.browser
 
 /*#*/ include('core/PaperScript.js');
 

src/util/ProxyContext.js

@@ -0,0 +1,95 @@
+/*
+ * Paper.js
+ *
+ * This file is part of Paper.js, a JavaScript Vector Graphics Library,
+ * based on Scriptographer.org and designed to be largely API compatible.
+ * http://paperjs.org/
+ * http://scriptographer.org/
+ *
+ * Copyright (c) 2011, Juerg Lehni & Jonathan Puckey
+ * http://lehni.org/ & http://jonathanpuckey.com/
+ *
+ * Distributed under the MIT license. See LICENSE file for details.
+ *
+ * All rights reserved.
+ */
+
+ /**
+ * @name ProxyContext
+ *
+ * @class The ProxyContext is a helper class that helps Canvas debugging 
+ * by logging all interactions with a 2D Canvas context.
+ * 
+ * @classexample
+ * view._context = new ProxyContext(view._context);
+ */
+var ProxyContext = new function() {
+	var descriptions = [
+		'save()', 'restore()', 'scale(x,y)', 'rotate(angle)', 'translate(x,y)',
+		'transform(a,b,c,d,e,f)', 'setTransform(a,b,c,d,e,f)', 'globalAlpha',
+		'globalCompositeOperation', 'strokeStyle', 'fillStyle',
+		'createLinearGradient(x0,y0,x1,y1)',
+		'createRadialGradient(x0,y0,r0,x1,y1,r1)',
+		'createPattern(image,repetition)', 'lineWidth', 'lineCap', 'lineJoin',
+		'miterLimit', 'shadowOffsetX', 'shadowOffsetY', 'shadowBlur',
+		'shadowColor', 'clearRect(x,y,w,h)', 'fillRect(x,y,w,h)',
+		'strokeRect(x,y,w,h)', 'beginPath()', 'closePath()', 'moveTo(x,y)',
+		'lineTo(x,y)', 'quadraticCurveTo(cpx,cpy,x,y)',
+		'bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y)', 'arcTo(x1,y1,x2,y2,radius)',
+		'rect(x,y,w,h)', 'arc(x,y,radius,startAngle,endAngle,anticlockwise)',
+		'fill()', 'stroke()', 'drawSystemFocusRing()', 'drawCustomFocusRing()',
+		'scrollPathIntoView()', 'clip()', 'isPointInPath(x,y)', 'font',
+		'textAlign', 'textBaseline', 'fillText(text,x,y,maxWidth)',
+		'strokeText(text,x,y,maxWidth)', 'measureText(text)',
+		'drawImage(image,dx,dy)', 'drawImage(image,dx,dy,dw,dh)',
+		'drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh)', 'create(sw,sh)',
+		'create(imagedata)', 'get(sx,sy,sw,sh)',
+		'put(imagedata,dx,dy,dirtyX,dirtyY,dirtyWidth,dirtyHeight)'
+	];
+	var param = {
+		initialize: function(context) {
+			this._ctx = context;
+			this._indents = 0;
+		},
+		getIndentation: function() {
+			var str = '';
+			for (var i = 0; i < this._indents; i++) {
+				str += '	';
+			}
+			return str;
+		}
+	};
+	Base.each(descriptions, function(description) {
+		var matches = description.match(/^([^(]+)(\()*/),
+			name = matches[1],
+			isFunction = !!matches[2];
+		if (isFunction) {
+			param[name] = function() {
+				if (name == 'restore') {
+					this._indents--;
+				}
+				var args = Array.prototype.slice.call(arguments, 0);
+				var string = 'ctx.' + name + '(' + args.join(', ') + ')';
+				console.log(this.getIndentation() + string + ';');
+				this._ctx[name].apply(this._ctx, arguments);
+				if (name == 'save') {
+					this._indents++;
+				}
+			};
+		} else {
+			var capitalized = Base.capitalize(name);
+			param['set' + capitalized] = function(value) {
+				if (value.substring) {
+					value = '\'' + value + '\'';
+				}
+				var string = 'ctx.' + name + ' = ' + value;
+				console.log(this.getIndentation() + string + ';');
+				return this._ctx[name] = value;
+			};
+			param['get' + capitalized] = function() {
+				return this._ctx[name];
+			};
+		}
+	});
+	return Base.extend(param);
+};