/src/example/excanvas.js
JavaScript | 1416 lines | 1326 code | 25 blank | 65 comment | 22 complexity | c466e683cc30546ee3f295829a0c009d MD5 | raw file
1// Copyright 2006 Google Inc. 2// 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 6// 7// http://www.apache.org/licenses/LICENSE-2.0 8// 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. 14 15 16// Known Issues: 17// 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 27// doctype to HTML5 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. 33 34// Only add this code if we do not already have a canvas implementation 35if (!document.createElement('canvas').getContext) { 36 37(function() { 38 39 // alias some functions to make (compiled) code shorter 40 var m = Math; 41 var mr = m.round; 42 var ms = m.sin; 43 var mc = m.cos; 44 var abs = m.abs; 45 var sqrt = m.sqrt; 46 47 // this is used for sub pixel precision 48 var Z = 10; 49 var Z2 = Z / 2; 50 51 var IE_VERSION = +navigator.userAgent.match(/MSIE ([\d.]+)?/)[1]; 52 53 /** 54 * This funtion is assigned to the <canvas> elements as element.getContext(). 55 * @this {HTMLElement} 56 * @return {CanvasRenderingContext2D_} 57 */ 58 function getContext() { 59 return this.context_ || 60 (this.context_ = new CanvasRenderingContext2D_(this)); 61 } 62 63 var slice = Array.prototype.slice; 64 65 /** 66 * Binds a function to an object. The returned function will always use the 67 * passed in {@code obj} as {@code this}. 68 * 69 * Example: 70 * 71 * g = bind(f, obj, a, b) 72 * g(c, d) // will do f.call(obj, a, b, c, d) 73 * 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 76 * is called 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 80 */ 81 function bind(f, obj, var_args) { 82 var a = slice.call(arguments, 2); 83 return function() { 84 return f.apply(obj, a.concat(slice.call(arguments))); 85 }; 86 } 87 88 function encodeHtmlAttribute(s) { 89 return String(s).replace(/&/g, '&').replace(/"/g, '"'); 90 } 91 92 function addNamespace(doc, prefix, urn) { 93 if (!doc.namespaces[prefix]) { 94 doc.namespaces.add(prefix, urn, '#default#VML'); 95 } 96 } 97 98 function addNamespacesAndStylesheet(doc) { 99 addNamespace(doc, 'g_vml_', 'urn:schemas-microsoft-com:vml'); 100 addNamespace(doc, 'g_o_', 'urn:schemas-microsoft-com:office:office'); 101 102 // Setup default CSS. Only add one style sheet per document 103 if (!doc.styleSheets['ex_canvas_']) { 104 var ss = doc.createStyleSheet(); 105 ss.owningElement.id = 'ex_canvas_'; 106 ss.cssText = 'canvas{display:inline-block;overflow:hidden;' + 107 // default size is 300x150 in Gecko and Opera 108 'text-align:left;width:300px;height:150px}'; 109 } 110 } 111 112 // Add namespaces and stylesheet at startup. 113 addNamespacesAndStylesheet(document); 114 115 var G_vmlCanvasManager_ = { 116 init: function(opt_doc) { 117 var doc = opt_doc || document; 118 // Create a dummy element so that IE will allow canvas elements to be 119 // recognized. 120 doc.createElement('canvas'); 121 doc.attachEvent('onreadystatechange', bind(this.init_, this, doc)); 122 }, 123 124 init_: function(doc) { 125 // find all canvas elements 126 var els = doc.getElementsByTagName('canvas'); 127 for (var i = 0; i < els.length; i++) { 128 this.initElement(els[i]); 129 } 130 }, 131 132 /** 133 * Public initializes a canvas element so that it can be used as canvas 134 * element from now on. This is called automatically before the page is 135 * loaded but if you are creating elements using createElement you need to 136 * make sure this is called on the element. 137 * @param {HTMLElement} el The canvas element to initialize. 138 * @return {HTMLElement} the element that was created. 139 */ 140 initElement: function(el) { 141 if (!el.getContext) { 142 el.getContext = getContext; 143 144 // Add namespaces and stylesheet to document of the element. 145 addNamespacesAndStylesheet(el.ownerDocument); 146 147 // Remove fallback content. There is no way to hide text nodes so we 148 // just remove all childNodes. We could hide all elements and remove 149 // text nodes but who really cares about the fallback content. 150 el.innerHTML = ''; 151 152 // do not use inline function because that will leak memory 153 el.attachEvent('onpropertychange', onPropertyChange); 154 el.attachEvent('onresize', onResize); 155 156 var attrs = el.attributes; 157 if (attrs.width && attrs.width.specified) { 158 // TODO: use runtimeStyle and coordsize 159 // el.getContext().setWidth_(attrs.width.nodeValue); 160 el.style.width = attrs.width.nodeValue + 'px'; 161 } else { 162 el.width = el.clientWidth; 163 } 164 if (attrs.height && attrs.height.specified) { 165 // TODO: use runtimeStyle and coordsize 166 // el.getContext().setHeight_(attrs.height.nodeValue); 167 el.style.height = attrs.height.nodeValue + 'px'; 168 } else { 169 el.height = el.clientHeight; 170 } 171 //el.getContext().setCoordsize_() 172 } 173 return el; 174 } 175 }; 176 177 function onPropertyChange(e) { 178 var el = e.srcElement; 179 180 switch (e.propertyName) { 181 case 'width': 182 el.getContext().clearRect(); 183 el.style.width = el.attributes.width.nodeValue + 'px'; 184 // In IE8 this does not trigger onresize. 185 el.firstChild.style.width = el.clientWidth + 'px'; 186 break; 187 case 'height': 188 el.getContext().clearRect(); 189 el.style.height = el.attributes.height.nodeValue + 'px'; 190 el.firstChild.style.height = el.clientHeight + 'px'; 191 break; 192 } 193 } 194 195 function onResize(e) { 196 var el = e.srcElement; 197 if (el.firstChild) { 198 el.firstChild.style.width = el.clientWidth + 'px'; 199 el.firstChild.style.height = el.clientHeight + 'px'; 200 } 201 } 202 203 G_vmlCanvasManager_.init(); 204 205 // precompute "00" to "FF" 206 var decToHex = []; 207 for (var i = 0; i < 16; i++) { 208 for (var j = 0; j < 16; j++) { 209 decToHex[i * 16 + j] = i.toString(16) + j.toString(16); 210 } 211 } 212 213 function createMatrixIdentity() { 214 return [ 215 [1, 0, 0], 216 [0, 1, 0], 217 [0, 0, 1] 218 ]; 219 } 220 221 function matrixMultiply(m1, m2) { 222 var result = createMatrixIdentity(); 223 224 for (var x = 0; x < 3; x++) { 225 for (var y = 0; y < 3; y++) { 226 var sum = 0; 227 228 for (var z = 0; z < 3; z++) { 229 sum += m1[x][z] * m2[z][y]; 230 } 231 232 result[x][y] = sum; 233 } 234 } 235 return result; 236 } 237 238 function copyState(o1, o2) { 239 o2.fillStyle = o1.fillStyle; 240 o2.lineCap = o1.lineCap; 241 o2.lineJoin = o1.lineJoin; 242 o2.lineWidth = o1.lineWidth; 243 o2.miterLimit = o1.miterLimit; 244 o2.shadowBlur = o1.shadowBlur; 245 o2.shadowColor = o1.shadowColor; 246 o2.shadowOffsetX = o1.shadowOffsetX; 247 o2.shadowOffsetY = o1.shadowOffsetY; 248 o2.strokeStyle = o1.strokeStyle; 249 o2.globalAlpha = o1.globalAlpha; 250 o2.font = o1.font; 251 o2.textAlign = o1.textAlign; 252 o2.textBaseline = o1.textBaseline; 253 o2.arcScaleX_ = o1.arcScaleX_; 254 o2.arcScaleY_ = o1.arcScaleY_; 255 o2.lineScale_ = o1.lineScale_; 256 } 257 258 var colorData = { 259 aliceblue: '#F0F8FF', 260 antiquewhite: '#FAEBD7', 261 aquamarine: '#7FFFD4', 262 azure: '#F0FFFF', 263 beige: '#F5F5DC', 264 bisque: '#FFE4C4', 265 black: '#000000', 266 blanchedalmond: '#FFEBCD', 267 blueviolet: '#8A2BE2', 268 brown: '#A52A2A', 269 burlywood: '#DEB887', 270 cadetblue: '#5F9EA0', 271 chartreuse: '#7FFF00', 272 chocolate: '#D2691E', 273 coral: '#FF7F50', 274 cornflowerblue: '#6495ED', 275 cornsilk: '#FFF8DC', 276 crimson: '#DC143C', 277 cyan: '#00FFFF', 278 darkblue: '#00008B', 279 darkcyan: '#008B8B', 280 darkgoldenrod: '#B8860B', 281 darkgray: '#A9A9A9', 282 darkgreen: '#006400', 283 darkgrey: '#A9A9A9', 284 darkkhaki: '#BDB76B', 285 darkmagenta: '#8B008B', 286 darkolivegreen: '#556B2F', 287 darkorange: '#FF8C00', 288 darkorchid: '#9932CC', 289 darkred: '#8B0000', 290 darksalmon: '#E9967A', 291 darkseagreen: '#8FBC8F', 292 darkslateblue: '#483D8B', 293 darkslategray: '#2F4F4F', 294 darkslategrey: '#2F4F4F', 295 darkturquoise: '#00CED1', 296 darkviolet: '#9400D3', 297 deeppink: '#FF1493', 298 deepskyblue: '#00BFFF', 299 dimgray: '#696969', 300 dimgrey: '#696969', 301 dodgerblue: '#1E90FF', 302 firebrick: '#B22222', 303 floralwhite: '#FFFAF0', 304 forestgreen: '#228B22', 305 gainsboro: '#DCDCDC', 306 ghostwhite: '#F8F8FF', 307 gold: '#FFD700', 308 goldenrod: '#DAA520', 309 grey: '#808080', 310 greenyellow: '#ADFF2F', 311 honeydew: '#F0FFF0', 312 hotpink: '#FF69B4', 313 indianred: '#CD5C5C', 314 indigo: '#4B0082', 315 ivory: '#FFFFF0', 316 khaki: '#F0E68C', 317 lavender: '#E6E6FA', 318 lavenderblush: '#FFF0F5', 319 lawngreen: '#7CFC00', 320 lemonchiffon: '#FFFACD', 321 lightblue: '#ADD8E6', 322 lightcoral: '#F08080', 323 lightcyan: '#E0FFFF', 324 lightgoldenrodyellow: '#FAFAD2', 325 lightgreen: '#90EE90', 326 lightgrey: '#D3D3D3', 327 lightpink: '#FFB6C1', 328 lightsalmon: '#FFA07A', 329 lightseagreen: '#20B2AA', 330 lightskyblue: '#87CEFA', 331 lightslategray: '#778899', 332 lightslategrey: '#778899', 333 lightsteelblue: '#B0C4DE', 334 lightyellow: '#FFFFE0', 335 limegreen: '#32CD32', 336 linen: '#FAF0E6', 337 magenta: '#FF00FF', 338 mediumaquamarine: '#66CDAA', 339 mediumblue: '#0000CD', 340 mediumorchid: '#BA55D3', 341 mediumpurple: '#9370DB', 342 mediumseagreen: '#3CB371', 343 mediumslateblue: '#7B68EE', 344 mediumspringgreen: '#00FA9A', 345 mediumturquoise: '#48D1CC', 346 mediumvioletred: '#C71585', 347 midnightblue: '#191970', 348 mintcream: '#F5FFFA', 349 mistyrose: '#FFE4E1', 350 moccasin: '#FFE4B5', 351 navajowhite: '#FFDEAD', 352 oldlace: '#FDF5E6', 353 olivedrab: '#6B8E23', 354 orange: '#FFA500', 355 orangered: '#FF4500', 356 orchid: '#DA70D6', 357 palegoldenrod: '#EEE8AA', 358 palegreen: '#98FB98', 359 paleturquoise: '#AFEEEE', 360 palevioletred: '#DB7093', 361 papayawhip: '#FFEFD5', 362 peachpuff: '#FFDAB9', 363 peru: '#CD853F', 364 pink: '#FFC0CB', 365 plum: '#DDA0DD', 366 powderblue: '#B0E0E6', 367 rosybrown: '#BC8F8F', 368 royalblue: '#4169E1', 369 saddlebrown: '#8B4513', 370 salmon: '#FA8072', 371 sandybrown: '#F4A460', 372 seagreen: '#2E8B57', 373 seashell: '#FFF5EE', 374 sienna: '#A0522D', 375 skyblue: '#87CEEB', 376 slateblue: '#6A5ACD', 377 slategray: '#708090', 378 slategrey: '#708090', 379 snow: '#FFFAFA', 380 springgreen: '#00FF7F', 381 steelblue: '#4682B4', 382 tan: '#D2B48C', 383 thistle: '#D8BFD8', 384 tomato: '#FF6347', 385 turquoise: '#40E0D0', 386 violet: '#EE82EE', 387 wheat: '#F5DEB3', 388 whitesmoke: '#F5F5F5', 389 yellowgreen: '#9ACD32' 390 }; 391 392 393 function getRgbHslContent(styleString) { 394 var start = styleString.indexOf('(', 3); 395 var end = styleString.indexOf(')', start + 1); 396 var parts = styleString.substring(start + 1, end).split(','); 397 // add alpha if needed 398 if (parts.length != 4 || styleString.charAt(3) != 'a') { 399 parts[3] = 1; 400 } 401 return parts; 402 } 403 404 function percent(s) { 405 return parseFloat(s) / 100; 406 } 407 408 function clamp(v, min, max) { 409 return Math.min(max, Math.max(min, v)); 410 } 411 412 function hslToRgb(parts){ 413 var r, g, b, h, s, l; 414 h = parseFloat(parts[0]) / 360 % 360; 415 if (h < 0) 416 h++; 417 s = clamp(percent(parts[1]), 0, 1); 418 l = clamp(percent(parts[2]), 0, 1); 419 if (s == 0) { 420 r = g = b = l; // achromatic 421 } else { 422 var q = l < 0.5 ? l * (1 + s) : l + s - l * s; 423 var p = 2 * l - q; 424 r = hueToRgb(p, q, h + 1 / 3); 425 g = hueToRgb(p, q, h); 426 b = hueToRgb(p, q, h - 1 / 3); 427 } 428 429 return '#' + decToHex[Math.floor(r * 255)] + 430 decToHex[Math.floor(g * 255)] + 431 decToHex[Math.floor(b * 255)]; 432 } 433 434 function hueToRgb(m1, m2, h) { 435 if (h < 0) 436 h++; 437 if (h > 1) 438 h--; 439 440 if (6 * h < 1) 441 return m1 + (m2 - m1) * 6 * h; 442 else if (2 * h < 1) 443 return m2; 444 else if (3 * h < 2) 445 return m1 + (m2 - m1) * (2 / 3 - h) * 6; 446 else 447 return m1; 448 } 449 450 var processStyleCache = {}; 451 452 function processStyle(styleString) { 453 if (styleString in processStyleCache) { 454 return processStyleCache[styleString]; 455 } 456 457 var str, alpha = 1; 458 459 styleString = String(styleString); 460 if (styleString.charAt(0) == '#') { 461 str = styleString; 462 } else if (/^rgb/.test(styleString)) { 463 var parts = getRgbHslContent(styleString); 464 var str = '#', n; 465 for (var i = 0; i < 3; i++) { 466 if (parts[i].indexOf('%') != -1) { 467 n = Math.floor(percent(parts[i]) * 255); 468 } else { 469 n = +parts[i]; 470 } 471 str += decToHex[clamp(n, 0, 255)]; 472 } 473 alpha = +parts[3]; 474 } else if (/^hsl/.test(styleString)) { 475 var parts = getRgbHslContent(styleString); 476 str = hslToRgb(parts); 477 alpha = parts[3]; 478 } else { 479 str = colorData[styleString] || styleString; 480 } 481 return processStyleCache[styleString] = {color: str, alpha: alpha}; 482 } 483 484 var DEFAULT_STYLE = { 485 style: 'normal', 486 variant: 'normal', 487 weight: 'normal', 488 size: 10, 489 family: 'sans-serif' 490 }; 491 492 // Internal text style cache 493 var fontStyleCache = {}; 494 495 function processFontStyle(styleString) { 496 if (fontStyleCache[styleString]) { 497 return fontStyleCache[styleString]; 498 } 499 500 var el = document.createElement('div'); 501 var style = el.style; 502 try { 503 style.font = styleString; 504 } catch (ex) { 505 // Ignore failures to set to invalid font. 506 } 507 508 return fontStyleCache[styleString] = { 509 style: style.fontStyle || DEFAULT_STYLE.style, 510 variant: style.fontVariant || DEFAULT_STYLE.variant, 511 weight: style.fontWeight || DEFAULT_STYLE.weight, 512 size: style.fontSize || DEFAULT_STYLE.size, 513 family: style.fontFamily || DEFAULT_STYLE.family 514 }; 515 } 516 517 function getComputedStyle(style, element) { 518 var computedStyle = {}; 519 520 for (var p in style) { 521 computedStyle[p] = style[p]; 522 } 523 524 // Compute the size 525 var canvasFontSize = parseFloat(element.currentStyle.fontSize), 526 fontSize = parseFloat(style.size); 527 528 if (typeof style.size == 'number') { 529 computedStyle.size = style.size; 530 } else if (style.size.indexOf('px') != -1) { 531 computedStyle.size = fontSize; 532 } else if (style.size.indexOf('em') != -1) { 533 computedStyle.size = canvasFontSize * fontSize; 534 } else if(style.size.indexOf('%') != -1) { 535 computedStyle.size = (canvasFontSize / 100) * fontSize; 536 } else if (style.size.indexOf('pt') != -1) { 537 computedStyle.size = fontSize / .75; 538 } else { 539 computedStyle.size = canvasFontSize; 540 } 541 542 // Different scaling between normal text and VML text. This was found using 543 // trial and error to get the same size as non VML text. 544 computedStyle.size *= 0.981; 545 546 return computedStyle; 547 } 548 549 function buildStyle(style) { 550 return style.style + ' ' + style.variant + ' ' + style.weight + ' ' + 551 style.size + 'px ' + style.family; 552 } 553 554 var lineCapMap = { 555 'butt': 'flat', 556 'round': 'round' 557 }; 558 559 function processLineCap(lineCap) { 560 return lineCapMap[lineCap] || 'square'; 561 } 562 563 /** 564 * This class implements CanvasRenderingContext2D interface as described by 565 * the WHATWG. 566 * @param {HTMLElement} canvasElement The element that the 2D context should 567 * be associated with 568 */ 569 function CanvasRenderingContext2D_(canvasElement) { 570 this.m_ = createMatrixIdentity(); 571 572 this.mStack_ = []; 573 this.aStack_ = []; 574 this.currentPath_ = []; 575 576 // Canvas context properties 577 this.strokeStyle = '#000'; 578 this.fillStyle = '#000'; 579 580 this.lineWidth = 1; 581 this.lineJoin = 'miter'; 582 this.lineCap = 'butt'; 583 this.miterLimit = Z * 1; 584 this.globalAlpha = 1; 585 this.font = '10px sans-serif'; 586 this.textAlign = 'left'; 587 this.textBaseline = 'alphabetic'; 588 this.canvas = canvasElement; 589 590 var cssText = 'width:' + canvasElement.clientWidth + 'px;height:' + 591 canvasElement.clientHeight + 'px;overflow:hidden;position:absolute'; 592 var el = canvasElement.ownerDocument.createElement('div'); 593 el.style.cssText = cssText; 594 canvasElement.appendChild(el); 595 596 var overlayEl = el.cloneNode(false); 597 // Use a non transparent background. 598 overlayEl.style.backgroundColor = 'red'; 599 overlayEl.style.filter = 'alpha(opacity=0)'; 600 canvasElement.appendChild(overlayEl); 601 602 this.element_ = el; 603 this.arcScaleX_ = 1; 604 this.arcScaleY_ = 1; 605 this.lineScale_ = 1; 606 } 607 608 var contextPrototype = CanvasRenderingContext2D_.prototype; 609 contextPrototype.clearRect = function() { 610 if (this.textMeasureEl_) { 611 this.textMeasureEl_.removeNode(true); 612 this.textMeasureEl_ = null; 613 } 614 this.element_.innerHTML = ''; 615 }; 616 617 contextPrototype.beginPath = function() { 618 // TODO: Branch current matrix so that save/restore has no effect 619 // as per safari docs. 620 this.currentPath_ = []; 621 }; 622 623 contextPrototype.moveTo = function(aX, aY) { 624 var p = getCoords(this, aX, aY); 625 this.currentPath_.push({type: 'moveTo', x: p.x, y: p.y}); 626 this.currentX_ = p.x; 627 this.currentY_ = p.y; 628 }; 629 630 contextPrototype.lineTo = function(aX, aY) { 631 var p = getCoords(this, aX, aY); 632 this.currentPath_.push({type: 'lineTo', x: p.x, y: p.y}); 633 634 this.currentX_ = p.x; 635 this.currentY_ = p.y; 636 }; 637 638 contextPrototype.bezierCurveTo = function(aCP1x, aCP1y, 639 aCP2x, aCP2y, 640 aX, aY) { 641 var p = getCoords(this, aX, aY); 642 var cp1 = getCoords(this, aCP1x, aCP1y); 643 var cp2 = getCoords(this, aCP2x, aCP2y); 644 bezierCurveTo(this, cp1, cp2, p); 645 }; 646 647 // Helper function that takes the already fixed cordinates. 648 function bezierCurveTo(self, cp1, cp2, p) { 649 self.currentPath_.push({ 650 type: 'bezierCurveTo', 651 cp1x: cp1.x, 652 cp1y: cp1.y, 653 cp2x: cp2.x, 654 cp2y: cp2.y, 655 x: p.x, 656 y: p.y 657 }); 658 self.currentX_ = p.x; 659 self.currentY_ = p.y; 660 } 661 662 contextPrototype.quadraticCurveTo = function(aCPx, aCPy, aX, aY) { 663 // the following is lifted almost directly from 664 // http://developer.mozilla.org/en/docs/Canvas_tutorial:Drawing_shapes 665 666 var cp = getCoords(this, aCPx, aCPy); 667 var p = getCoords(this, aX, aY); 668 669 var cp1 = { 670 x: this.currentX_ + 2.0 / 3.0 * (cp.x - this.currentX_), 671 y: this.currentY_ + 2.0 / 3.0 * (cp.y - this.currentY_) 672 }; 673 var cp2 = { 674 x: cp1.x + (p.x - this.currentX_) / 3.0, 675 y: cp1.y + (p.y - this.currentY_) / 3.0 676 }; 677 678 bezierCurveTo(this, cp1, cp2, p); 679 }; 680 681 contextPrototype.arc = function(aX, aY, aRadius, 682 aStartAngle, aEndAngle, aClockwise) { 683 aRadius *= Z; 684 var arcType = aClockwise ? 'at' : 'wa'; 685 686 var xStart = aX + mc(aStartAngle) * aRadius - Z2; 687 var yStart = aY + ms(aStartAngle) * aRadius - Z2; 688 689 var xEnd = aX + mc(aEndAngle) * aRadius - Z2; 690 var yEnd = aY + ms(aEndAngle) * aRadius - Z2; 691 692 // IE won't render arches drawn counter clockwise if xStart == xEnd. 693 if (xStart == xEnd && !aClockwise) { 694 xStart += 0.125; // Offset xStart by 1/80 of a pixel. Use something 695 // that can be represented in binary 696 } 697 698 var p = getCoords(this, aX, aY); 699 var pStart = getCoords(this, xStart, yStart); 700 var pEnd = getCoords(this, xEnd, yEnd); 701 702 this.currentPath_.push({type: arcType, 703 x: p.x, 704 y: p.y, 705 radius: aRadius, 706 xStart: pStart.x, 707 yStart: pStart.y, 708 xEnd: pEnd.x, 709 yEnd: pEnd.y}); 710 711 }; 712 713 contextPrototype.rect = function(aX, aY, aWidth, aHeight) { 714 this.moveTo(aX, aY); 715 this.lineTo(aX + aWidth, aY); 716 this.lineTo(aX + aWidth, aY + aHeight); 717 this.lineTo(aX, aY + aHeight); 718 this.closePath(); 719 }; 720 721 contextPrototype.strokeRect = function(aX, aY, aWidth, aHeight) { 722 var oldPath = this.currentPath_; 723 this.beginPath(); 724 725 this.moveTo(aX, aY); 726 this.lineTo(aX + aWidth, aY); 727 this.lineTo(aX + aWidth, aY + aHeight); 728 this.lineTo(aX, aY + aHeight); 729 this.closePath(); 730 this.stroke(); 731 732 this.currentPath_ = oldPath; 733 }; 734 735 contextPrototype.fillRect = function(aX, aY, aWidth, aHeight) { 736 var oldPath = this.currentPath_; 737 this.beginPath(); 738 739 this.moveTo(aX, aY); 740 this.lineTo(aX + aWidth, aY); 741 this.lineTo(aX + aWidth, aY + aHeight); 742 this.lineTo(aX, aY + aHeight); 743 this.closePath(); 744 this.fill(); 745 746 this.currentPath_ = oldPath; 747 }; 748 749 contextPrototype.createLinearGradient = function(aX0, aY0, aX1, aY1) { 750 var gradient = new CanvasGradient_('gradient'); 751 gradient.x0_ = aX0; 752 gradient.y0_ = aY0; 753 gradient.x1_ = aX1; 754 gradient.y1_ = aY1; 755 return gradient; 756 }; 757 758 contextPrototype.createRadialGradient = function(aX0, aY0, aR0, 759 aX1, aY1, aR1) { 760 var gradient = new CanvasGradient_('gradientradial'); 761 gradient.x0_ = aX0; 762 gradient.y0_ = aY0; 763 gradient.r0_ = aR0; 764 gradient.x1_ = aX1; 765 gradient.y1_ = aY1; 766 gradient.r1_ = aR1; 767 return gradient; 768 }; 769 770 contextPrototype.drawImage = function(image, var_args) { 771 var dx, dy, dw, dh, sx, sy, sw, sh; 772 773 // to find the original width we overide the width and height 774 var oldRuntimeWidth = image.runtimeStyle.width; 775 var oldRuntimeHeight = image.runtimeStyle.height; 776 image.runtimeStyle.width = 'auto'; 777 image.runtimeStyle.height = 'auto'; 778 779 // get the original size 780 var w = image.width; 781 var h = image.height; 782 783 // and remove overides 784 image.runtimeStyle.width = oldRuntimeWidth; 785 image.runtimeStyle.height = oldRuntimeHeight; 786 787 if (arguments.length == 3) { 788 dx = arguments[1]; 789 dy = arguments[2]; 790 sx = sy = 0; 791 sw = dw = w; 792 sh = dh = h; 793 } else if (arguments.length == 5) { 794 dx = arguments[1]; 795 dy = arguments[2]; 796 dw = arguments[3]; 797 dh = arguments[4]; 798 sx = sy = 0; 799 sw = w; 800 sh = h; 801 } else if (arguments.length == 9) { 802 sx = arguments[1]; 803 sy = arguments[2]; 804 sw = arguments[3]; 805 sh = arguments[4]; 806 dx = arguments[5]; 807 dy = arguments[6]; 808 dw = arguments[7]; 809 dh = arguments[8]; 810 } else { 811 throw Error('Invalid number of arguments'); 812 } 813 814 var d = getCoords(this, dx, dy); 815 816 var w2 = sw / 2; 817 var h2 = sh / 2; 818 819 var vmlStr = []; 820 821 var W = 10; 822 var H = 10; 823 824 // For some reason that I've now forgotten, using divs didn't work 825 vmlStr.push(' <g_vml_:group', 826 ' coordsize="', Z * W, ',', Z * H, '"', 827 ' coordorigin="0,0"' , 828 ' style="width:', W, 'px;height:', H, 'px;position:absolute;'); 829 830 // If filters are necessary (rotation exists), create them 831 // filters are bog-slow, so only create them if abbsolutely necessary 832 // The following check doesn't account for skews (which don't exist 833 // in the canvas spec (yet) anyway. 834 835 if (this.m_[0][0] != 1 || this.m_[0][1] || 836 this.m_[1][1] != 1 || this.m_[1][0]) { 837 var filter = []; 838 839 // Note the 12/21 reversal 840 filter.push('M11=', this.m_[0][0], ',', 841 'M12=', this.m_[1][0], ',', 842 'M21=', this.m_[0][1], ',', 843 'M22=', this.m_[1][1], ',', 844 'Dx=', mr(d.x / Z), ',', 845 'Dy=', mr(d.y / Z), ''); 846 847 // Bounding box calculation (need to minimize displayed area so that 848 // filters don't waste time on unused pixels. 849 var max = d; 850 var c2 = getCoords(this, dx + dw, dy); 851 var c3 = getCoords(this, dx, dy + dh); 852 var c4 = getCoords(this, dx + dw, dy + dh); 853 854 max.x = m.max(max.x, c2.x, c3.x, c4.x); 855 max.y = m.max(max.y, c2.y, c3.y, c4.y); 856 857 vmlStr.push('padding:0 ', mr(max.x / Z), 'px ', mr(max.y / Z), 858 'px 0;filter:progid:DXImageTransform.Microsoft.Matrix(', 859 filter.join(''), ", sizingmethod='clip');"); 860 861 } else { 862 vmlStr.push('top:', mr(d.y / Z), 'px;left:', mr(d.x / Z), 'px;'); 863 } 864 865 vmlStr.push(' ">' , 866 '<g_vml_:image src="', image.src, '"', 867 ' style="width:', Z * dw, 'px;', 868 ' height:', Z * dh, 'px"', 869 ' cropleft="', sx / w, '"', 870 ' croptop="', sy / h, '"', 871 ' cropright="', (w - sx - sw) / w, '"', 872 ' cropbottom="', (h - sy - sh) / h, '"', 873 ' />', 874 '</g_vml_:group>'); 875 876 this.element_.insertAdjacentHTML('BeforeEnd', vmlStr.join('')); 877 }; 878 879 contextPrototype.stroke = function(aFill) { 880 var lineStr = []; 881 var lineOpen = false; 882 883 var W = 10; 884 var H = 10; 885 886 lineStr.push('<g_vml_:shape', 887 ' filled="', !!aFill, '"', 888 ' style="position:absolute;width:', W, 'px;height:', H, 'px;"', 889 ' coordorigin="0,0"', 890 ' coordsize="', Z * W, ',', Z * H, '"', 891 ' stroked="', !aFill, '"', 892 ' path="'); 893 894 var newSeq = false; 895 var min = {x: null, y: null}; 896 var max = {x: null, y: null}; 897 898 for (var i = 0; i < this.currentPath_.length; i++) { 899 var p = this.currentPath_[i]; 900 var c; 901 902 switch (p.type) { 903 case 'moveTo': 904 c = p; 905 lineStr.push(' m ', mr(p.x), ',', mr(p.y)); 906 break; 907 case 'lineTo': 908 lineStr.push(' l ', mr(p.x), ',', mr(p.y)); 909 break; 910 case 'close': 911 lineStr.push(' x '); 912 p = null; 913 break; 914 case 'bezierCurveTo': 915 lineStr.push(' c ', 916 mr(p.cp1x), ',', mr(p.cp1y), ',', 917 mr(p.cp2x), ',', mr(p.cp2y), ',', 918 mr(p.x), ',', mr(p.y)); 919 break; 920 case 'at': 921 case 'wa': 922 lineStr.push(' ', p.type, ' ', 923 mr(p.x - this.arcScaleX_ * p.radius), ',', 924 mr(p.y - this.arcScaleY_ * p.radius), ' ', 925 mr(p.x + this.arcScaleX_ * p.radius), ',', 926 mr(p.y + this.arcScaleY_ * p.radius), ' ', 927 mr(p.xStart), ',', mr(p.yStart), ' ', 928 mr(p.xEnd), ',', mr(p.yEnd)); 929 break; 930 } 931 932 933 // TODO: Following is broken for curves due to 934 // move to proper paths. 935 936 // Figure out dimensions so we can do gradient fills 937 // properly 938 if (p) { 939 if (min.x == null || p.x < min.x) { 940 min.x = p.x; 941 } 942 if (max.x == null || p.x > max.x) { 943 max.x = p.x; 944 } 945 if (min.y == null || p.y < min.y) { 946 min.y = p.y; 947 } 948 if (max.y == null || p.y > max.y) { 949 max.y = p.y; 950 } 951 } 952 } 953 lineStr.push(' ">'); 954 955 if (!aFill) { 956 appendStroke(this, lineStr); 957 } else { 958 appendFill(this, lineStr, min, max); 959 } 960 961 lineStr.push('</g_vml_:shape>'); 962 963 this.element_.insertAdjacentHTML('beforeEnd', lineStr.join('')); 964 }; 965 966 function appendStroke(ctx, lineStr) { 967 var a = processStyle(ctx.strokeStyle); 968 var color = a.color; 969 var opacity = a.alpha * ctx.globalAlpha; 970 var lineWidth = ctx.lineScale_ * ctx.lineWidth; 971 972 // VML cannot correctly render a line if the width is less than 1px. 973 // In that case, we dilute the color to make the line look thinner. 974 if (lineWidth < 1) { 975 opacity *= lineWidth; 976 } 977 978 lineStr.push( 979 '<g_vml_:stroke', 980 ' opacity="', opacity, '"', 981 ' joinstyle="', ctx.lineJoin, '"', 982 ' miterlimit="', ctx.miterLimit, '"', 983 ' endcap="', processLineCap(ctx.lineCap), '"', 984 ' weight="', lineWidth, 'px"', 985 ' color="', color, '" />' 986 ); 987 } 988 989 function appendFill(ctx, lineStr, min, max) { 990 var fillStyle = ctx.fillStyle; 991 var arcScaleX = ctx.arcScaleX_; 992 var arcScaleY = ctx.arcScaleY_; 993 var width = max.x - min.x; 994 var height = max.y - min.y; 995 if (fillStyle instanceof CanvasGradient_) { 996 // TODO: Gradients transformed with the transformation matrix. 997 var angle = 0; 998 var focus = {x: 0, y: 0}; 999 1000 // additional offset 1001 var shift = 0; 1002 // scale factor for offset 1003 var expansion = 1; 1004 1005 if (fillStyle.type_ == 'gradient') { 1006 var x0 = fillStyle.x0_ / arcScaleX; 1007 var y0 = fillStyle.y0_ / arcScaleY; 1008 var x1 = fillStyle.x1_ / arcScaleX; 1009 var y1 = fillStyle.y1_ / arcScaleY; 1010 var p0 = getCoords(ctx, x0, y0); 1011 var p1 = getCoords(ctx, x1, y1); 1012 var dx = p1.x - p0.x; 1013 var dy = p1.y - p0.y; 1014 angle = Math.atan2(dx, dy) * 180 / Math.PI; 1015 1016 // The angle should be a non-negative number. 1017 if (angle < 0) { 1018 angle += 360; 1019 } 1020 1021 // Very small angles produce an unexpected result because they are 1022 // converted to a scientific notation string. 1023 if (angle < 1e-6) { 1024 angle = 0; 1025 } 1026 } else { 1027 var p0 = getCoords(ctx, fillStyle.x0_, fillStyle.y0_); 1028 focus = { 1029 x: (p0.x - min.x) / width, 1030 y: (p0.y - min.y) / height 1031 }; 1032 1033 width /= arcScaleX * Z; 1034 height /= arcScaleY * Z; 1035 var dimension = m.max(width, height); 1036 shift = 2 * fillStyle.r0_ / dimension; 1037 expansion = 2 * fillStyle.r1_ / dimension - shift; 1038 } 1039 1040 // We need to sort the color stops in ascending order by offset, 1041 // otherwise IE won't interpret it correctly. 1042 var stops = fillStyle.colors_; 1043 stops.sort(function(cs1, cs2) { 1044 return cs1.offset - cs2.offset; 1045 }); 1046 1047 var length = stops.length; 1048 var color1 = stops[0].color; 1049 var color2 = stops[length - 1].color; 1050 var opacity1 = stops[0].alpha * ctx.globalAlpha; 1051 var opacity2 = stops[length - 1].alpha * ctx.globalAlpha; 1052 1053 var colors = []; 1054 for (var i = 0; i < length; i++) { 1055 var stop = stops[i]; 1056 colors.push(stop.offset * expansion + shift + ' ' + stop.color); 1057 } 1058 1059 // When colors attribute is used, the meanings of opacity and o:opacity2 1060 // are reversed. 1061 lineStr.push('<g_vml_:fill type="', fillStyle.type_, '"', 1062 ' method="none" focus="100%"', 1063 ' color="', color1, '"', 1064 ' color2="', color2, '"', 1065 ' colors="', colors.join(','), '"', 1066 ' opacity="', opacity2, '"', 1067 ' g_o_:opacity2="', opacity1, '"', 1068 ' angle="', angle, '"', 1069 ' focusposition="', focus.x, ',', focus.y, '" />'); 1070 } else if (fillStyle instanceof CanvasPattern_) { 1071 if (width && height) { 1072 var deltaLeft = -min.x; 1073 var deltaTop = -min.y; 1074 lineStr.push('<g_vml_:fill', 1075 ' position="', 1076 deltaLeft / width * arcScaleX * arcScaleX, ',', 1077 deltaTop / height * arcScaleY * arcScaleY, '"', 1078 ' type="tile"', 1079 // TODO: Figure out the correct size to fit the scale. 1080 //' size="', w, 'px ', h, 'px"', 1081 ' src="', fillStyle.src_, '" />'); 1082 } 1083 } else { 1084 var a = processStyle(ctx.fillStyle); 1085 var color = a.color; 1086 var opacity = a.alpha * ctx.globalAlpha; 1087 lineStr.push('<g_vml_:fill color="', color, '" opacity="', opacity, 1088 '" />'); 1089 } 1090 } 1091 1092 contextPrototype.fill = function() { 1093 this.stroke(true); 1094 }; 1095 1096 contextPrototype.closePath = function() { 1097 this.currentPath_.push({type: 'close'}); 1098 }; 1099 1100 function getCoords(ctx, aX, aY) { 1101 var m = ctx.m_; 1102 return { 1103 x: Z * (aX * m[0][0] + aY * m[1][0] + m[2][0]) - Z2, 1104 y: Z * (aX * m[0][1] + aY * m[1][1] + m[2][1]) - Z2 1105 }; 1106 }; 1107 1108 contextPrototype.save = function() { 1109 var o = {}; 1110 copyState(this, o); 1111 this.aStack_.push(o); 1112 this.mStack_.push(this.m_); 1113 this.m_ = matrixMultiply(createMatrixIdentity(), this.m_); 1114 }; 1115 1116 contextPrototype.restore = function() { 1117 if (this.aStack_.length) { 1118 copyState(this.aStack_.pop(), this); 1119 this.m_ = this.mStack_.pop(); 1120 } 1121 }; 1122 1123 function matrixIsFinite(m) { 1124 return isFinite(m[0][0]) && isFinite(m[0][1]) && 1125 isFinite(m[1][0]) && isFinite(m[1][1]) && 1126 isFinite(m[2][0]) && isFinite(m[2][1]); 1127 } 1128 1129 function setM(ctx, m, updateLineScale) { 1130 if (!matrixIsFinite(m)) { 1131 return; 1132 } 1133 ctx.m_ = m; 1134 1135 if (updateLineScale) { 1136 // Get the line scale. 1137 // Determinant of this.m_ means how much the area is enlarged by the 1138 // transformation. So its square root can be used as a scale factor 1139 // for width. 1140 var det = m[0][0] * m[1][1] - m[0][1] * m[1][0]; 1141 ctx.lineScale_ = sqrt(abs(det)); 1142 } 1143 } 1144 1145 contextPrototype.translate = function(aX, aY) { 1146 var m1 = [ 1147 [1, 0, 0], 1148 [0, 1, 0], 1149 [aX, aY, 1] 1150 ]; 1151 1152 setM(this, matrixMultiply(m1, this.m_), false); 1153 }; 1154 1155 contextPrototype.rotate = function(aRot) { 1156 var c = mc(aRot); 1157 var s = ms(aRot); 1158 1159 var m1 = [ 1160 [c, s, 0], 1161 [-s, c, 0], 1162 [0, 0, 1] 1163 ]; 1164 1165 setM(this, matrixMultiply(m1, this.m_), false); 1166 }; 1167 1168 contextPrototype.scale = function(aX, aY) { 1169 this.arcScaleX_ *= aX; 1170 this.arcScaleY_ *= aY; 1171 var m1 = [ 1172 [aX, 0, 0], 1173 [0, aY, 0], 1174 [0, 0, 1] 1175 ]; 1176 1177 setM(this, matrixMultiply(m1, this.m_), true); 1178 }; 1179 1180 contextPrototype.transform = function(m11, m12, m21, m22, dx, dy) { 1181 var m1 = [ 1182 [m11, m12, 0], 1183 [m21, m22, 0], 1184 [dx, dy, 1] 1185 ]; 1186 1187 setM(this, matrixMultiply(m1, this.m_), true); 1188 }; 1189 1190 contextPrototype.setTransform = function(m11, m12, m21, m22, dx, dy) { 1191 var m = [ 1192 [m11, m12, 0], 1193 [m21, m22, 0], 1194 [dx, dy, 1] 1195 ]; 1196 1197 setM(this, m, true); 1198 }; 1199 1200 /** 1201 * The text drawing function. 1202 * The maxWidth argument isn't taken in account, since no browser supports 1203 * it yet. 1204 */ 1205 contextPrototype.drawText_ = function(text, x, y, maxWidth, stroke) { 1206 var m = this.m_, 1207 delta = 1000, 1208 left = 0, 1209 right = delta, 1210 offset = {x: 0, y: 0}, 1211 lineStr = []; 1212 1213 var fontStyle = getComputedStyle(processFontStyle(this.font), 1214 this.element_); 1215 1216 var fontStyleString = buildStyle(fontStyle); 1217 1218 var elementStyle = this.element_.currentStyle; 1219 var textAlign = this.textAlign.toLowerCase(); 1220 switch (textAlign) { 1221 case 'left': 1222 case 'center': 1223 case 'right': 1224 break; 1225 case 'end': 1226 textAlign = elementStyle.direction == 'ltr' ? 'right' : 'left'; 1227 break; 1228 case 'start': 1229 textAlign = elementStyle.direction == 'rtl' ? 'right' : 'left'; 1230 break; 1231 default: 1232 textAlign = 'left'; 1233 } 1234 1235 // 1.75 is an arbitrary number, as there is no info about the text baseline 1236 switch (this.textBaseline) { 1237 case 'hanging': 1238 case 'top': 1239 offset.y = fontStyle.size / 1.75; 1240 break; 1241 case 'middle': 1242 break; 1243 default: 1244 case null: 1245 case 'alphabetic': 1246 case 'ideographic': 1247 case 'bottom': 1248 offset.y = -fontStyle.size / 2.25; 1249 break; 1250 } 1251 1252 switch(textAlign) { 1253 case 'right': 1254 left = delta; 1255 right = 0.05; 1256 break; 1257 case 'center': 1258 left = right = delta / 2; 1259 break; 1260 } 1261 1262 var d = getCoords(this, x + offset.x, y + offset.y); 1263 1264 lineStr.push('<g_vml_:line from="', -left ,' 0" to="', right ,' 0.05" ', 1265 ' coordsize="100 100" coordorigin="0 0"', 1266 ' filled="', !stroke, '" stroked="', !!stroke, 1267 '" style="position:absolute;width:1px;height:1px;">'); 1268 1269 if (stroke) { 1270 appendStroke(this, lineStr); 1271 } else { 1272 // TODO: Fix the min and max params. 1273 appendFill(this, lineStr, {x: -left, y: 0}, 1274 {x: right, y: fontStyle.size}); 1275 } 1276 1277 var skewM = m[0][0].toFixed(3) + ',' + m[1][0].toFixed(3) + ',' + 1278 m[0][1].toFixed(3) + ',' + m[1][1].toFixed(3) + ',0,0'; 1279 1280 var skewOffset = mr(d.x / Z) + ',' + mr(d.y / Z); 1281 1282 lineStr.push('<g_vml_:skew on="t" matrix="', skewM ,'" ', 1283 ' offset="', skewOffset, '" origin="', left ,' 0" />', 1284 '<g_vml_:path textpathok="true" />', 1285 '<g_vml_:textpath on="true" string="', 1286 encodeHtmlAttribute(text), 1287 '" style="v-text-align:', textAlign, 1288 ';font:', encodeHtmlAttribute(fontStyleString), 1289 '" /></g_vml_:line>'); 1290 1291 this.element_.insertAdjacentHTML('beforeEnd', lineStr.join('')); 1292 }; 1293 1294 contextPrototype.fillText = function(text, x, y, maxWidth) { 1295 this.drawText_(text, x, y, maxWidth, false); 1296 }; 1297 1298 contextPrototype.strokeText = function(text, x, y, maxWidth) { 1299 this.drawText_(text, x, y, maxWidth, true); 1300 }; 1301 1302 contextPrototype.measureText = function(text) { 1303 if (!this.textMeasureEl_) { 1304 var s = '<span style="position:absolute;' + 1305 'top:-20000px;left:0;padding:0;margin:0;border:none;' + 1306 'white-space:pre;"></span>'; 1307 this.element_.insertAdjacentHTML('beforeEnd', s); 1308 this.textMeasureEl_ = this.element_.lastChild; 1309 } 1310 var doc = this.element_.ownerDocument; 1311 this.textMeasureEl_.innerHTML = ''; 1312 this.textMeasureEl_.style.font = this.font; 1313 // Don't use innerHTML or innerText because they allow markup/whitespace. 1314 this.textMeasureEl_.appendChild(doc.createTextNode(text)); 1315 return {width: this.textMeasureEl_.offsetWidth}; 1316 }; 1317 1318 /******** STUBS ********/ 1319 contextPrototype.clip = function() { 1320 // TODO: Implement 1321 }; 1322 1323 contextPrototype.arcTo = function() { 1324 // TODO: Implement 1325 }; 1326 1327 contextPrototype.createPattern = function(image, repetition) { 1328 return new CanvasPattern_(image, repetition); 1329 }; 1330 1331 // Gradient / Pattern Stubs 1332 function CanvasGradient_(aType) { 1333 this.type_ = aType; 1334 this.x0_ = 0; 1335 this.y0_ = 0; 1336 this.r0_ = 0; 1337 this.x1_ = 0; 1338 this.y1_ = 0; 1339 this.r1_ = 0; 1340 this.colors_ = []; 1341 } 1342 1343 CanvasGradient_.prototype.addColorStop = function(aOffset, aColor) { 1344 aColor = processStyle(aColor); 1345 this.colors_.push({offset: aOffset, 1346 color: aColor.color, 1347 alpha: aColor.alpha}); 1348 }; 1349 1350 function CanvasPattern_(image, repetition) { 1351 assertImageIsValid(image); 1352 switch (repetition) { 1353 case 'repeat': 1354 case null: 1355 case '': 1356 this.repetition_ = 'repeat'; 1357 break 1358 case 'repeat-x': 1359 case 'repeat-y': 1360 case 'no-repeat': 1361 this.repetition_ = repetition; 1362 break; 1363 default: 1364 throwException('SYNTAX_ERR'); 1365 } 1366 1367 this.src_ = image.src; 1368 this.width_ = image.width; 1369 this.height_ = image.height; 1370 } 1371 1372 function throwException(s) { 1373 throw new DOMException_(s); 1374 } 1375 1376 function assertImageIsValid(img) { 1377 if (!img || img.nodeType != 1 || img.tagName != 'IMG') { 1378 throwException('TYPE_MISMATCH_ERR'); 1379 } 1380 if (img.readyState != 'complete') { 1381 throwException('INVALID_STATE_ERR'); 1382 } 1383 } 1384 1385 function DOMException_(s) { 1386 this.code = this[s]; 1387 this.message = s +': DOM Exception ' + this.code; 1388 } 1389 var p = DOMException_.prototype = new Error; 1390 p.INDEX_SIZE_ERR = 1; 1391 p.DOMSTRING_SIZE_ERR = 2; 1392 p.HIERARCHY_REQUEST_ERR = 3; 1393 p.WRONG_DOCUMENT_ERR = 4; 1394 p.INVALID_CHARACTER_ERR = 5; 1395 p.NO_DATA_ALLOWED_ERR = 6; 1396 p.NO_MODIFICATION_ALLOWED_ERR = 7; 1397 p.NOT_FOUND_ERR = 8; 1398 p.NOT_SUPPORTED_ERR = 9; 1399 p.INUSE_ATTRIBUTE_ERR = 10; 1400 p.INVALID_STATE_ERR = 11; 1401 p.SYNTAX_ERR = 12; 1402 p.INVALID_MODIFICATION_ERR = 13; 1403 p.NAMESPACE_ERR = 14; 1404 p.INVALID_ACCESS_ERR = 15; 1405 p.VALIDATION_ERR = 16; 1406 p.TYPE_MISMATCH_ERR = 17; 1407 1408 // set up externs 1409 G_vmlCanvasManager = G_vmlCanvasManager_; 1410 CanvasRenderingContext2D = CanvasRenderingContext2D_; 1411 CanvasGradient = CanvasGradient_; 1412 CanvasPattern = CanvasPattern_; 1413 DOMException = DOMException_; 1414})(); 1415 1416} // if