getContext() not working...

2,884 views
Skip to first unread message

sih...@gmail.com

unread,
Mar 4, 2008, 12:51:31 PM3/4/08
to google-excanvas
Hi,

I am testing the waters with excanvas but whenever I call getContext,
ie7 throws an error saying that the method is not supported. Any
ideas? I have included my simple piece of code below.


Thanks,

Danny

<canvas id="stuff" height="150" width="150">some default</canvas>

<script type="text/javascript" src="newExcanvas.js" ></script>
<script type="text/javascript" >

var stuff= document.getElementById('stuff');
stuff.getContext('2d');


</script>

timothytoe

unread,
Mar 4, 2008, 1:31:34 PM3/4/08
to google-excanvas
This one cost me many hours last Thursday and Friday. My situation was
that everything worked fine if the canvas was part of the html file,
but if I created the canvas on-the-fly with JavaScript, I could not
get the context in IE.

I'm not sure why you're getting the problem, maybe because your check
comes so soon after the canvas is created.

Try one of these. The first is for jQuery. The second is if you don't
have jQuery.

if ($.browser.msie) { //if you're already being nasty all over
your code to handle IE nightmares, check for IE directly (example in
jQuery)
canvas=window.G_vmlCanvasManager.initElement(canvas);
}

if (typeof window.G_vmlCanvasManager!="undefined") { //a
friendlier way to check to see if we're in IE emulating Canvas
canvas=window.G_vmlCanvasManager.initElement(canvas);
}

I've checked both ways of doing it in FF, IE, Opera, and Safari on
Windows.

If it works, you owe me a beer. It's not my solution. I found it
checking into the charting library called "flot."

sih...@gmail.com

unread,
Mar 4, 2008, 2:13:50 PM3/4/08
to google-excanvas
It works!!!! Hahaha. Looks like I owe you a beer, let me know if you
are ever in the bay area.


Thanks again,

Danny

timothytoe

unread,
Mar 4, 2008, 2:38:04 PM3/4/08
to google-excanvas
Heh on the beer. I'm tempted to make you do it next time in in bay
area.

Searching the archives, this bug comes up over and over. My problem
was that it took me so long to nail down the problem line of code
because I just refused to believe that it was something like that.

I see that there's a sort-of-solution in the patch area to let you
create dynamic contexts, but it seems to me that overriding getContext
would be better so people don't have to even think about changing
their code.

I still feel like a newbie in JS, but shouldn't you be able to save
off the old getContext, intercept getContext calls, and then do that
IE hack?

I really shouldn't spend my time this way, but I'm going to try to fix
that booger for good.

Erik Arvidsson

unread,
Mar 4, 2008, 4:50:16 PM3/4/08
to google-...@googlegroups.com
The problem is that you need an instance of the element to add the
getContext method.

--
erik

timothytoe

unread,
Mar 4, 2008, 11:27:30 PM3/4/08
to google-excanvas
Are you sure that can't be handled transparently in excanvas?

Klaus Reimer

unread,
Mar 5, 2008, 3:05:52 AM3/5/08
to google-...@googlegroups.com
timothytoe wrote:
> Are you sure that can't be handled transparently in excanvas?

It could be changed to handle it transparently. I did this before in my
own humble attempt to build a Canvas/VML-Wrapper. It's possible to
overwrite the document.createElement Method. This custom Method can then
check if a "<canvas />" is going to be created. If not, then the
original createElement method is called. If yes, then the special
excanvas stuff can be called.

In this way it's handled transparently and all you have to do is
conditionally including the excanvas.js in your page.

I think I did it like this (Don't have the code anymore):

origCreateElement = document.createElement;
document.createElement = function(tagName)
{
var element = origCreateElement(tagName);
if (tagName == "canvas" || tagName.toLowerCase().indexOf("<canvas")
=== 0)
{
...Do excanvas initialization on element...
}
return element;
}

--
Bye, K <http://www.ailis.de/~k/>
[A735 47EC D87B 1F15 C1E9 53D3 AA03 6173 A723 E391]
(Finger k...@ailis.de to get public key)

signature.asc

timothytoe

unread,
Mar 5, 2008, 10:22:31 AM3/5/08
to google-excanvas
That's a great idea. Seems like it would be worth it, considering the
number of people who run into the problem.
> signature.asc
> 1KDownload

Steve Clay

unread,
Mar 5, 2008, 12:17:27 PM3/5/08
to google-...@googlegroups.com
Klaus Reimer wrote:
> origCreateElement = document.createElement;
> document.createElement = function(tagName) ...

This makes at least four people who've suggested wrapping createElement
over the last 2 years including myself [1]. The admins don't seem to be
into the idea, but this continues to confound new users who're using new
canvas elements because there's no docs/example for it. FWIW, here's the
shortest code I can come up with:

var cv = document.createElement('canvas');
window.G_vmlCanvasManager && (cv = );

or faster if you plan to generate several:

var createCanvas = window.G_vmlCanvasManager
? function () {
return G_vmlCanvasManager.initElement(
document.createElement('canvas'));
}
: function () {return document.createElement('canvas');};

[1] http://groups.google.com/group/google-excanvas/msg/46d9645009827294

--
Steve Clay
http://mrclay.org/

timothytoe

unread,
Mar 5, 2008, 12:22:18 PM3/5/08
to google-excanvas
I don't see how it can be ignored. Other than this problem, excanvas
does a pretty great job of working as a drop-in that you can ignore.

What is the license for excanvas? Can we fork this sucker off and
start improving it?

Steve Clay

unread,
Mar 5, 2008, 12:25:51 PM3/5/08
to google-...@googlegroups.com
Steve Clay wrote:
> var cv = document.createElement('canvas');
> window.G_vmlCanvasManager && (cv = );

Oops, that would of course be:

var cv = document.createElement('canvas');

window.G_vmlCanvasManager && (cv = G_vmlCanvasManager.initElement(cv));

I'm going to submit some new docs patches...

Erik Arvidsson

unread,
Mar 5, 2008, 5:47:10 PM3/5/08
to google-...@googlegroups.com
I'm not totally opposed to changing createElement but there are tons
of way to create and get elements and there is no way to override them
all.

Ways to create elements:

createElement
innerHTML
outerHTML
document.write
insertAdjacentHTML
createNode

Ways to get elements

getElementsById
getElementsByTagName
getElementsByName
document.all
document.all.tags
childNodes
firstChild
lastChild
children
nextSibling
previousSibling

and probably a few more.

I have been experimenting with using expression to get the getContext
applied automagically but I need to spend more time on this.

> What is the license for excanvas? Can we fork this sucker off and
> start improving it?

That's ridiculous. ExCanvas allows you to do whatever you want with
it but it would be for a better good if people submitted patches on
head (not zip files of their modified ex canvas from 2 years ago).

Lately, I've really considered moving ex canvas to code.google.com
since source forge sucks. I'll post a seperate message covering that.


--
erik

Reply all
Reply to author
Forward
0 new messages