sry forgot to add that the solution in this modification is to call
googleExCanvas(), _without_ specifying a dom node to traverse. I ran
into problems if i tried to init a single dom node.. but the code checks
if a canvas tag has been initialized already, so there's no overhead to
speak of..
Rene Veerman wrote:
Solution:
// Copyright 2006 Google Inc.
//tiny fix by Veerman Internet Services to allow initialization on
HTML loaded after document.ready
//
// Licensed under the Apache License, Version 2.0 (the License);
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
// http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an AS IS BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
implied.
// See the License for the specific language governing permissions and
// limitations under the License.
// Known Issues:
//
// * Patterns are not implemented.
// * Radial gradient are not implemented. The VML version of these
look very
// different from the canvas one.
// * Clipping paths are not implemented.
// * Coordsize. The width and height attribute have higher priority
than the
// width and height style values which isn't correct.
// * Painting mode isn't implemented.
// * Canvas width/height should is using content-box by default. IE in
// 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)
// * Optimize. There is always room for speed improvements.
// only add this code if we do not already have a canvas implementation
if (!window.CanvasRenderingContext2D) {
var googleExCanvas = function(){
// alias some functions to make (compiled) code shorter
var m = Math;
var mr = m.round;
var ms = m.sin;
var mc = m.cos;
// this is used for sub pixel precision
var Z = 10;
var Z2 = Z / 2;
var G_vmlCanvasManager_ = {
init: function(opt_doc){
var doc = opt_doc || document;
if (/MSIE/.test(navigator.userAgent) !window.opera) {
var self = this;
//doc.attachEvent(onreadystatechange, function(){
self.init_(doc);
//});
}
},
init_: function(doc){
if (doc.readyState == complete) {
// create xmlns
if (!doc.namespaces[g_vml_]) {
doc.namespaces.add(g_vml_,
urn:schemas-microsoft-com:vml);
}
// setup default css
var ss = doc.createStyleSheet();
ss.cssText =
canvas{display:inline-block;overflow:hidden; +
// default size is 300x150 in Gecko and Opera
text-align:left;width:300px;height:150px} +
g_vml_\\:*{behavior:url(#default#VML)};
// find all canvas elements
var els = doc.getElementsByTagName(canvas);
for (var i = 0; i els.length; i++) {
if (!els[i].getContext) {
this.initElement(els[i]);
}
}
}
},
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){
el = this.fixElement_(el);
el.getContext = function(){
if (this.context_) {
