exCanvas in IE and firing on image load
49 views
Skip to first unread message
Subu
Jul 18, 2008, 7:13:00 PM7/18/08
to google-excanvas
I have a script to draw stuff onto a canvas when an image loads. The
idea is to have a chart of some data, the data is requested by the
user, but along with the data, the page also loads a tiny image and on
image load, I am calling a javascript function to draw stuff onto a
canvas. The bigger idea is to have text data and graphical data with
one click. All this works in Firefox, but not in IE. In IE, the
drawing part works if it initiated by a button click or image click.
It does not work when called from onload in the image. I think it is
because the excanvas.js does not exist until the body.onload event. I
can't fire this when the body loads as the body tag part of the page
is common to all pages in the application.
Below is a simplified version of the code. Am I doing something
wrong? Is there a workaround? Can I fire the script on some other
event? Any other way to get the same effect - get text and chart with
one click?
<html>
<head>
<title>Arc Test</title>
<!--[if IE]><script type="text/javascript" src="../excanvas.js"></
script><![endif]-->
<script>
function drawArc()
{
var ctx = document.getElementById('c').getContext('2d');
ctx.beginPath();
ctx.arc(200, 200, 100, 0, Math.PI, true);
ctx.stroke();
ctx.lineTo(200, 200);
};
</script>
</head>
<body>
<img src="http://www.expenseregister.com/images/1by1.gif"
onload="javascript:drawArc();" />
<canvas id=c width=400 height=400></canvas>
<p>Test test...</p>
<input type='button' value='For IE' onclick="javascript:drawArc();" /
>
</body>
</html>
idea is to have a chart of some data, the data is requested by the
user, but along with the data, the page also loads a tiny image and on
image load, I am calling a javascript function to draw stuff onto a
canvas. The bigger idea is to have text data and graphical data with
one click. All this works in Firefox, but not in IE. In IE, the
drawing part works if it initiated by a button click or image click.
It does not work when called from onload in the image. I think it is
because the excanvas.js does not exist until the body.onload event. I
can't fire this when the body loads as the body tag part of the page
is common to all pages in the application.
Below is a simplified version of the code. Am I doing something
wrong? Is there a workaround? Can I fire the script on some other
event? Any other way to get the same effect - get text and chart with
one click?
<html>
<head>
<title>Arc Test</title>
<!--[if IE]><script type="text/javascript" src="../excanvas.js"></
script><![endif]-->
<script>
function drawArc()
{
var ctx = document.getElementById('c').getContext('2d');
ctx.beginPath();
ctx.arc(200, 200, 100, 0, Math.PI, true);
ctx.stroke();
ctx.lineTo(200, 200);
};
</script>
</head>
<body>
<img src="http://www.expenseregister.com/images/1by1.gif"
onload="javascript:drawArc();" />
<canvas id=c width=400 height=400></canvas>
<p>Test test...</p>
<input type='button' value='For IE' onclick="javascript:drawArc();" /
>
</body>
</html>
Emil A Eklund
Jul 18, 2008, 7:44:36 PM7/18/08
to google-...@googlegroups.com
This sounds like one of the rare cases where having a document onload
handler might be a good idea, that way it will fire after the image has
loaded and the canvas emulation has been initialized.
Another option would be to manually initialize the canvas emulation in
the drawArc method, like this:
function drawArc() {
if (!window.CanvasRenderingContext2D) {
G_vmlCanvasManager.init();
}
...
}
--
Emil A Eklund
e...@eae.net
Subu
Jul 21, 2008, 3:09:30 PM7/21/08
to google-excanvas
Thanks for the suggestions. The initing won't work - I think in IE
the scripts are downloaded after the images or some such order...
basically the javascript isn't there yet when the img onload is
fired. The other suggestion window.onload, that works for a normal
page (and the example I posted here), but in my app, it is an AJAX
call and parts of the document are replaced with the data, so the
window.onload does not fire after getting the new data. Do you know
of any other events?
> signature.asc
> 1KDownload
the scripts are downloaded after the images or some such order...
basically the javascript isn't there yet when the img onload is
fired. The other suggestion window.onload, that works for a normal
page (and the example I posted here), but in my app, it is an AJAX
call and parts of the document are replaced with the data, so the
window.onload does not fire after getting the new data. Do you know
of any other events?
> 1KDownload
Reply all
Reply to author
Forward
0 new messages