Possible to get Excanvas to work in IE 8?

Question

I used to work on a jQuery plugin named 'BeautyTips' and it was working just fine. But, since I've installed IE 8, this plugin stop working because it needs Excanvas to make IE draw the vectors, images etc.

I've tried to download the newer version of Excanvas but it's not working at all...

Answer 1

Try appending the canvas element to the document before initializing it using excanvas:

var foo = document.getElementById("targetElementID");
var canvas = document.createElement('canvas');
canvas.setAttribute("width", 620);
canvas.setAttribute("height", 310);
canvas.setAttribute("class", "mapping");
foo.appendChild(canvas);
canvas = G_vmlCanvasManager.initElement(canvas);

Answer 2

The new 'standards' mode of IE8 turns off some nonstandard features. Among them VML, which is used by excanvas. I just set for IE7 'standards' mode, so it still works.

<meta http-equiv="X-UA-Compatible" content="IE=7" />

Frustrating, but i don't know of any advantage brought up by IE8.

Answer 3

Yes, I have got excanvas working in IE8 standards mode (only tested for the usage we required). In the function CanvasRenderingContext2D_ I commented out the line:

//el.style.overflow = 'hidden';//fix IE8

The width and height of the node object el was 0px by 0px, so not setting the overflow to hidden made the rendered item visible.

I did change the order of the creation of the canvasPieTimer a bit, to get the required result. I hope this is helpful.

Answer 4

Are you sure you have the most recent version of excanvas.js installed? (released in March 2009, hosted on the new Google Code project page)

I used the Beauty Tips Plugin in IE8 and AFAIK it worked in IE8 native mode.

Answer 5

The latest bt plugin version fixes this issue for me.

Answer 6

Appending a canvas tag as a string of html with jquery doesn't work with the new version of excanvas. You have to use document.createElement('canvas') first.

Answer 7

if anyone still have this issue: Beauty Tips version 0.9.5 fixes this issue. however if you have to use earlier version (like i do, as the new version introduced an issue of tips being closed prematurely in my page), you should replace line 530 with these lines:

var canvas = document.createElement('canvas');  
$(canvas).attr('width', (numb($text.btOuterWidth(true)) + opts.strokeWidth*2)).attr('height', (numb($text.outerHeight(true)) + opts.strokeWidth*2)).appendTo($box).css({position: 'absolute', top: $text.btPosition().top, left: $text.btPosition().left, zIndex: opts.boxzIndex});

hope it helps.