cubicweb: comparison web/data/excanvas.js

Mercurial Mercurial > pub > hg > cubicweb / comparison

summary | shortlog | changelog | graph | tags | bookmarks | branches | files | changeset | file | latest | revisions | annotate | diff | comparison | raw | help

web/data/excanvas.js

branch	stable
changeset 4220	713434095f0d
parent 1888	f36d43f00f32
child 7621	55b2d0cce69b

equal deleted inserted replaced

-:87203a0a3a81
+:713434095f0d
 //   Quirks mode will draw the canvas using border-box. Either change your
 //   doctype to HTML5
 //   (http://www.whatwg.org/specs/web-apps/current-work/#the-doctype)
 //   or use Box Sizing Behavior from WebFX
 //   (http://webfx.eae.net/dhtml/boxsizing/boxsizing.html)
+// * Non uniform scaling does not correctly scale strokes.
 // * Optimize. There is always room for speed improvements.
-// only add this code if we do not already have a canvas implementation
+// Only add this code if we do not already have a canvas implementation
-if (!window.CanvasRenderingContext2D) {
+if (!document.createElement('canvas').getContext) {
-(function () {
+(function() {
 // alias some functions to make (compiled) code shorter
 var m = Math;
 var mr = m.round;
 var ms = m.sin;
 var mc = m.cos;
+var abs = m.abs;
+var sqrt = m.sqrt;
 // this is used for sub pixel precision
 var Z = 10;
 var Z2 = Z / 2;
+/**
+* This funtion is assigned to the <canvas> 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) {
+init: function(opt_doc) {
-var doc = opt_doc || document;
 if (/MSIE/.test(navigator.userAgent) && !window.opera) {
-var self = this;
+var doc = opt_doc || document;
-doc.attachEvent("onreadystatechange", function () {
+// Create a dummy element so that IE will allow canvas elements to be
-self.init_(doc);
+// recognized.
-});
+doc.createElement('canvas');
+doc.attachEvent('onreadystatechange', bind(this.init_, this, doc));
 }
 },
-init_: function (doc) {
+init_: function(doc) {
-if (doc.readyState == "complete") {
+// create xmlns
-// create xmlns
+if (!doc.namespaces['g_vml_']) {
-if (!doc.namespaces["g_vml_"]) {
+doc.namespaces.add('g_vml_', 'urn:schemas-microsoft-com:vml',
-doc.namespaces.add("g_vml_", "urn:schemas-microsoft-com:vml");
+'#default#VML');
-}
+}
-// setup default css
+if (!doc.namespaces['g_o_']) {
+doc.namespaces.add('g_o_', 'urn:schemas-microsoft-com:office:office',
+'#default#VML');
+}
+// 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}" +
+'text-align:left;width:300px;height:150px}' +
-"g_vml_\\:*{behavior:url(#default#VML)}";
+'g_vml_\\:*{behavior:url(#default#VML)}' +
+'g_o_\\:*{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) {
+// find all canvas elements
-this.initElement(els[i]);
+var els = doc.getElementsByTagName('canvas');
-}
+for (var i = 0; i < els.length; i++) {
-}
+this.initElement(els[i]);
 }
-},
-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();
-}
-}
-el.parentNode.replaceChild(newEl, el);
-return newEl;
 },
 /**
 * Public initializes a canvas element so that it can be used as canvas
 * element from now on. This is called automatically before the page is
 * loaded but if you are creating elements using createElement you need to
 * make sure this is called on the element.
 * @param {HTMLElement} el The canvas element to initialize.
 * @return {HTMLElement} the element that was created.
 */
-initElement: function (el) {
+initElement: function(el) {
-el = this.fixElement_(el);
+if (!el.getContext) {
-el.getContext = function () {
-if (this.context_) {
+el.getContext = getContext;
-return this.context_;
+// 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);
+if (attrs.height && attrs.height.specified) {
-};
+// TODO: use runtimeStyle and coordsize
+// el.getContext().setHeight_(attrs.height.nodeValue);
-// do not use inline function because that will leak memory
+el.style.height = attrs.height.nodeValue + 'px';
-el.attachEvent('onpropertychange', onPropertyChange);
+} else {
-el.attachEvent('onresize', onResize);
+el.height = el.clientHeight;
+}
-var attrs = el.attributes;
+//el.getContext().setCoordsize_()
-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;
-}
-//el.getContext().setCoordsize_()
 return el;
 }
 };
 function onPropertyChange(e) {
 var el = e.srcElement;
 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;
 }
 }
 o2.shadowBlur    = o1.shadowBlur;
 o2.shadowColor   = o1.shadowColor;
 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") {
+if (styleString.substring(0, 3) == 'rgb') {
-var start = styleString.indexOf("(", 3);
+var start = styleString.indexOf('(', 3);
-var end = styleString.indexOf(")", start + 1);
+var end = styleString.indexOf(')', start + 1);
-var guts = styleString.substring(start + 1, end).split(",");
+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":
+case 'butt':
-return "flat";
+return 'flat';
-case "round":
+case 'round':
-return "round";
+return 'round';
-case "square":
+case 'square':
 default:
-return "square";
+return 'square';
 }
 }
 /**
 * This class implements CanvasRenderingContext2D interface as described by
 * the WHATWG.
 * @param {HTMLElement} surfaceElement The element that the 2D context should
 * be associated with
 */
 function CanvasRenderingContext2D_(surfaceElement) {
 this.m_ = createMatrixIdentity();
 this.mStack_ = [];
 this.aStack_ = [];
 this.currentPath_ = [];
 // Canvas context properties
-this.strokeStyle = "#000";
+this.strokeStyle = '#000';
-this.fillStyle = "#000";
+this.fillStyle = '#000';
 this.lineWidth = 1;
-this.lineJoin = "miter";
+this.lineJoin = 'miter';
-this.lineCap = "butt";
+this.lineCap = 'butt';
 this.miterLimit = Z * 1;
 this.globalAlpha = 1;
 this.canvas = surfaceElement;
 var el = surfaceElement.ownerDocument.createElement('div');
 surfaceElement.appendChild(el);
 this.element_ = el;
 this.arcScaleX_ = 1;
 this.arcScaleY_ = 1;
+this.lineScale_ = 1;
 }
 var contextPrototype = CanvasRenderingContext2D_.prototype;
 contextPrototype.clearRect = function() {
-this.element_.innerHTML = "";
+this.element_.innerHTML = '';
-this.currentPath_ = [];
 };
 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});
+var p = this.getCoords_(aX, aY);
-this.currentX_ = aX;
+this.currentPath_.push({type: 'moveTo', x: p.x, y: p.y});
-this.currentY_ = aY;
+this.currentX_ = p.x;
+this.currentY_ = p.y;
 };
 contextPrototype.lineTo = function(aX, aY) {
-this.currentPath_.push({type: "lineTo", x: aX, y: aY});
+var p = this.getCoords_(aX, aY);
-this.currentX_ = aX;
+this.currentPath_.push({type: 'lineTo', x: p.x, y: p.y});
-this.currentY_ = aY;
+this.currentX_ = p.x;
+this.currentY_ = p.y;
 };
 contextPrototype.bezierCurveTo = function(aCP1x, aCP1y,
 aCP2x, aCP2y,
 aX, aY) {
-this.currentPath_.push({type: "bezierCurveTo",
+var p = this.getCoords_(aX, aY);
-cp1x: aCP1x,
+var cp1 = this.getCoords_(aCP1x, aCP1y);
-cp1y: aCP1y,
+var cp2 = this.getCoords_(aCP2x, aCP2y);
-cp2x: aCP2x,
+bezierCurveTo(this, cp1, cp2, p);
-cp2y: aCP2y,
+};
-x: aX,
-y: aY});
+// Helper function that takes the already fixed cordinates.
-this.currentX_ = aX;
+function bezierCurveTo(self, cp1, cp2, p) {
-this.currentY_ = aY;
+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 cp = this.getCoords_(aCPx, aCPy);
-var cp2x = cp1x + (aX - this.currentX_) / 3.0;
+var p = this.getCoords_(aX, aY);
-var cp2y = cp1y + (aY - this.currentY_) / 3.0;
-this.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, 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 xStart = aX + mc(aStartAngle) * aRadius - Z2;
-var yStart = aY + (ms(aStartAngle) * aRadius) - Z2;
+var yStart = aY + ms(aStartAngle) * aRadius - Z2;
-var xEnd = aX + (mc(aEndAngle) * aRadius) - Z2;
+var xEnd = aX + mc(aEndAngle) * aRadius - Z2;
-var yEnd = aY + (ms(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) {
 xStart += 0.125; // Offset xStart by 1/80 of a pixel. Use something
 // 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,
+x: p.x,
-y: aY,
+y: p.y,
 radius: aRadius,
-xStart: xStart,
+xStart: pStart.x,
-yStart: yStart,
+yStart: pStart.y,
-xEnd: xEnd,
+xEnd: pEnd.x,
-yEnd: yEnd});
+yEnd: pEnd.y});
 };
 contextPrototype.rect = function(aX, aY, aWidth, aHeight) {
 this.moveTo(aX, aY);
 this.lineTo(aX, aY + aHeight);
 this.closePath();
 };
 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,
+contextPrototype.createRadialGradient = function(aX0, aY0, aR0,
-aR0, aX1,
+aX1, aY1, aR1) {
-aY1, aR1) {
+var gradient = new CanvasGradient_('gradientradial');
-var gradient = new CanvasGradient_("gradientradial");
+gradient.x0_ = aX0;
-gradient.radius1_ = aR0;
+gradient.y0_ = aY0;
-gradient.radius2_ = aR1;
+gradient.r0_ = aR0;
-gradient.focus_.x = aX0;
+gradient.x1_ = aX1;
-gradient.focus_.y = aY0;
+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
 var oldRuntimeWidth = image.runtimeStyle.width;
 var oldRuntimeHeight = image.runtimeStyle.height;
 dx = arguments[5];
 dy = arguments[6];
 dw = arguments[7];
 dh = arguments[8];
 } else {
-throw "Invalid number of arguments";
+throw Error('Invalid number of arguments');
 }
 var d = this.getCoords_(dx, dy);
 var w2 = sw / 2;
 // For some reason that I've now forgotten, using divs didn't work
 vmlStr.push(' <g_vml_:group',
 ' coordsize="', Z * W, ',', Z * H, '"',
 ' coordorigin="0,0"' ,
-' style="width:', W, ';height:', H, ';position:absolute;');
+' style="width:', W, 'px;height:', H, 'px;position:absolute;');
 // If filters are necessary (rotation exists), create them
 // filters are bog-slow, so only create them if abbsolutely necessary
 // The following check doesn't account for skews (which don't exist
 // in the canvas spec (yet) anyway.
 if (this.m_[0][0] != 1 || this.m_[0][1]) {
 var filter = [];
 // Note the 12/21 reversal
-filter.push("M11='", this.m_[0][0], "',",
+filter.push('M11=', this.m_[0][0], ',',
-"M12='", this.m_[1][0], "',",
+'M12=', this.m_[1][0], ',',
-"M21='", this.m_[0][1], "',",
+'M21=', this.m_[0][1], ',',
-"M22='", this.m_[1][1], "',",
+'M22=', this.m_[1][1], ',',
-"Dx='", mr(d.x / Z), "',",
+'Dx=', mr(d.x / Z), ',',
-"Dy='", mr(d.y / Z), "'");
+'Dy=', mr(d.y / Z), '');
 // Bounding box calculation (need to minimize displayed area so that
 // filters don't waste time on unused pixels.
 var max = d;
 var c2 = this.getCoords_(dx + dw, dy);
 var c3 = this.getCoords_(dx, dy + dh);
 var c4 = this.getCoords_(dx + dw, dy + dh);
-max.x = Math.max(max.x, c2.x, c3.x, c4.x);
+max.x = m.max(max.x, c2.x, c3.x, c4.x);
-max.y = Math.max(max.y, c2.y, c3.y, c4.y);
+max.y = m.max(max.y, c2.y, c3.y, c4.y);
-vmlStr.push("padding:0 ", mr(max.x / Z), "px ", mr(max.y / Z),
+vmlStr.push('padding:0 ', mr(max.x / Z), 'px ', mr(max.y / Z),
-"px 0;filter:progid:DXImageTransform.Microsoft.Matrix(",
+'px 0;filter:progid:DXImageTransform.Microsoft.Matrix(',
-filter.join(""), ", sizingmethod='clip');");
+filter.join(''), ", sizingmethod='clip');")
 } else {
-vmlStr.push("top:", mr(d.y / Z), "px;left:", mr(d.x / Z), "px;");
+vmlStr.push('top:', mr(d.y / Z), 'px;left:', mr(d.x / Z), 'px;');
 }
 vmlStr.push(' ">' ,
 '<g_vml_:image src="', image.src, '"',
-' style="width:', Z * dw, ';',
+' style="width:', Z * dw, 'px;',
-' height:', Z * dh, ';"',
+' height:', Z * dh, 'px;"',
 ' cropleft="', sx / w, '"',
 ' croptop="', sy / h, '"',
 ' cropright="', (w - sx - sw) / w, '"',
 ' cropbottom="', (h - sy - sh) / h, '"',
 ' />',
 '</g_vml_:group>');
-this.element_.insertAdjacentHTML("BeforeEnd",
+this.element_.insertAdjacentHTML('BeforeEnd',
-vmlStr.join(""));
+vmlStr.join(''));
 };
 contextPrototype.stroke = function(aFill) {
 var lineStr = [];
 var lineOpen = false;
 var a = processStyle(aFill ? this.fillStyle : this.strokeStyle);
-var color = a[0];
+var color = a.color;
-var opacity = a[1] * this.globalAlpha;
+var opacity = a.alpha * this.globalAlpha;
 var W = 10;
 var H = 10;
 lineStr.push('<g_vml_:shape',
-' fillcolor="', color, '"',
+' filled="', !!aFill, '"',
-' filled="', Boolean(aFill), '"',
+' style="position:absolute;width:', W, 'px;height:', H, 'px;"',
-' style="position:absolute;width:', W, ';height:', H, ';"',
 ' coordorigin="0 0" coordsize="', Z * W, ' ', Z * H, '"',
 ' stroked="', !aFill, '"',
-' strokeweight="', this.lineWidth, '"',
-' strokecolor="', color, '"',
 ' path="');
 var newSeq = false;
 var min = {x: null, y: null};
 var max = {x: null, y: null};
 for (var i = 0; i < this.currentPath_.length; i++) {
 var p = this.currentPath_[i];
+var c;
-if (p.type == "moveTo") {
-lineStr.push(" m ");
+switch (p.type) {
-var c = this.getCoords_(p.x, p.y);
+case 'moveTo':
-lineStr.push(mr(c.x), ",", mr(c.y));
+c = p;
-} else if (p.type == "lineTo") {
+lineStr.push(' m ', mr(p.x), ',', mr(p.y));
-lineStr.push(" l ");
+break;
-var c = this.getCoords_(p.x, p.y);
+case 'lineTo':
-lineStr.push(mr(c.x), ",", mr(c.y));
+lineStr.push(' l ', mr(p.x), ',', mr(p.y));
-} else if (p.type == "close") {
+break;
-lineStr.push(" x ");
+case 'close':
-} else if (p.type == "bezierCurveTo") {
+lineStr.push(' x ');
-lineStr.push(" c ");
+p = null;
-var c = this.getCoords_(p.x, p.y);
+break;
-var c1 = this.getCoords_(p.cp1x, p.cp1y);
+case 'bezierCurveTo':
-var c2 = this.getCoords_(p.cp2x, p.cp2y);
+lineStr.push(' c ',
-lineStr.push(mr(c1.x), ",", mr(c1.y), ",",
+mr(p.cp1x), ',', mr(p.cp1y), ',',
-mr(c2.x), ",", mr(c2.y), ",",
+mr(p.cp2x), ',', mr(p.cp2y), ',',
-mr(c.x), ",", mr(c.y));
+mr(p.x), ',', mr(p.y));
-} else if (p.type == "at" || p.type == "wa") {
+break;
-lineStr.push(" ", p.type, " ");
+case 'at':
-var c  = this.getCoords_(p.x, p.y);
+case 'wa':
-var cStart = this.getCoords_(p.xStart, p.yStart);
+lineStr.push(' ', p.type, ' ',
-var cEnd = this.getCoords_(p.xEnd, p.yEnd);
+mr(p.x - this.arcScaleX_ * p.radius), ',',
+mr(p.y - this.arcScaleY_ * p.radius), ' ',
-lineStr.push(mr(c.x - this.arcScaleX_ * p.radius), ",",
+mr(p.x + this.arcScaleX_ * p.radius), ',',
-mr(c.y - this.arcScaleY_ * p.radius), " ",
+mr(p.y + this.arcScaleY_ * p.radius), ' ',
-mr(c.x + this.arcScaleX_ * p.radius), ",",
+mr(p.xStart), ',', mr(p.yStart), ' ',
-mr(c.y + this.arcScaleY_ * p.radius), " ",
+mr(p.xEnd), ',', mr(p.yEnd));
-mr(cStart.x), ",", mr(cStart.y), " ",
+break;
-mr(cEnd.x), ",", mr(cEnd.y));
 }
 // TODO: Following is broken for curves due to
 //       move to proper paths.
 // Figure out dimensions so we can do gradient fills
 // properly
-if(c) {
+if (p) {
-if (min.x == null || c.x < min.x) {
+if (min.x == null || p.x < min.x) {
-min.x = c.x;
+min.x = p.x;
 }
-if (max.x == null || c.x > max.x) {
+if (max.x == null || p.x > max.x) {
-max.x = c.x;
+max.x = p.x;
 }
-if (min.y == null || c.y < min.y) {
+if (min.y == null || p.y < min.y) {
-min.y = c.y;
+min.y = p.y;
 }
-if (max.y == null || c.y > max.y) {
+if (max.y == null || p.y > max.y) {
-max.y = c.y;
+max.y = p.y;
 }
 }
 }
 lineStr.push(' ">');
-if (typeof this.fillStyle == "object") {
+if (!aFill) {
-var focus = {x: "50%", y: "50%"};
+var lineWidth = this.lineScale_ * this.lineWidth;
-var width = (max.x - min.x);
-var height = (max.y - min.y);
+// VML cannot correctly render a line if the width is less than 1px.
-var dimension = (width > height) ? width : height;
+// In that case, we dilute the color to make the line look thinner.
+if (lineWidth < 1) {
-focus.x = mr((this.fillStyle.focus_.x / width) * 100 + 50) + "%";
+opacity *= lineWidth;
-focus.y = mr((this.fillStyle.focus_.y / height) * 100 + 50) + "%";
+}
-var colors = [];
+lineStr.push(
+'<g_vml_:stroke',
-// inside radius (%)
+' opacity="', opacity, '"',
-if (this.fillStyle.type_ == "gradientradial") {
+' joinstyle="', this.lineJoin, '"',
-var inside = (this.fillStyle.radius1_ / dimension * 100);
+' miterlimit="', this.miterLimit, '"',
+' endcap="', processLineCap(this.lineCap), '"',
-// percentage that outside radius exceeds inside radius
+' weight="', lineWidth, 'px"',
-var expansion = (this.fillStyle.radius2_ / dimension * 100) - inside;
+' color="', color, '" />'
+);
+} else if (typeof this.fillStyle == 'object') {
+var fillStyle = this.fillStyle;
+var angle = 0;
+var focus = {x: 0, y: 0};
+// additional offset
+var shift = 0;
+// scale factor for offset
+var expansion = 1;
+if (fillStyle.type_ == 'gradient') {
+var x0 = fillStyle.x0_ / this.arcScaleX_;
+var y0 = fillStyle.y0_ / this.arcScaleY_;
+var x1 = fillStyle.x1_ / this.arcScaleX_;
+var y1 = fillStyle.y1_ / this.arcScaleY_;
+var p0 = this.getCoords_(x0, y0);
+var p1 = this.getCoords_(x1, y1);
+var dx = p1.x - p0.x;
+var dy = p1.y - p0.y;
+angle = Math.atan2(dx, dy) * 180 / Math.PI;
+// The angle should be a non-negative number.
+if (angle < 0) {
+angle += 360;
+}
+// Very small angles produce an unexpected result because they are
+// converted to a scientific notation string.
+if (angle < 1e-6) {
+angle = 0;
+}
 } else {
-var inside = 0;
+var p0 = this.getCoords_(fillStyle.x0_, fillStyle.y0_);
-var expansion = 100;
+var width  = max.x - min.x;
-}
+var height = max.y - min.y;
+focus = {
-var insidecolor = {offset: null, color: null};
+x: (p0.x - min.x) / width,
-var outsidecolor = {offset: null, color: null};
+y: (p0.y - min.y) / height
+};
-// We need to sort 'colors' by percentage, from 0 > 100 otherwise ie
-// won't interpret it correctly
+width  /= this.arcScaleX_ * Z;
-this.fillStyle.colors_.sort(function (cs1, cs2) {
+height /= this.arcScaleY_ * Z;
+var dimension = m.max(width, height);
+shift = 2 * fillStyle.r0_ / dimension;
+expansion = 2 * fillStyle.r1_ / dimension - shift;
+}
+// We need to sort the color stops in ascending order by offset,
+// otherwise IE won't interpret it correctly.
+var stops = fillStyle.colors_;
+stops.sort(function(cs1, cs2) {
 return cs1.offset - cs2.offset;
 });
-for (var i = 0; i < this.fillStyle.colors_.length; i++) {
+var length = stops.length;
-var fs = this.fillStyle.colors_[i];
+var color1 = stops[0].color;
+var color2 = stops[length - 1].color;
-colors.push( (fs.offset * expansion) + inside, "% ", fs.color, ",");
+var opacity1 = stops[0].alpha * this.globalAlpha;
+var opacity2 = stops[length - 1].alpha * this.globalAlpha;
-if (fs.offset > insidecolor.offset || insidecolor.offset == null) {
-insidecolor.offset = fs.offset;
+var colors = [];
-insidecolor.color = fs.color;
+for (var i = 0; i < length; i++) {
-}
+var stop = stops[i];
+colors.push(stop.offset * expansion + shift + ' ' + stop.color);
-if (fs.offset < outsidecolor.offset || outsidecolor.offset == null) {
+}
-outsidecolor.offset = fs.offset;
-outsidecolor.color = fs.color;
+// When colors attribute is used, the meanings of opacity and o:opacity2
-}
+// are reversed.
-}
+lineStr.push('<g_vml_:fill type="', fillStyle.type_, '"',
-colors.pop();
+' method="none" focus="100%"',
+' color="', color1, '"',
-lineStr.push('<g_vml_:fill',
+' color2="', color2, '"',
-' color="', outsidecolor.color, '"',
+' colors="', colors.join(','), '"',
-' color2="', insidecolor.color, '"',
+' opacity="', opacity2, '"',
-' type="', this.fillStyle.type_, '"',
+' g_o_:opacity2="', opacity1, '"',
-' focusposition="', focus.x, ', ', focus.y, '"',
+' angle="', angle, '"',
-' colors="', colors.join(""), '"',
+' focusposition="', focus.x, ',', focus.y, '" />');
-' opacity="', opacity, '" />');
-} else if (aFill) {
-lineStr.push('<g_vml_:fill color="', color, '" opacity="', opacity, '" />');
 } else {
-lineStr.push(
+lineStr.push('<g_vml_:fill color="', color, '" opacity="', opacity,
-'<g_vml_:stroke',
+'" />');
-' opacity="', opacity,'"',
+}
-' joinstyle="', this.lineJoin, '"',
-' miterlimit="', this.miterLimit, '"',
+lineStr.push('</g_vml_:shape>');
-' endcap="', processLineCap(this.lineCap) ,'"',
-' weight="', this.lineWidth, 'px"',
+this.element_.insertAdjacentHTML('beforeEnd', lineStr.join(''));
-' color="', color,'" />'
-);
-}
-lineStr.push("</g_vml_:shape>");
-this.element_.insertAdjacentHTML("beforeEnd", lineStr.join(""));
-//this.currentPath_ = [];
 };
 contextPrototype.fill = function() {
 this.stroke(true);
-};
+}
 contextPrototype.closePath = function() {
-this.currentPath_.push({type: "close"});
+this.currentPath_.push({type: 'close'});
 };
 /**
 * @private
 */
 contextPrototype.getCoords_ = function(aX, aY) {
+var m = this.m_;
 return {
-x: Z * (aX * this.m_[0][0] + aY * this.m_[1][0] + this.m_[2][0]) - Z2,
+x: Z * (aX * m[0][0] + aY * m[1][0] + m[2][0]) - Z2,
-y: Z * (aX * this.m_[0][1] + aY * this.m_[1][1] + this.m_[2][1]) - Z2
+y: Z * (aX * m[0][1] + aY * m[1][1] + m[2][1]) - Z2
 }
 };
 contextPrototype.save = function() {
 var o = {};
 contextPrototype.restore = function() {
 copyState(this.aStack_.pop(), this);
 this.m_ = this.mStack_.pop();
 };
+function matrixIsFinite(m) {
+for (var j = 0; j < 3; j++) {
+for (var k = 0; k < 2; k++) {
+if (!isFinite(m[j][k]) || isNaN(m[j][k])) {
+return false;
+}
+}
+}
+return true;
+}
+function setM(ctx, m, updateLineScale) {
+if (!matrixIsFinite(m)) {
+return;
+}
+ctx.m_ = m;
+if (updateLineScale) {
+// Get the line scale.
+// Determinant of this.m_ means how much the area is enlarged by the
+// transformation. So its square root can be used as a scale factor
+// for width.
+var det = m[0][0] * m[1][1] - m[0][1] * m[1][0];
+ctx.lineScale_ = sqrt(abs(det));
+}
+}
 contextPrototype.translate = function(aX, aY) {
 var m1 = [
 [1,  0,  0],
 [0,  1,  0],
 [aX, aY, 1]
 ];
-this.m_ = matrixMultiply(m1, this.m_);
+setM(this, matrixMultiply(m1, this.m_), false);
 };
 contextPrototype.rotate = function(aRot) {
 var c = mc(aRot);
 var s = ms(aRot);
 [c,  s, 0],
 [-s, c, 0],
 [0,  0, 1]
 ];
-this.m_ = matrixMultiply(m1, this.m_);
+setM(this, matrixMultiply(m1, this.m_), false);
 };
 contextPrototype.scale = function(aX, aY) {
 this.arcScaleX_ *= aX;
 this.arcScaleY_ *= aY;
 [aX, 0,  0],
 [0,  aY, 0],
 [0,  0,  1]
 ];
-this.m_ = matrixMultiply(m1, this.m_);
+setM(this, matrixMultiply(m1, this.m_), true);
+};
+contextPrototype.transform = function(m11, m12, m21, m22, dx, dy) {
+var m1 = [
+[m11, m12, 0],
+[m21, m22, 0],
+[dx,  dy,  1]
+];
+setM(this, matrixMultiply(m1, this.m_), true);
+};
+contextPrototype.setTransform = function(m11, m12, m21, m22, dx, dy) {
+var m = [
+[m11, m12, 0],
+[m21, m22, 0],
+[dx,  dy,  1]
+];
+setM(this, m, true);
 };
 /******** STUBS ********/
 contextPrototype.clip = function() {
 // TODO: Implement
 };
 // Gradient / Pattern Stubs
 function CanvasGradient_(aType) {
 this.type_ = aType;
-this.radius1_ = 0;
+this.x0_ = 0;
-this.radius2_ = 0;
+this.y0_ = 0;
+this.r0_ = 0;
+this.x1_ = 0;
+this.y1_ = 0;
+this.r1_ = 0;
 this.colors_ = [];
-this.focus_ = {x: 0, y: 0};
 }
 CanvasGradient_.prototype.addColorStop = function(aOffset, aColor) {
 aColor = processStyle(aColor);
-this.colors_.push({offset: 1-aOffset, color: aColor});
+this.colors_.push({offset: aOffset,
+color: aColor.color,
+alpha: aColor.alpha});
 };
 function CanvasPattern_() {}
 // set up externs

cubicweb