diff --git a/NEWS.txt b/NEWS.txt
index 09cefac..abce9e4 100644
--- a/NEWS.txt
+++ b/NEWS.txt
@@ -69,7 +69,9 @@ Bug fixes:
prevent it from overlapping the plot itself. This also fixes a
problem with anti-aliasing when the width is 1 pixel (reported by
Anthony Ettinger).
-
+- Imported SVN version of excanvas and fixed an issue with the newer
+ version. Hopefully, this will make Flot work with IE8 (nudge by
+ Fabien Menager).
Flot 0.5
--------
diff --git a/examples/basic.html b/examples/basic.html
index afd7ac1..fde8def 100644
--- a/examples/basic.html
+++ b/examples/basic.html
@@ -4,7 +4,7 @@
Flot Examples
Flot Examples
Flot Examples
Flot Examples
Flot Examples
Flot Examples
Flot Examples
Flot Examples
Flot Examples
Flot Examples
Flot Examples
Flot Examples
elements as element.getContext().
+ * @this {HTMLElement}
+ * @return {CanvasRenderingContext2D_}
+ */
+ function getContext() {
+ return this.context_ ||
+ (this.context_ = new CanvasRenderingContext2D_(this));
+ }
+
+ var slice = Array.prototype.slice;
+
+ /**
+ * Binds a function to an object. The returned function will always use the
+ * passed in {@code obj} as {@code this}.
+ *
+ * Example:
+ *
+ * g = bind(f, obj, a, b)
+ * g(c, d) // will do f.call(obj, a, b, c, d)
+ *
+ * @param {Function} f The function to bind the object to
+ * @param {Object} obj The object that should act as this when the function
+ * is called
+ * @param {*} var_args Rest arguments that will be used as the initial
+ * arguments when the function is called
+ * @return {Function} A new function that has bound this
+ */
+ function bind(f, obj, var_args) {
+ var a = slice.call(arguments, 2);
+ return function() {
+ return f.apply(obj, a.concat(slice.call(arguments)));
+ };
+ }
+
var G_vmlCanvasManager_ = {
- init: function (opt_doc) {
- var doc = opt_doc || document;
+ init: function(opt_doc) {
if (/MSIE/.test(navigator.userAgent) && !window.opera) {
- var self = this;
- doc.attachEvent("onreadystatechange", function () {
- self.init_(doc);
- });
+ var doc = opt_doc || document;
+ // Create a dummy element so that IE will allow canvas elements to be
+ // recognized.
+ doc.createElement('canvas');
+ doc.attachEvent('onreadystatechange', bind(this.init_, this, doc));
}
},
- init_: function (doc) {
- if (doc.readyState == "complete") {
- // create xmlns
- if (!doc.namespaces["g_vml_"]) {
- doc.namespaces.add("g_vml_", "urn:schemas-microsoft-com:vml");
- }
+ init_: function(doc) {
+ // create xmlns
+ if (!doc.namespaces['g_vml_']) {
+ doc.namespaces.add('g_vml_', 'urn:schemas-microsoft-com:vml',
+ '#default#VML');
+
+ }
+ if (!doc.namespaces['g_o_']) {
+ doc.namespaces.add('g_o_', 'urn:schemas-microsoft-com:office:office',
+ '#default#VML');
+ }
- // setup default css
+ // Setup default CSS. Only add one style sheet per document
+ if (!doc.styleSheets['ex_canvas_']) {
var ss = doc.createStyleSheet();
- ss.cssText = "canvas{display:inline-block;overflow:hidden;" +
+ ss.owningElement.id = 'ex_canvas_';
+ ss.cssText = 'canvas{display:inline-block;overflow:hidden;' +
// default size is 300x150 in Gecko and Opera
- "text-align:left;width:300px;height:150px}" +
- "g_vml_\\:*{behavior:url(#default#VML)}";
-
- // find all canvas elements
- var els = doc.getElementsByTagName("canvas");
- for (var i = 0; i < els.length; i++) {
- if (!els[i].getContext) {
- this.initElement(els[i]);
- }
- }
+ 'text-align:left;width:300px;height:150px}' +
+ 'g_vml_\\:*{behavior:url(#default#VML)}' +
+ 'g_o_\\:*{behavior:url(#default#VML)}';
+
}
- },
- fixElement_: function (el) {
- // in IE before version 5.5 we would need to add HTML: to the tag name
- // but we do not care about IE before version 6
- var outerHTML = el.outerHTML;
-
- var newEl = el.ownerDocument.createElement(outerHTML);
- // if the tag is still open IE has created the children as siblings and
- // it has also created a tag with the name "/FOO"
- if (outerHTML.slice(-2) != "/>") {
- var tagName = "/" + el.tagName;
- var ns;
- // remove content
- while ((ns = el.nextSibling) && ns.tagName != tagName) {
- ns.removeNode();
- }
- // remove the incorrect closing tag
- if (ns) {
- ns.removeNode();
- }
+ // find all canvas elements
+ var els = doc.getElementsByTagName('canvas');
+ for (var i = 0; i < els.length; i++) {
+ this.initElement(els[i]);
}
- el.parentNode.replaceChild(newEl, el);
- return newEl;
},
/**
@@ -112,35 +133,37 @@ if (!window.CanvasRenderingContext2D) {
* @param {HTMLElement} el The canvas element to initialize.
* @return {HTMLElement} the element that was created.
*/
- initElement: function (el) {
- el = this.fixElement_(el);
- el.getContext = function () {
- if (this.context_) {
- return this.context_;
+ initElement: function(el) {
+ if (!el.getContext) {
+
+ el.getContext = getContext;
+
+ // Remove fallback content. There is no way to hide text nodes so we
+ // just remove all childNodes. We could hide all elements and remove
+ // text nodes but who really cares about the fallback content.
+ el.innerHTML = '';
+
+ // do not use inline function because that will leak memory
+ el.attachEvent('onpropertychange', onPropertyChange);
+ el.attachEvent('onresize', onResize);
+
+ var attrs = el.attributes;
+ if (attrs.width && attrs.width.specified) {
+ // TODO: use runtimeStyle and coordsize
+ // el.getContext().setWidth_(attrs.width.nodeValue);
+ el.style.width = attrs.width.nodeValue + 'px';
+ } else {
+ el.width = el.clientWidth;
}
- return this.context_ = new CanvasRenderingContext2D_(this);
- };
-
- // do not use inline function because that will leak memory
- el.attachEvent('onpropertychange', onPropertyChange);
- el.attachEvent('onresize', onResize);
-
- var attrs = el.attributes;
- if (attrs.width && attrs.width.specified) {
- // TODO: use runtimeStyle and coordsize
- // el.getContext().setWidth_(attrs.width.nodeValue);
- el.style.width = attrs.width.nodeValue + "px";
- } else {
- el.width = el.clientWidth;
- }
- if (attrs.height && attrs.height.specified) {
- // TODO: use runtimeStyle and coordsize
- // el.getContext().setHeight_(attrs.height.nodeValue);
- el.style.height = attrs.height.nodeValue + "px";
- } else {
- el.height = el.clientHeight;
+ if (attrs.height && attrs.height.specified) {
+ // TODO: use runtimeStyle and coordsize
+ // el.getContext().setHeight_(attrs.height.nodeValue);
+ el.style.height = attrs.height.nodeValue + 'px';
+ } else {
+ el.height = el.clientHeight;
+ }
+ //el.getContext().setCoordsize_()
}
- //el.getContext().setCoordsize_()
return el;
}
};
@@ -150,11 +173,11 @@ if (!window.CanvasRenderingContext2D) {
switch (e.propertyName) {
case 'width':
- el.style.width = el.attributes.width.nodeValue + "px";
+ el.style.width = el.attributes.width.nodeValue + 'px';
el.getContext().clearRect();
break;
case 'height':
- el.style.height = el.attributes.height.nodeValue + "px";
+ el.style.height = el.attributes.height.nodeValue + 'px';
el.getContext().clearRect();
break;
}
@@ -214,43 +237,45 @@ if (!window.CanvasRenderingContext2D) {
o2.shadowOffsetX = o1.shadowOffsetX;
o2.shadowOffsetY = o1.shadowOffsetY;
o2.strokeStyle = o1.strokeStyle;
+ o2.globalAlpha = o1.globalAlpha;
o2.arcScaleX_ = o1.arcScaleX_;
o2.arcScaleY_ = o1.arcScaleY_;
+ o2.lineScale_ = o1.lineScale_;
}
function processStyle(styleString) {
var str, alpha = 1;
styleString = String(styleString);
- if (styleString.substring(0, 3) == "rgb") {
- var start = styleString.indexOf("(", 3);
- var end = styleString.indexOf(")", start + 1);
- var guts = styleString.substring(start + 1, end).split(",");
+ if (styleString.substring(0, 3) == 'rgb') {
+ var start = styleString.indexOf('(', 3);
+ var end = styleString.indexOf(')', start + 1);
+ var guts = styleString.substring(start + 1, end).split(',');
- str = "#";
+ str = '#';
for (var i = 0; i < 3; i++) {
str += dec2hex[Number(guts[i])];
}
- if ((guts.length == 4) && (styleString.substr(3, 1) == "a")) {
+ if (guts.length == 4 && styleString.substr(3, 1) == 'a') {
alpha = guts[3];
}
} else {
str = styleString;
}
- return [str, alpha];
+ return {color: str, alpha: alpha};
}
function processLineCap(lineCap) {
switch (lineCap) {
- case "butt":
- return "flat";
- case "round":
- return "round";
- case "square":
+ case 'butt':
+ return 'flat';
+ case 'round':
+ return 'round';
+ case 'square':
default:
- return "square";
+ return 'square';
}
}
@@ -260,7 +285,7 @@ if (!window.CanvasRenderingContext2D) {
* @param {HTMLElement} surfaceElement The element that the 2D context should
* be associated with
*/
- function CanvasRenderingContext2D_(surfaceElement) {
+ function CanvasRenderingContext2D_(surfaceElement) {
this.m_ = createMatrixIdentity();
this.mStack_ = [];
@@ -268,12 +293,12 @@ if (!window.CanvasRenderingContext2D) {
this.currentPath_ = [];
// Canvas context properties
- this.strokeStyle = "#000";
- this.fillStyle = "#000";
+ this.strokeStyle = '#000';
+ this.fillStyle = '#000';
this.lineWidth = 1;
- this.lineJoin = "miter";
- this.lineCap = "butt";
+ this.lineJoin = 'miter';
+ this.lineCap = 'butt';
this.miterLimit = Z * 1;
this.globalAlpha = 1;
this.canvas = surfaceElement;
@@ -288,67 +313,88 @@ if (!window.CanvasRenderingContext2D) {
this.element_ = el;
this.arcScaleX_ = 1;
this.arcScaleY_ = 1;
+ this.lineScale_ = 1;
}
var contextPrototype = CanvasRenderingContext2D_.prototype;
contextPrototype.clearRect = function() {
- this.element_.innerHTML = "";
- this.currentPath_ = [];
+ this.element_.innerHTML = '';
};
contextPrototype.beginPath = function() {
// TODO: Branch current matrix so that save/restore has no effect
// as per safari docs.
-
this.currentPath_ = [];
};
contextPrototype.moveTo = function(aX, aY) {
- this.currentPath_.push({type: "moveTo", x: aX, y: aY});
- this.currentX_ = aX;
- this.currentY_ = aY;
+ var p = this.getCoords_(aX, aY);
+ this.currentPath_.push({type: 'moveTo', x: p.x, y: p.y});
+ this.currentX_ = p.x;
+ this.currentY_ = p.y;
};
contextPrototype.lineTo = function(aX, aY) {
- this.currentPath_.push({type: "lineTo", x: aX, y: aY});
- this.currentX_ = aX;
- this.currentY_ = aY;
+ var p = this.getCoords_(aX, aY);
+ this.currentPath_.push({type: 'lineTo', x: p.x, y: p.y});
+
+ this.currentX_ = p.x;
+ this.currentY_ = p.y;
};
contextPrototype.bezierCurveTo = function(aCP1x, aCP1y,
aCP2x, aCP2y,
aX, aY) {
- this.currentPath_.push({type: "bezierCurveTo",
- cp1x: aCP1x,
- cp1y: aCP1y,
- cp2x: aCP2x,
- cp2y: aCP2y,
- x: aX,
- y: aY});
- this.currentX_ = aX;
- this.currentY_ = aY;
+ var p = this.getCoords_(aX, aY);
+ var cp1 = this.getCoords_(aCP1x, aCP1y);
+ var cp2 = this.getCoords_(aCP2x, aCP2y);
+ bezierCurveTo(this, cp1, cp2, p);
};
+ // Helper function that takes the already fixed cordinates.
+ function bezierCurveTo(self, cp1, cp2, p) {
+ self.currentPath_.push({
+ type: 'bezierCurveTo',
+ cp1x: cp1.x,
+ cp1y: cp1.y,
+ cp2x: cp2.x,
+ cp2y: cp2.y,
+ x: p.x,
+ y: p.y
+ });
+ self.currentX_ = p.x;
+ self.currentY_ = p.y;
+ }
+
contextPrototype.quadraticCurveTo = function(aCPx, aCPy, aX, aY) {
// the following is lifted almost directly from
// http://developer.mozilla.org/en/docs/Canvas_tutorial:Drawing_shapes
- var cp1x = this.currentX_ + 2.0 / 3.0 * (aCPx - this.currentX_);
- var cp1y = this.currentY_ + 2.0 / 3.0 * (aCPy - this.currentY_);
- var cp2x = cp1x + (aX - this.currentX_) / 3.0;
- var cp2y = cp1y + (aY - this.currentY_) / 3.0;
- this.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, aX, aY);
+
+ var cp = this.getCoords_(aCPx, aCPy);
+ var p = this.getCoords_(aX, aY);
+
+ var cp1 = {
+ x: this.currentX_ + 2.0 / 3.0 * (cp.x - this.currentX_),
+ y: this.currentY_ + 2.0 / 3.0 * (cp.y - this.currentY_)
+ };
+ var cp2 = {
+ x: cp1.x + (p.x - this.currentX_) / 3.0,
+ y: cp1.y + (p.y - this.currentY_) / 3.0
+ };
+
+ bezierCurveTo(this, cp1, cp2, p);
};
contextPrototype.arc = function(aX, aY, aRadius,
aStartAngle, aEndAngle, aClockwise) {
aRadius *= Z;
- var arcType = aClockwise ? "at" : "wa";
+ var arcType = aClockwise ? 'at' : 'wa';
- var xStart = aX + (mc(aStartAngle) * aRadius) - Z2;
- var yStart = aY + (ms(aStartAngle) * aRadius) - Z2;
+ var xStart = aX + mc(aStartAngle) * aRadius - Z2;
+ var yStart = aY + ms(aStartAngle) * aRadius - Z2;
- var xEnd = aX + (mc(aEndAngle) * aRadius) - Z2;
- var yEnd = aY + (ms(aEndAngle) * aRadius) - Z2;
+ var xEnd = aX + mc(aEndAngle) * aRadius - Z2;
+ var yEnd = aY + ms(aEndAngle) * aRadius - Z2;
// IE won't render arches drawn counter clockwise if xStart == xEnd.
if (xStart == xEnd && !aClockwise) {
@@ -356,14 +402,18 @@ if (!window.CanvasRenderingContext2D) {
// that can be represented in binary
}
+ var p = this.getCoords_(aX, aY);
+ var pStart = this.getCoords_(xStart, yStart);
+ var pEnd = this.getCoords_(xEnd, yEnd);
+
this.currentPath_.push({type: arcType,
- x: aX,
- y: aY,
+ x: p.x,
+ y: p.y,
radius: aRadius,
- xStart: xStart,
- yStart: yStart,
- xEnd: xEnd,
- yEnd: yEnd});
+ xStart: pStart.x,
+ yStart: pStart.y,
+ xEnd: pEnd.x,
+ yEnd: pEnd.y});
};
@@ -376,44 +426,55 @@ if (!window.CanvasRenderingContext2D) {
};
contextPrototype.strokeRect = function(aX, aY, aWidth, aHeight) {
- // Will destroy any existing path (same as FF behaviour)
+ var oldPath = this.currentPath_;
this.beginPath();
+
this.moveTo(aX, aY);
this.lineTo(aX + aWidth, aY);
this.lineTo(aX + aWidth, aY + aHeight);
this.lineTo(aX, aY + aHeight);
this.closePath();
this.stroke();
+
+ this.currentPath_ = oldPath;
};
contextPrototype.fillRect = function(aX, aY, aWidth, aHeight) {
- // Will destroy any existing path (same as FF behaviour)
+ var oldPath = this.currentPath_;
this.beginPath();
+
this.moveTo(aX, aY);
this.lineTo(aX + aWidth, aY);
this.lineTo(aX + aWidth, aY + aHeight);
this.lineTo(aX, aY + aHeight);
this.closePath();
this.fill();
+
+ this.currentPath_ = oldPath;
};
contextPrototype.createLinearGradient = function(aX0, aY0, aX1, aY1) {
- var gradient = new CanvasGradient_("gradient");
+ var gradient = new CanvasGradient_('gradient');
+ gradient.x0_ = aX0;
+ gradient.y0_ = aY0;
+ gradient.x1_ = aX1;
+ gradient.y1_ = aY1;
return gradient;
};
- contextPrototype.createRadialGradient = function(aX0, aY0,
- aR0, aX1,
- aY1, aR1) {
- var gradient = new CanvasGradient_("gradientradial");
- gradient.radius1_ = aR0;
- gradient.radius2_ = aR1;
- gradient.focus_.x = aX0;
- gradient.focus_.y = aY0;
+ contextPrototype.createRadialGradient = function(aX0, aY0, aR0,
+ aX1, aY1, aR1) {
+ var gradient = new CanvasGradient_('gradientradial');
+ gradient.x0_ = aX0;
+ gradient.y0_ = aY0;
+ gradient.r0_ = aR0;
+ gradient.x1_ = aX1;
+ gradient.y1_ = aY1;
+ gradient.r1_ = aR1;
return gradient;
};
- contextPrototype.drawImage = function (image, var_args) {
+ contextPrototype.drawImage = function(image, var_args) {
var dx, dy, dw, dh, sx, sy, sw, sh;
// to find the original width we overide the width and height
@@ -454,7 +515,7 @@ if (!window.CanvasRenderingContext2D) {
dw = arguments[7];
dh = arguments[8];
} else {
- throw "Invalid number of arguments";
+ throw Error('Invalid number of arguments');
}
var d = this.getCoords_(dx, dy);
@@ -471,7 +532,7 @@ if (!window.CanvasRenderingContext2D) {
vmlStr.push(' ' ,
' max.x) {
- max.x = c.x;
+ if (max.x == null || p.x > max.x) {
+ max.x = p.x;
}
- if (min.y == null || c.y < min.y) {
- min.y = c.y;
+ if (min.y == null || p.y < min.y) {
+ min.y = p.y;
}
- if (max.y == null || c.y > max.y) {
- max.y = c.y;
+ if (max.y == null || p.y > max.y) {
+ max.y = p.y;
}
}
}
lineStr.push(' ">');
- if (typeof this.fillStyle == "object") {
- var focus = {x: "50%", y: "50%"};
- var width = (max.x - min.x);
- var height = (max.y - min.y);
- var dimension = (width > height) ? width : height;
+ if (!aFill) {
+ var lineWidth = this.lineScale_ * this.lineWidth;
- focus.x = mr((this.fillStyle.focus_.x / width) * 100 + 50) + "%";
- focus.y = mr((this.fillStyle.focus_.y / height) * 100 + 50) + "%";
-
- var colors = [];
+ // VML cannot correctly render a line if the width is less than 1px.
+ // In that case, we dilute the color to make the line look thinner.
+ if (lineWidth < 1) {
+ opacity *= lineWidth;
+ }
- // inside radius (%)
- if (this.fillStyle.type_ == "gradientradial") {
- var inside = (this.fillStyle.radius1_ / dimension * 100);
+ lineStr.push(
+ '','w.x){w.x=AI.x}if(AO.y==null||AI.yw.y){w.y=AI.y}}}j.push(' ">');if(!AE){var v=this.lineScale_*this.lineWidth;if(v<1){AK*=v}j.push(""){var tagName="/"+el.tagName;var ns;while((ns=el.nextSibling)&&ns.tagName!=tagName){ns.removeNode()}if(ns){ns.removeNode()}}el.parentNode.replaceChild(newEl,el);return newEl},initElement:function(el){el=this.fixElement_(el);el.getContext=function(){if(this.context_){return this.context_}return this.context_=new CanvasRenderingContext2D_(this)};el.attachEvent('onpropertychange',onPropertyChange);el.attachEvent('onresize',onResize);var attrs=el.attributes;if(attrs.width&&attrs.width.specified){el.style.width=attrs.width.nodeValue+"px"}else{el.width=el.clientWidth}if(attrs.height&&attrs.height.specified){el.style.height=attrs.height.nodeValue+"px"}else{el.height=el.clientHeight}return el}};function onPropertyChange(e){var el=e.srcElement;switch(e.propertyName){case'width':el.style.width=el.attributes.width.nodeValue+"px";el.getContext().clearRect();break;case'height':el.style.height=el.attributes.height.nodeValue+"px";el.getContext().clearRect();break}}function onResize(e){var el=e.srcElement;if(el.firstChild){el.firstChild.style.width=el.clientWidth+'px';el.firstChild.style.height=el.clientHeight+'px'}}G_vmlCanvasManager_.init();var dec2hex=[];for(var i=0;i<16;i++){for(var j=0;j<16;j++){dec2hex[i*16+j]=i.toString(16)+j.toString(16)}}function createMatrixIdentity(){return[[1,0,0],[0,1,0],[0,0,1]]}function matrixMultiply(m1,m2){var result=createMatrixIdentity();for(var x=0;x<3;x++){for(var y=0;y<3;y++){var sum=0;for(var z=0;z<3;z++){sum+=m1[x][z]*m2[z][y]}result[x][y]=sum}}return result}function copyState(o1,o2){o2.fillStyle=o1.fillStyle;o2.lineCap=o1.lineCap;o2.lineJoin=o1.lineJoin;o2.lineWidth=o1.lineWidth;o2.miterLimit=o1.miterLimit;o2.shadowBlur=o1.shadowBlur;o2.shadowColor=o1.shadowColor;o2.shadowOffsetX=o1.shadowOffsetX;o2.shadowOffsetY=o1.shadowOffsetY;o2.strokeStyle=o1.strokeStyle;o2.arcScaleX_=o1.arcScaleX_;o2.arcScaleY_=o1.arcScaleY_}function processStyle(styleString){var str,alpha=1;styleString=String(styleString);if(styleString.substring(0,3)=="rgb"){var start=styleString.indexOf("(",3);var end=styleString.indexOf(")",start+1);var guts=styleString.substring(start+1,end).split(",");str="#";for(var i=0;i<3;i++){str+=dec2hex[Number(guts[i])]}if((guts.length==4)&&(styleString.substr(3,1)=="a")){alpha=guts[3]}}else{str=styleString}return[str,alpha]}function processLineCap(lineCap){switch(lineCap){case"butt":return"flat";case"round":return"round";case"square":default:return"square"}}function CanvasRenderingContext2D_(surfaceElement){this.m_=createMatrixIdentity();this.mStack_=[];this.aStack_=[];this.currentPath_=[];this.strokeStyle="#000";this.fillStyle="#000";this.lineWidth=1;this.lineJoin="miter";this.lineCap="butt";this.miterLimit=Z*1;this.globalAlpha=1;this.canvas=surfaceElement;var el=surfaceElement.ownerDocument.createElement('div');el.style.width=surfaceElement.clientWidth+'px';el.style.height=surfaceElement.clientHeight+'px';el.style.overflow='hidden';el.style.position='absolute';surfaceElement.appendChild(el);this.element_=el;this.arcScaleX_=1;this.arcScaleY_=1}var contextPrototype=CanvasRenderingContext2D_.prototype;contextPrototype.clearRect=function(){this.element_.innerHTML="";this.currentPath_=[]};contextPrototype.beginPath=function(){this.currentPath_=[]};contextPrototype.moveTo=function(aX,aY){this.currentPath_.push({type:"moveTo",x:aX,y:aY});this.currentX_=aX;this.currentY_=aY};contextPrototype.lineTo=function(aX,aY){this.currentPath_.push({type:"lineTo",x:aX,y:aY});this.currentX_=aX;this.currentY_=aY};contextPrototype.bezierCurveTo=function(aCP1x,aCP1y,aCP2x,aCP2y,aX,aY){this.currentPath_.push({type:"bezierCurveTo",cp1x:aCP1x,cp1y:aCP1y,cp2x:aCP2x,cp2y:aCP2y,x:aX,y:aY});this.currentX_=aX;this.currentY_=aY};contextPrototype.quadraticCurveTo=function(aCPx,aCPy,aX,aY){var cp1x=this.currentX_+2.0/3.0*(aCPx-this.currentX_);var cp1y=this.currentY_+2.0/3.0*(aCPy-this.currentY_);var cp2x=cp1x+(aX-this.currentX_)/3.0;var cp2y=cp1y+(aY-this.currentY_)/3.0;this.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,aX,aY)};contextPrototype.arc=function(aX,aY,aRadius,aStartAngle,aEndAngle,aClockwise){aRadius*=Z;var arcType=aClockwise?"at":"wa";var xStart=aX+(mc(aStartAngle)*aRadius)-Z2;var yStart=aY+(ms(aStartAngle)*aRadius)-Z2;var xEnd=aX+(mc(aEndAngle)*aRadius)-Z2;var yEnd=aY+(ms(aEndAngle)*aRadius)-Z2;if(xStart==xEnd&&!aClockwise){xStart+=0.125}this.currentPath_.push({type:arcType,x:aX,y:aY,radius:aRadius,xStart:xStart,yStart:yStart,xEnd:xEnd,yEnd:yEnd})};contextPrototype.rect=function(aX,aY,aWidth,aHeight){this.moveTo(aX,aY);this.lineTo(aX+aWidth,aY);this.lineTo(aX+aWidth,aY+aHeight);this.lineTo(aX,aY+aHeight);this.closePath()};contextPrototype.strokeRect=function(aX,aY,aWidth,aHeight){this.beginPath();this.moveTo(aX,aY);this.lineTo(aX+aWidth,aY);this.lineTo(aX+aWidth,aY+aHeight);this.lineTo(aX,aY+aHeight);this.closePath();this.stroke()};contextPrototype.fillRect=function(aX,aY,aWidth,aHeight){this.beginPath();this.moveTo(aX,aY);this.lineTo(aX+aWidth,aY);this.lineTo(aX+aWidth,aY+aHeight);this.lineTo(aX,aY+aHeight);this.closePath();this.fill()};contextPrototype.createLinearGradient=function(aX0,aY0,aX1,aY1){var gradient=new CanvasGradient_("gradient");return gradient};contextPrototype.createRadialGradient=function(aX0,aY0,aR0,aX1,aY1,aR1){var gradient=new CanvasGradient_("gradientradial");gradient.radius1_=aR0;gradient.radius2_=aR1;gradient.focus_.x=aX0;gradient.focus_.y=aY0;return gradient};contextPrototype.drawImage=function(image,var_args){var dx,dy,dw,dh,sx,sy,sw,sh;var oldRuntimeWidth=image.runtimeStyle.width;var oldRuntimeHeight=image.runtimeStyle.height;image.runtimeStyle.width='auto';image.runtimeStyle.height='auto';var w=image.width;var h=image.height;image.runtimeStyle.width=oldRuntimeWidth;image.runtimeStyle.height=oldRuntimeHeight;if(arguments.length==3){dx=arguments[1];dy=arguments[2];sx=sy=0;sw=dw=w;sh=dh=h}else if(arguments.length==5){dx=arguments[1];dy=arguments[2];dw=arguments[3];dh=arguments[4];sx=sy=0;sw=w;sh=h}else if(arguments.length==9){sx=arguments[1];sy=arguments[2];sw=arguments[3];sh=arguments[4];dx=arguments[5];dy=arguments[6];dw=arguments[7];dh=arguments[8]}else{throw"Invalid number of arguments";}var d=this.getCoords_(dx,dy);var w2=sw/2;var h2=sh/2;var vmlStr=[];var W=10;var H=10;vmlStr.push(' ','max.x){max.x=c.x}if(min.y==null||c.ymax.y){max.y=c.y}}}lineStr.push(' ">');if(typeof this.fillStyle=="object"){var focus={x:"50%",y:"50%"};var width=(max.x-min.x);var height=(max.y-min.y);var dimension=(width>height)?width:height;focus.x=mr((this.fillStyle.focus_.x/width)*100+50)+"%";focus.y=mr((this.fillStyle.focus_.y/height)*100+50)+"%";var colors=[];if(this.fillStyle.type_=="gradientradial"){var inside=(this.fillStyle.radius1_/dimension*100);var expansion=(this.fillStyle.radius2_/dimension*100)-inside}else{var inside=0;var expansion=100}var insidecolor={offset:null,color:null};var outsidecolor={offset:null,color:null};this.fillStyle.colors_.sort(function(cs1,cs2){return cs1.offset-cs2.offset});for(var i=0;iinsidecolor.offset||insidecolor.offset==null){insidecolor.offset=fs.offset;insidecolor.color=fs.color}if(fs.offset