Ask questions and get good answers on jQuery

Question

Hi there,

I need assistance with a jQuery script that I have written, currently it works in Chrome / FF / Safari but it doesn't work in IE! I am using the strict HTML document type but have also tried the new HTML 5 <!DOCTYPE html> tag.

I'm trying to use the HTML 5 <canvas> element and to enable this for IE I am using the recommended script in my declaration as follows:

I then append a canvas element to the document.body in the following manner:

$('body').append('<canvas id="designer_grid" width= ' + opts.docWidth + ' height= ' + opts.docHeight + '></canvas>');

I get a reference to the <canvas> element and initialize it with the following code:

var canvas = document.getElementById('designer_grid'); var G_vmlCanvasManager; if (window.G_vmlCanvasManager) { G_vmlCanvasManager.initElement($('designer_grid')); }



var context = canvas.getContext('2d');

When I say it doesn't work in IE, the script debugger in IE breaks inside jQuery's source and highlights a statement that reads:

if(e)f[b]=d;

Any help would be greatly appreciated...

Cheers,

Mathew

+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ Update 10 Febr. +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

Hi Matteo,

Thank you so much for your feedback. I tried your suggestion with the following code:



var canvas = document.getElementById('designer_grid');
var G_vmlCanvasManager;

// code for IE browsers
if (window.G_vmlCanvasManager)
{
    //canvas = window.G_vmlCanvasManager.initElement('#designer_grid');
    canvas = window.G_vmlCanvasManager.initElement(canvas);
    var context = canvas.getContext('2d');
}
// Non IE browsers
else
{
    var context = canvas.getContext('2d');
}

I added watches in IE 8's developer tools and I see that typeof G_vmlCanvasManager ="undefined", context = object (including all drawing methods) and canvas= dispHTMLUnknownElement.

Now, at least I am able to get everything code-wise working (i.e. the display, and mostly correct, formatting of content) but the drawing feature does not work. I have searched and searched and can not find any answers....

Accepted Answer

1

When in your code you have:

if (window.G_vmlCanvasManager) { G_vmlCanvasManager.initElement($('designer_grid')); }

Shouldn't it be?

if (window.G_vmlCanvasManager) { G_vmlCanvasManager.initElement($('#designer_grid')); }

Any way, as shown in the excanvas.js doc, you should not use a jQuery object to init:

var el = document.createElement('canvas');
G_vmlCanvasManager.initElement(el);
var ctx = el.getContext('2d');

Try:

G_vmlCanvasManager.initElement(canvas);

answered Feb 09 '10 at 18:12

Matteo Bicocchi ♦♦
1776●1●2●9

actually, although the code is working in FF I am receiving an interesting javascript error in profiler, "Empty string passed to getElementById()."

(Feb 10 '10 at 15:39) Mat

Actually, I think half of my problem in IE is coming from calling a method that must not exist in excanvas, fillText(), which is supported in all other browsers. I have found an alternative (http://code.google.com/p/canvas-text/) and will begin working with this but apart from that the drawings still do not display on IE, which they should, as excanvas implements the same methods that other browsers provide native support for.......i'm confused @@

(Feb 10 '10 at 16:51) Mat

Answer 2

0

If we use G_vmlCanvasManager.initElement(canvas) it makes getContext function to work fine in IE also, but the context object created is missing some of the expected methods like measureText(), fillText() etc.

Can any one help me to find a solution for this?

answered Jul 19 '11 at 07:59

Nahalingam
1

Answer 3

0	COULD YOU TELL ME WHERE CAN I FIND A INSTRUCTION HOW TO INSTALL THIS SCRIPT AS A BACKGROUND TO MY WEB SITE ??? I HAVE PROBLEM BECAUSE WHEN I USE FIREFOX THERE POP UP A ERROR answered Jul 25 '11 at 17:50 ALEXANDERRRRR 1

Ask questions and get good answers on jQuery

jQuery & HTML 5 <canvas> element in IE

Follow this question

pupunzi.com

pupunzi's blog

Other products:

Related questions