1 // Copyright 2006 Google Inc.
3 // Licensed under the Apache License, Version 2.0 (the "License");
4 // you may not use this file except in compliance with the License.
5 // You may obtain a copy of the License at
7 // http://www.apache.org/licenses/LICENSE-2.0
9 // Unless required by applicable law or agreed to in writing, software
10 // distributed under the License is distributed on an "AS IS" BASIS,
11 // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
12 // See the License for the specific language governing permissions and
13 // limitations under the License.
18 // * Patterns only support repeat.
19 // * Radial gradient are not implemented. The VML version of these look very
20 // different from the canvas one.
21 // * Clipping paths are not implemented.
22 // * Coordsize. The width and height attribute have higher priority than the
23 // width and height style values which isn't correct.
24 // * Painting mode isn't implemented.
25 // * Canvas width/height should is using content-box by default. IE in
26 // Quirks mode will draw the canvas using border-box. Either change your
28 // (http://www.whatwg.org/specs/web-apps/current-work/#the-doctype)
29 // or use Box Sizing Behavior from WebFX
30 // (http://webfx.eae.net/dhtml/boxsizing/boxsizing.html)
31 // * Non uniform scaling does not correctly scale strokes.
32 // * Optimize. There is always room for speed improvements.
34 // Only add this code if we do not already have a canvas implementation
35 if (!document.createElement('canvas').getContext) {
39 // alias some functions to make (compiled) code shorter
47 // this is used for sub pixel precision
51 var IE_VERSION = +navigator.userAgent.match(/MSIE ([\d.]+)?/)[1];
54 * This funtion is assigned to the <canvas> elements as element.getContext().
56 * @return {CanvasRenderingContext2D_}
58 function getContext() {
59 return this.context_ ||
60 (this.context_ = new CanvasRenderingContext2D_(this));
63 var slice = Array.prototype.slice;
66 * Binds a function to an object. The returned function will always use the
67 * passed in {@code obj} as {@code this}.
71 * g = bind(f, obj, a, b)
72 * g(c, d) // will do f.call(obj, a, b, c, d)
74 * @param {Function} f The function to bind the object to
75 * @param {Object} obj The object that should act as this when the function
77 * @param {*} var_args Rest arguments that will be used as the initial
78 * arguments when the function is called
79 * @return {Function} A new function that has bound this
81 function bind(f, obj, var_args) {
82 var a = slice.call(arguments, 2);
84 return f.apply(obj, a.concat(slice.call(arguments)));
88 function encodeHtmlAttribute(s) {
89 return String(s).replace(/&/g, '&').replace(/"/g, '"');
92 function addNamespace(doc, prefix, urn) {
93 if (!doc.namespaces[prefix]) {
94 if (IE_VERSION >= 7) {
95 doc.namespaces.add(prefix, urn).doImport('#default#VML');
97 // IE6 cannot handle the third argument.
98 doc.namespaces.add(prefix, urn);
103 function addNamespacesAndStylesheet(doc) {
104 addNamespace(doc, 'g_vml_', 'urn:schemas-microsoft-com:vml');
105 addNamespace(doc, 'g_o_', 'urn:schemas-microsoft-com:office:office');
107 // Setup default CSS. Only add one style sheet per document
108 if (!doc.styleSheets['ex_canvas_']) {
109 var ss = doc.createStyleSheet();
110 ss.owningElement.id = 'ex_canvas_';
111 ss.cssText = 'canvas{display:inline-block;overflow:hidden;' +
112 // default size is 300x150 in Gecko and Opera
113 'text-align:left;width:300px;height:150px}';
117 // Add namespaces and stylesheet at startup.
118 addNamespacesAndStylesheet(document);
120 var G_vmlCanvasManager_ = {
121 init: function(opt_doc) {
122 var doc = opt_doc || document;
123 // Create a dummy element so that IE will allow canvas elements to be
125 doc.createElement('canvas');
126 doc.attachEvent('onreadystatechange', bind(this.init_, this, doc));
129 init_: function(doc) {
130 // find all canvas elements
131 var els = doc.getElementsByTagName('canvas');
132 for (var i = 0; i < els.length; i++) {
133 this.initElement(els[i]);
138 * Public initializes a canvas element so that it can be used as canvas
139 * element from now on. This is called automatically before the page is
140 * loaded but if you are creating elements using createElement you need to
141 * make sure this is called on the element.
142 * @param {HTMLElement} el The canvas element to initialize.
143 * @return {HTMLElement} the element that was created.
145 initElement: function(el) {
146 if (!el.getContext) {
147 el.getContext = getContext;
149 // Add namespaces and stylesheet to document of the element.
150 addNamespacesAndStylesheet(el.ownerDocument);
152 // Remove fallback content. There is no way to hide text nodes so we
153 // just remove all childNodes. We could hide all elements and remove
154 // text nodes but who really cares about the fallback content.
157 // do not use inline function because that will leak memory
158 el.attachEvent('onpropertychange', onPropertyChange);
159 el.attachEvent('onresize', onResize);
161 var attrs = el.attributes;
162 if (attrs.width && attrs.width.specified) {
163 // TODO: use runtimeStyle and coordsize
164 // el.getContext().setWidth_(attrs.width.nodeValue);
165 el.style.width = attrs.width.nodeValue + 'px';
167 el.width = el.clientWidth;
169 if (attrs.height && attrs.height.specified) {
170 // TODO: use runtimeStyle and coordsize
171 // el.getContext().setHeight_(attrs.height.nodeValue);
172 el.style.height = attrs.height.nodeValue + 'px';
174 el.height = el.clientHeight;
176 //el.getContext().setCoordsize_()
182 function onPropertyChange(e) {
183 var el = e.srcElement;
185 switch (e.propertyName) {
187 el.getContext().clearRect();
188 el.style.width = el.attributes.width.nodeValue + 'px';
189 // In IE8 this does not trigger onresize.
190 el.firstChild.style.width = el.clientWidth + 'px';
193 el.getContext().clearRect();
194 el.style.height = el.attributes.height.nodeValue + 'px';
195 el.firstChild.style.height = el.clientHeight + 'px';
200 function onResize(e) {
201 var el = e.srcElement;
203 el.firstChild.style.width = el.clientWidth + 'px';
204 el.firstChild.style.height = el.clientHeight + 'px';
208 G_vmlCanvasManager_.init();
210 // precompute "00" to "FF"
212 for (var i = 0; i < 16; i++) {
213 for (var j = 0; j < 16; j++) {
214 decToHex[i * 16 + j] = i.toString(16) + j.toString(16);
218 function createMatrixIdentity() {
226 function matrixMultiply(m1, m2) {
227 var result = createMatrixIdentity();
229 for (var x = 0; x < 3; x++) {
230 for (var y = 0; y < 3; y++) {
233 for (var z = 0; z < 3; z++) {
234 sum += m1[x][z] * m2[z][y];
243 function copyState(o1, o2) {
244 o2.fillStyle = o1.fillStyle;
245 o2.lineCap = o1.lineCap;
246 o2.lineJoin = o1.lineJoin;
247 o2.lineWidth = o1.lineWidth;
248 o2.miterLimit = o1.miterLimit;
249 o2.shadowBlur = o1.shadowBlur;
250 o2.shadowColor = o1.shadowColor;
251 o2.shadowOffsetX = o1.shadowOffsetX;
252 o2.shadowOffsetY = o1.shadowOffsetY;
253 o2.strokeStyle = o1.strokeStyle;
254 o2.globalAlpha = o1.globalAlpha;
256 o2.textAlign = o1.textAlign;
257 o2.textBaseline = o1.textBaseline;
258 o2.arcScaleX_ = o1.arcScaleX_;
259 o2.arcScaleY_ = o1.arcScaleY_;
260 o2.lineScale_ = o1.lineScale_;
264 aliceblue: '#F0F8FF',
265 antiquewhite: '#FAEBD7',
266 aquamarine: '#7FFFD4',
271 blanchedalmond: '#FFEBCD',
272 blueviolet: '#8A2BE2',
274 burlywood: '#DEB887',
275 cadetblue: '#5F9EA0',
276 chartreuse: '#7FFF00',
277 chocolate: '#D2691E',
279 cornflowerblue: '#6495ED',
285 darkgoldenrod: '#B8860B',
287 darkgreen: '#006400',
289 darkkhaki: '#BDB76B',
290 darkmagenta: '#8B008B',
291 darkolivegreen: '#556B2F',
292 darkorange: '#FF8C00',
293 darkorchid: '#9932CC',
295 darksalmon: '#E9967A',
296 darkseagreen: '#8FBC8F',
297 darkslateblue: '#483D8B',
298 darkslategray: '#2F4F4F',
299 darkslategrey: '#2F4F4F',
300 darkturquoise: '#00CED1',
301 darkviolet: '#9400D3',
303 deepskyblue: '#00BFFF',
306 dodgerblue: '#1E90FF',
307 firebrick: '#B22222',
308 floralwhite: '#FFFAF0',
309 forestgreen: '#228B22',
310 gainsboro: '#DCDCDC',
311 ghostwhite: '#F8F8FF',
313 goldenrod: '#DAA520',
315 greenyellow: '#ADFF2F',
318 indianred: '#CD5C5C',
323 lavenderblush: '#FFF0F5',
324 lawngreen: '#7CFC00',
325 lemonchiffon: '#FFFACD',
326 lightblue: '#ADD8E6',
327 lightcoral: '#F08080',
328 lightcyan: '#E0FFFF',
329 lightgoldenrodyellow: '#FAFAD2',
330 lightgreen: '#90EE90',
331 lightgrey: '#D3D3D3',
332 lightpink: '#FFB6C1',
333 lightsalmon: '#FFA07A',
334 lightseagreen: '#20B2AA',
335 lightskyblue: '#87CEFA',
336 lightslategray: '#778899',
337 lightslategrey: '#778899',
338 lightsteelblue: '#B0C4DE',
339 lightyellow: '#FFFFE0',
340 limegreen: '#32CD32',
343 mediumaquamarine: '#66CDAA',
344 mediumblue: '#0000CD',
345 mediumorchid: '#BA55D3',
346 mediumpurple: '#9370DB',
347 mediumseagreen: '#3CB371',
348 mediumslateblue: '#7B68EE',
349 mediumspringgreen: '#00FA9A',
350 mediumturquoise: '#48D1CC',
351 mediumvioletred: '#C71585',
352 midnightblue: '#191970',
353 mintcream: '#F5FFFA',
354 mistyrose: '#FFE4E1',
356 navajowhite: '#FFDEAD',
358 olivedrab: '#6B8E23',
360 orangered: '#FF4500',
362 palegoldenrod: '#EEE8AA',
363 palegreen: '#98FB98',
364 paleturquoise: '#AFEEEE',
365 palevioletred: '#DB7093',
366 papayawhip: '#FFEFD5',
367 peachpuff: '#FFDAB9',
371 powderblue: '#B0E0E6',
372 rosybrown: '#BC8F8F',
373 royalblue: '#4169E1',
374 saddlebrown: '#8B4513',
376 sandybrown: '#F4A460',
381 slateblue: '#6A5ACD',
382 slategray: '#708090',
383 slategrey: '#708090',
385 springgreen: '#00FF7F',
386 steelblue: '#4682B4',
390 turquoise: '#40E0D0',
393 whitesmoke: '#F5F5F5',
394 yellowgreen: '#9ACD32'
398 function getRgbHslContent(styleString) {
399 var start = styleString.indexOf('(', 3);
400 var end = styleString.indexOf(')', start + 1);
401 var parts = styleString.substring(start + 1, end).split(',');
402 // add alpha if needed
403 if (parts.length != 4 || styleString.charAt(3) != 'a') {
409 function percent(s) {
410 return parseFloat(s) / 100;
413 function clamp(v, min, max) {
414 return Math.min(max, Math.max(min, v));
417 function hslToRgb(parts){
418 var r, g, b, h, s, l;
419 h = parseFloat(parts[0]) / 360 % 360;
422 s = clamp(percent(parts[1]), 0, 1);
423 l = clamp(percent(parts[2]), 0, 1);
425 r = g = b = l; // achromatic
427 var q = l < 0.5 ? l * (1 + s) : l + s - l * s;
429 r = hueToRgb(p, q, h + 1 / 3);
430 g = hueToRgb(p, q, h);
431 b = hueToRgb(p, q, h - 1 / 3);
434 return '#' + decToHex[Math.floor(r * 255)] +
435 decToHex[Math.floor(g * 255)] +
436 decToHex[Math.floor(b * 255)];
439 function hueToRgb(m1, m2, h) {
446 return m1 + (m2 - m1) * 6 * h;
450 return m1 + (m2 - m1) * (2 / 3 - h) * 6;
455 function processStyle(styleString) {
458 styleString = String(styleString);
459 if (styleString.charAt(0) == '#') {
461 } else if (/^rgb/.test(styleString)) {
462 var parts = getRgbHslContent(styleString);
464 for (var i = 0; i < 3; i++) {
465 if (parts[i].indexOf('%') != -1) {
466 n = Math.floor(percent(parts[i]) * 255);
470 str += decToHex[clamp(n, 0, 255)];
473 } else if (/^hsl/.test(styleString)) {
474 var parts = getRgbHslContent(styleString);
475 str = hslToRgb(parts);
478 str = colorData[styleString] || styleString;
480 return {color: str, alpha: alpha};
483 var DEFAULT_STYLE = {
491 // Internal text style cache
492 var fontStyleCache = {};
494 function processFontStyle(styleString) {
495 if (fontStyleCache[styleString]) {
496 return fontStyleCache[styleString];
499 var el = document.createElement('div');
500 var style = el.style;
502 style.font = styleString;
504 // Ignore failures to set to invalid font.
507 return fontStyleCache[styleString] = {
508 style: style.fontStyle || DEFAULT_STYLE.style,
509 variant: style.fontVariant || DEFAULT_STYLE.variant,
510 weight: style.fontWeight || DEFAULT_STYLE.weight,
511 size: style.fontSize || DEFAULT_STYLE.size,
512 family: style.fontFamily || DEFAULT_STYLE.family
516 function getComputedStyle(style, element) {
517 var computedStyle = {};
519 for (var p in style) {
520 computedStyle[p] = style[p];
524 var canvasFontSize = parseFloat(element.currentStyle.fontSize),
525 fontSize = parseFloat(style.size);
527 if (typeof style.size == 'number') {
528 computedStyle.size = style.size;
529 } else if (style.size.indexOf('px') != -1) {
530 computedStyle.size = fontSize;
531 } else if (style.size.indexOf('em') != -1) {
532 computedStyle.size = canvasFontSize * fontSize;
533 } else if(style.size.indexOf('%') != -1) {
534 computedStyle.size = (canvasFontSize / 100) * fontSize;
535 } else if (style.size.indexOf('pt') != -1) {
536 computedStyle.size = fontSize / .75;
538 computedStyle.size = canvasFontSize;
541 // Different scaling between normal text and VML text. This was found using
542 // trial and error to get the same size as non VML text.
543 computedStyle.size *= 0.981;
545 return computedStyle;
548 function buildStyle(style) {
549 return style.style + ' ' + style.variant + ' ' + style.weight + ' ' +
550 style.size + 'px ' + style.family;
553 function processLineCap(lineCap) {
566 * This class implements CanvasRenderingContext2D interface as described by
568 * @param {HTMLElement} canvasElement The element that the 2D context should
571 function CanvasRenderingContext2D_(canvasElement) {
572 this.m_ = createMatrixIdentity();
576 this.currentPath_ = [];
578 // Canvas context properties
579 this.strokeStyle = '#000';
580 this.fillStyle = '#000';
583 this.lineJoin = 'miter';
584 this.lineCap = 'butt';
585 this.miterLimit = Z * 1;
586 this.globalAlpha = 1;
587 this.font = '10px sans-serif';
588 this.textAlign = 'left';
589 this.textBaseline = 'alphabetic';
590 this.canvas = canvasElement;
592 var cssText = 'width:' + canvasElement.clientWidth + 'px;height:' +
593 canvasElement.clientHeight + 'px;overflow:hidden;position:absolute';
594 var el = canvasElement.ownerDocument.createElement('div');
595 el.style.cssText = cssText;
596 canvasElement.appendChild(el);
598 var overlayEl = el.cloneNode(false);
599 // Use a non transparent background.
600 overlayEl.style.backgroundColor = 'red';
601 overlayEl.style.filter = 'alpha(opacity=0)';
602 canvasElement.appendChild(overlayEl);
610 var contextPrototype = CanvasRenderingContext2D_.prototype;
611 contextPrototype.clearRect = function() {
612 if (this.textMeasureEl_) {
613 this.textMeasureEl_.removeNode(true);
614 this.textMeasureEl_ = null;
616 this.element_.innerHTML = '';
619 contextPrototype.beginPath = function() {
620 // TODO: Branch current matrix so that save/restore has no effect
621 // as per safari docs.
622 this.currentPath_ = [];
625 contextPrototype.moveTo = function(aX, aY) {
626 var p = this.getCoords_(aX, aY);
627 this.currentPath_.push({type: 'moveTo', x: p.x, y: p.y});
628 this.currentX_ = p.x;
629 this.currentY_ = p.y;
632 contextPrototype.lineTo = function(aX, aY) {
633 var p = this.getCoords_(aX, aY);
634 this.currentPath_.push({type: 'lineTo', x: p.x, y: p.y});
636 this.currentX_ = p.x;
637 this.currentY_ = p.y;
640 contextPrototype.bezierCurveTo = function(aCP1x, aCP1y,
643 var p = this.getCoords_(aX, aY);
644 var cp1 = this.getCoords_(aCP1x, aCP1y);
645 var cp2 = this.getCoords_(aCP2x, aCP2y);
646 bezierCurveTo(this, cp1, cp2, p);
649 // Helper function that takes the already fixed cordinates.
650 function bezierCurveTo(self, cp1, cp2, p) {
651 self.currentPath_.push({
652 type: 'bezierCurveTo',
660 self.currentX_ = p.x;
661 self.currentY_ = p.y;
664 contextPrototype.quadraticCurveTo = function(aCPx, aCPy, aX, aY) {
665 // the following is lifted almost directly from
666 // http://developer.mozilla.org/en/docs/Canvas_tutorial:Drawing_shapes
668 var cp = this.getCoords_(aCPx, aCPy);
669 var p = this.getCoords_(aX, aY);
672 x: this.currentX_ + 2.0 / 3.0 * (cp.x - this.currentX_),
673 y: this.currentY_ + 2.0 / 3.0 * (cp.y - this.currentY_)
676 x: cp1.x + (p.x - this.currentX_) / 3.0,
677 y: cp1.y + (p.y - this.currentY_) / 3.0
680 bezierCurveTo(this, cp1, cp2, p);
683 contextPrototype.arc = function(aX, aY, aRadius,
684 aStartAngle, aEndAngle, aClockwise) {
686 var arcType = aClockwise ? 'at' : 'wa';
688 var xStart = aX + mc(aStartAngle) * aRadius - Z2;
689 var yStart = aY + ms(aStartAngle) * aRadius - Z2;
691 var xEnd = aX + mc(aEndAngle) * aRadius - Z2;
692 var yEnd = aY + ms(aEndAngle) * aRadius - Z2;
694 // IE won't render arches drawn counter clockwise if xStart == xEnd.
695 if (xStart == xEnd && !aClockwise) {
696 xStart += 0.125; // Offset xStart by 1/80 of a pixel. Use something
697 // that can be represented in binary
700 var p = this.getCoords_(aX, aY);
701 var pStart = this.getCoords_(xStart, yStart);
702 var pEnd = this.getCoords_(xEnd, yEnd);
704 this.currentPath_.push({type: arcType,
715 contextPrototype.rect = function(aX, aY, aWidth, aHeight) {
717 this.lineTo(aX + aWidth, aY);
718 this.lineTo(aX + aWidth, aY + aHeight);
719 this.lineTo(aX, aY + aHeight);
723 contextPrototype.strokeRect = function(aX, aY, aWidth, aHeight) {
724 var oldPath = this.currentPath_;
728 this.lineTo(aX + aWidth, aY);
729 this.lineTo(aX + aWidth, aY + aHeight);
730 this.lineTo(aX, aY + aHeight);
734 this.currentPath_ = oldPath;
737 contextPrototype.fillRect = function(aX, aY, aWidth, aHeight) {
738 var oldPath = this.currentPath_;
742 this.lineTo(aX + aWidth, aY);
743 this.lineTo(aX + aWidth, aY + aHeight);
744 this.lineTo(aX, aY + aHeight);
748 this.currentPath_ = oldPath;
751 contextPrototype.createLinearGradient = function(aX0, aY0, aX1, aY1) {
752 var gradient = new CanvasGradient_('gradient');
760 contextPrototype.createRadialGradient = function(aX0, aY0, aR0,
762 var gradient = new CanvasGradient_('gradientradial');
772 contextPrototype.drawImage = function(image, var_args) {
773 var dx, dy, dw, dh, sx, sy, sw, sh;
775 // to find the original width we overide the width and height
776 var oldRuntimeWidth = image.runtimeStyle.width;
777 var oldRuntimeHeight = image.runtimeStyle.height;
778 image.runtimeStyle.width = 'auto';
779 image.runtimeStyle.height = 'auto';
781 // get the original size
783 var h = image.height;
785 // and remove overides
786 image.runtimeStyle.width = oldRuntimeWidth;
787 image.runtimeStyle.height = oldRuntimeHeight;
789 if (arguments.length == 3) {
795 } else if (arguments.length == 5) {
803 } else if (arguments.length == 9) {
813 throw Error('Invalid number of arguments');
816 var d = this.getCoords_(dx, dy);
826 // For some reason that I've now forgotten, using divs didn't work
827 vmlStr.push(' <g_vml_:group',
828 ' coordsize="', Z * W, ',', Z * H, '"',
829 ' coordorigin="0,0"' ,
830 ' style="width:', W, 'px;height:', H, 'px;position:absolute;');
832 // If filters are necessary (rotation exists), create them
833 // filters are bog-slow, so only create them if abbsolutely necessary
834 // The following check doesn't account for skews (which don't exist
835 // in the canvas spec (yet) anyway.
837 if (this.m_[0][0] != 1 || this.m_[0][1] ||
838 this.m_[1][1] != 1 || this.m_[1][0]) {
841 // Note the 12/21 reversal
842 filter.push('M11=', this.m_[0][0], ',',
843 'M12=', this.m_[1][0], ',',
844 'M21=', this.m_[0][1], ',',
845 'M22=', this.m_[1][1], ',',
846 'Dx=', mr(d.x / Z), ',',
847 'Dy=', mr(d.y / Z), '');
849 // Bounding box calculation (need to minimize displayed area so that
850 // filters don't waste time on unused pixels.
852 var c2 = this.getCoords_(dx + dw, dy);
853 var c3 = this.getCoords_(dx, dy + dh);
854 var c4 = this.getCoords_(dx + dw, dy + dh);
856 max.x = m.max(max.x, c2.x, c3.x, c4.x);
857 max.y = m.max(max.y, c2.y, c3.y, c4.y);
859 vmlStr.push('padding:0 ', mr(max.x / Z), 'px ', mr(max.y / Z),
860 'px 0;filter:progid:DXImageTransform.Microsoft.Matrix(',
861 filter.join(''), ", sizingmethod='clip');");
864 vmlStr.push('top:', mr(d.y / Z), 'px;left:', mr(d.x / Z), 'px;');
868 '<g_vml_:image src="', image.src, '"',
869 ' style="width:', Z * dw, 'px;',
870 ' height:', Z * dh, 'px"',
871 ' cropleft="', sx / w, '"',
872 ' croptop="', sy / h, '"',
873 ' cropright="', (w - sx - sw) / w, '"',
874 ' cropbottom="', (h - sy - sh) / h, '"',
878 this.element_.insertAdjacentHTML('BeforeEnd', vmlStr.join(''));
881 contextPrototype.stroke = function(aFill) {
883 var lineOpen = false;
888 lineStr.push('<g_vml_:shape',
889 ' filled="', !!aFill, '"',
890 ' style="position:absolute;width:', W, 'px;height:', H, 'px;"',
891 ' coordorigin="0,0"',
892 ' coordsize="', Z * W, ',', Z * H, '"',
893 ' stroked="', !aFill, '"',
897 var min = {x: null, y: null};
898 var max = {x: null, y: null};
900 for (var i = 0; i < this.currentPath_.length; i++) {
901 var p = this.currentPath_[i];
907 lineStr.push(' m ', mr(p.x), ',', mr(p.y));
910 lineStr.push(' l ', mr(p.x), ',', mr(p.y));
916 case 'bezierCurveTo':
918 mr(p.cp1x), ',', mr(p.cp1y), ',',
919 mr(p.cp2x), ',', mr(p.cp2y), ',',
920 mr(p.x), ',', mr(p.y));
924 lineStr.push(' ', p.type, ' ',
925 mr(p.x - this.arcScaleX_ * p.radius), ',',
926 mr(p.y - this.arcScaleY_ * p.radius), ' ',
927 mr(p.x + this.arcScaleX_ * p.radius), ',',
928 mr(p.y + this.arcScaleY_ * p.radius), ' ',
929 mr(p.xStart), ',', mr(p.yStart), ' ',
930 mr(p.xEnd), ',', mr(p.yEnd));
935 // TODO: Following is broken for curves due to
936 // move to proper paths.
938 // Figure out dimensions so we can do gradient fills
941 if (min.x == null || p.x < min.x) {
944 if (max.x == null || p.x > max.x) {
947 if (min.y == null || p.y < min.y) {
950 if (max.y == null || p.y > max.y) {
958 appendStroke(this, lineStr);
960 appendFill(this, lineStr, min, max);
963 lineStr.push('</g_vml_:shape>');
965 this.element_.insertAdjacentHTML('beforeEnd', lineStr.join(''));
968 function appendStroke(ctx, lineStr) {
969 var a = processStyle(ctx.strokeStyle);
971 var opacity = a.alpha * ctx.globalAlpha;
972 var lineWidth = ctx.lineScale_ * ctx.lineWidth;
974 // VML cannot correctly render a line if the width is less than 1px.
975 // In that case, we dilute the color to make the line look thinner.
977 opacity *= lineWidth;
982 ' opacity="', opacity, '"',
983 ' joinstyle="', ctx.lineJoin, '"',
984 ' miterlimit="', ctx.miterLimit, '"',
985 ' endcap="', processLineCap(ctx.lineCap), '"',
986 ' weight="', lineWidth, 'px"',
987 ' color="', color, '" />'
991 function appendFill(ctx, lineStr, min, max) {
992 var fillStyle = ctx.fillStyle;
993 var arcScaleX = ctx.arcScaleX_;
994 var arcScaleY = ctx.arcScaleY_;
995 var width = max.x - min.x;
996 var height = max.y - min.y;
997 if (fillStyle instanceof CanvasGradient_) {
998 // TODO: Gradients transformed with the transformation matrix.
1000 var focus = {x: 0, y: 0};
1002 // additional offset
1004 // scale factor for offset
1007 if (fillStyle.type_ == 'gradient') {
1008 var x0 = fillStyle.x0_ / arcScaleX;
1009 var y0 = fillStyle.y0_ / arcScaleY;
1010 var x1 = fillStyle.x1_ / arcScaleX;
1011 var y1 = fillStyle.y1_ / arcScaleY;
1012 var p0 = ctx.getCoords_(x0, y0);
1013 var p1 = ctx.getCoords_(x1, y1);
1014 var dx = p1.x - p0.x;
1015 var dy = p1.y - p0.y;
1016 angle = Math.atan2(dx, dy) * 180 / Math.PI;
1018 // The angle should be a non-negative number.
1023 // Very small angles produce an unexpected result because they are
1024 // converted to a scientific notation string.
1029 var p0 = ctx.getCoords_(fillStyle.x0_, fillStyle.y0_);
1031 x: (p0.x - min.x) / width,
1032 y: (p0.y - min.y) / height
1035 width /= arcScaleX * Z;
1036 height /= arcScaleY * Z;
1037 var dimension = m.max(width, height);
1038 shift = 2 * fillStyle.r0_ / dimension;
1039 expansion = 2 * fillStyle.r1_ / dimension - shift;
1042 // We need to sort the color stops in ascending order by offset,
1043 // otherwise IE won't interpret it correctly.
1044 var stops = fillStyle.colors_;
1045 stops.sort(function(cs1, cs2) {
1046 return cs1.offset - cs2.offset;
1049 var length = stops.length;
1050 var color1 = stops[0].color;
1051 var color2 = stops[length - 1].color;
1052 var opacity1 = stops[0].alpha * ctx.globalAlpha;
1053 var opacity2 = stops[length - 1].alpha * ctx.globalAlpha;
1056 for (var i = 0; i < length; i++) {
1057 var stop = stops[i];
1058 colors.push(stop.offset * expansion + shift + ' ' + stop.color);
1061 // When colors attribute is used, the meanings of opacity and o:opacity2
1063 lineStr.push('<g_vml_:fill type="', fillStyle.type_, '"',
1064 ' method="none" focus="100%"',
1065 ' color="', color1, '"',
1066 ' color2="', color2, '"',
1067 ' colors="', colors.join(','), '"',
1068 ' opacity="', opacity2, '"',
1069 ' g_o_:opacity2="', opacity1, '"',
1070 ' angle="', angle, '"',
1071 ' focusposition="', focus.x, ',', focus.y, '" />');
1072 } else if (fillStyle instanceof CanvasPattern_) {
1073 if (width && height) {
1074 var deltaLeft = -min.x;
1075 var deltaTop = -min.y;
1076 lineStr.push('<g_vml_:fill',
1078 deltaLeft / width * arcScaleX * arcScaleX, ',',
1079 deltaTop / height * arcScaleY * arcScaleY, '"',
1081 // TODO: Figure out the correct size to fit the scale.
1082 //' size="', w, 'px ', h, 'px"',
1083 ' src="', fillStyle.src_, '" />');
1086 var a = processStyle(ctx.fillStyle);
1087 var color = a.color;
1088 var opacity = a.alpha * ctx.globalAlpha;
1089 lineStr.push('<g_vml_:fill color="', color, '" opacity="', opacity,
1094 contextPrototype.fill = function() {
1098 contextPrototype.closePath = function() {
1099 this.currentPath_.push({type: 'close'});
1105 contextPrototype.getCoords_ = function(aX, aY) {
1108 x: Z * (aX * m[0][0] + aY * m[1][0] + m[2][0]) - Z2,
1109 y: Z * (aX * m[0][1] + aY * m[1][1] + m[2][1]) - Z2
1113 contextPrototype.save = function() {
1116 this.aStack_.push(o);
1117 this.mStack_.push(this.m_);
1118 this.m_ = matrixMultiply(createMatrixIdentity(), this.m_);
1121 contextPrototype.restore = function() {
1122 if (this.aStack_.length) {
1123 copyState(this.aStack_.pop(), this);
1124 this.m_ = this.mStack_.pop();
1128 function matrixIsFinite(m) {
1129 return isFinite(m[0][0]) && isFinite(m[0][1]) &&
1130 isFinite(m[1][0]) && isFinite(m[1][1]) &&
1131 isFinite(m[2][0]) && isFinite(m[2][1]);
1134 function setM(ctx, m, updateLineScale) {
1135 if (!matrixIsFinite(m)) {
1140 if (updateLineScale) {
1141 // Get the line scale.
1142 // Determinant of this.m_ means how much the area is enlarged by the
1143 // transformation. So its square root can be used as a scale factor
1145 var det = m[0][0] * m[1][1] - m[0][1] * m[1][0];
1146 ctx.lineScale_ = sqrt(abs(det));
1150 contextPrototype.translate = function(aX, aY) {
1157 setM(this, matrixMultiply(m1, this.m_), false);
1160 contextPrototype.rotate = function(aRot) {
1170 setM(this, matrixMultiply(m1, this.m_), false);
1173 contextPrototype.scale = function(aX, aY) {
1174 this.arcScaleX_ *= aX;
1175 this.arcScaleY_ *= aY;
1182 setM(this, matrixMultiply(m1, this.m_), true);
1185 contextPrototype.transform = function(m11, m12, m21, m22, dx, dy) {
1192 setM(this, matrixMultiply(m1, this.m_), true);
1195 contextPrototype.setTransform = function(m11, m12, m21, m22, dx, dy) {
1202 setM(this, m, true);
1206 * The text drawing function.
1207 * The maxWidth argument isn't taken in account, since no browser supports
1210 contextPrototype.drawText_ = function(text, x, y, maxWidth, stroke) {
1215 offset = {x: 0, y: 0},
1218 var fontStyle = getComputedStyle(processFontStyle(this.font),
1221 var fontStyleString = buildStyle(fontStyle);
1223 var elementStyle = this.element_.currentStyle;
1224 var textAlign = this.textAlign.toLowerCase();
1225 switch (textAlign) {
1231 textAlign = elementStyle.direction == 'ltr' ? 'right' : 'left';
1234 textAlign = elementStyle.direction == 'rtl' ? 'right' : 'left';
1240 // 1.75 is an arbitrary number, as there is no info about the text baseline
1241 switch (this.textBaseline) {
1244 offset.y = fontStyle.size / 1.75;
1253 offset.y = -fontStyle.size / 2.25;
1263 left = right = delta / 2;
1267 var d = this.getCoords_(x + offset.x, y + offset.y);
1269 lineStr.push('<g_vml_:line from="', -left ,' 0" to="', right ,' 0.05" ',
1270 ' coordsize="100 100" coordorigin="0 0"',
1271 ' filled="', !stroke, '" stroked="', !!stroke,
1272 '" style="position:absolute;width:1px;height:1px;">');
1275 appendStroke(this, lineStr);
1277 // TODO: Fix the min and max params.
1278 appendFill(this, lineStr, {x: -left, y: 0},
1279 {x: right, y: fontStyle.size});
1282 var skewM = m[0][0].toFixed(3) + ',' + m[1][0].toFixed(3) + ',' +
1283 m[0][1].toFixed(3) + ',' + m[1][1].toFixed(3) + ',0,0';
1285 var skewOffset = mr(d.x / Z) + ',' + mr(d.y / Z);
1287 lineStr.push('<g_vml_:skew on="t" matrix="', skewM ,'" ',
1288 ' offset="', skewOffset, '" origin="', left ,' 0" />',
1289 '<g_vml_:path textpathok="true" />',
1290 '<g_vml_:textpath on="true" string="',
1291 encodeHtmlAttribute(text),
1292 '" style="v-text-align:', textAlign,
1293 ';font:', encodeHtmlAttribute(fontStyleString),
1294 '" /></g_vml_:line>');
1296 this.element_.insertAdjacentHTML('beforeEnd', lineStr.join(''));
1299 contextPrototype.fillText = function(text, x, y, maxWidth) {
1300 this.drawText_(text, x, y, maxWidth, false);
1303 contextPrototype.strokeText = function(text, x, y, maxWidth) {
1304 this.drawText_(text, x, y, maxWidth, true);
1307 contextPrototype.measureText = function(text) {
1308 if (!this.textMeasureEl_) {
1309 var s = '<span style="position:absolute;' +
1310 'top:-20000px;left:0;padding:0;margin:0;border:none;' +
1311 'white-space:pre;"></span>';
1312 this.element_.insertAdjacentHTML('beforeEnd', s);
1313 this.textMeasureEl_ = this.element_.lastChild;
1315 var doc = this.element_.ownerDocument;
1316 this.textMeasureEl_.innerHTML = '';
1317 this.textMeasureEl_.style.font = this.font;
1318 // Don't use innerHTML or innerText because they allow markup/whitespace.
1319 this.textMeasureEl_.appendChild(doc.createTextNode(text));
1320 return {width: this.textMeasureEl_.offsetWidth};
1323 /******** STUBS ********/
1324 contextPrototype.clip = function() {
1328 contextPrototype.arcTo = function() {
1332 contextPrototype.createPattern = function(image, repetition) {
1333 return new CanvasPattern_(image, repetition);
1336 // Gradient / Pattern Stubs
1337 function CanvasGradient_(aType) {
1348 CanvasGradient_.prototype.addColorStop = function(aOffset, aColor) {
1349 aColor = processStyle(aColor);
1350 this.colors_.push({offset: aOffset,
1351 color: aColor.color,
1352 alpha: aColor.alpha});
1355 function CanvasPattern_(image, repetition) {
1356 assertImageIsValid(image);
1357 switch (repetition) {
1361 this.repetition_ = 'repeat';
1366 this.repetition_ = repetition;
1369 throwException('SYNTAX_ERR');
1372 this.src_ = image.src;
1373 this.width_ = image.width;
1374 this.height_ = image.height;
1377 function throwException(s) {
1378 throw new DOMException_(s);
1381 function assertImageIsValid(img) {
1382 if (!img || img.nodeType != 1 || img.tagName != 'IMG') {
1383 throwException('TYPE_MISMATCH_ERR');
1385 if (img.readyState != 'complete') {
1386 throwException('INVALID_STATE_ERR');
1390 function DOMException_(s) {
1391 this.code = this[s];
1392 this.message = s +': DOM Exception ' + this.code;
1394 var p = DOMException_.prototype = new Error;
1395 p.INDEX_SIZE_ERR = 1;
1396 p.DOMSTRING_SIZE_ERR = 2;
1397 p.HIERARCHY_REQUEST_ERR = 3;
1398 p.WRONG_DOCUMENT_ERR = 4;
1399 p.INVALID_CHARACTER_ERR = 5;
1400 p.NO_DATA_ALLOWED_ERR = 6;
1401 p.NO_MODIFICATION_ALLOWED_ERR = 7;
1402 p.NOT_FOUND_ERR = 8;
1403 p.NOT_SUPPORTED_ERR = 9;
1404 p.INUSE_ATTRIBUTE_ERR = 10;
1405 p.INVALID_STATE_ERR = 11;
1407 p.INVALID_MODIFICATION_ERR = 13;
1408 p.NAMESPACE_ERR = 14;
1409 p.INVALID_ACCESS_ERR = 15;
1410 p.VALIDATION_ERR = 16;
1411 p.TYPE_MISMATCH_ERR = 17;
1414 G_vmlCanvasManager = G_vmlCanvasManager_;
1415 CanvasRenderingContext2D = CanvasRenderingContext2D_;
1416 CanvasGradient = CanvasGradient_;
1417 CanvasPattern = CanvasPattern_;
1418 DOMException = DOMException_;