I tried out like this but it don't seems to fire under IE browsers.
Did I made some mistakes?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"; xml:lang="en" lang="en"
dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=7" /><!-- Make Excanvas
work under IE8 standard mode -->
<title>test</title>
<script type="text/javascript" src="moo.js"></script>
<script type="text/javascript" src="drag.js"></script>
<!--[if IE]><script src="excanvas.js" type="text/javascript"></
script><![endif]-->
<style>
*{padding:0; margin:0;}
html{width:100%; height:100%}
</style>
<script type="text/javascript">
window.addEvent('domready', function(){
var bodyElement = $(document.body);
var bodySize = bodyElement.getSize();
var canvas = document.createElement('canvas', {id: 'mycanvas'});
canvas.setAttribute("id",'mycanvas');
if (typeof G_vmlCanvasManager != "undefined") {
canvas.inject(document.body);
G_vmlCanvasManager.initElement(canvas);
canvas = $(document.body).lastChild;
}
canvas.inject(bodyElement, 'top');
var ctx = $('mycanvas').getContext('2d');
// Draw shapes
ctx.beginPath();
ctx.moveTo(25,25);
ctx.bezierCurveTo(75,37,100,25,50,25);
ctx.strokeStyle = "#FFA500";
ctx.stroke();
});
</script>
</head>
<body>
<!-- <canvas id="mycanvas" width:"800px" height:"600px"></canvas> When
i wrote the canvas markup into the body "by hand" it work -->
</body>
</html>
On 9 juil, 23:25, Paul Spencer <[email protected]> wrote:
> The version of excanvas that I used before wouldn't work out of the
> box with injected tags so I did something like this
>
> var canvas = document.createElement('canvas');
>
> if (typeof G_vmlCanvasManager != "undefined") {
> canvas.inject(document.body);
> G_vmlCanvasManager.initElement(canvas);
> canvas = $(document.body).lastChild;
>
> }
>
> canvas.inject(whereIWantItToGo);
>
> I can't remember why it was necessary to inject it in the body then
> retrieve a reference after calling initElement and then inject it
> where I wanted it. Perhaps that is no longer necessary but I seem to
> recall it was at the time.
>
> Hope this helps,
>
> Paul
>
> On 9-Jul-09, at 5:17 PM, guillem wrote:
>
>
>
> > Hi guys,
>
> > I'm using Excanvas to make IE browsers support... canvas.
> > My problem is, when i try to inject a canvas into the body, IE
> > browsers don't seems to see it.
>
> > Here's the piece of code I wrote:
>
> > <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://
> >www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
> > <html xmlns="http://www.w3.org/1999/xhtml"; xml:lang="en" lang="en"
> > dir="ltr">
> > <head>
> > <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
> > <meta http-equiv="X-UA-Compatible" content="IE=7" /><!-- Make Excanvas
> > work under IE8 standard mode -->
>
> > <title>test</title>
>
> > <script type="text/javascript" src="mootools.js"></script>
> > <script type="text/javascript" src="mootools-more.js"></script>
>
> > <!--[if IE]><script src="excanvas.js" type="text/javascript"></
> > script><![endif]-->
>
> > <style>
> > *{padding:0; margin:0;}
> > html{width:100%; height:100%}
> > </style>
>
> > <script type="text/javascript">
>
> > window.addEvent('domready', function(){
>
> > var bodyElement = $(document.body);
> > var bodySize = bodyElement.getSize();
>
> > var mycanvas = new Element('canvas', {id: 'mycanvas', width:
> > bodySize.x, height:bodySize.y});
> > mycanvas.inject(bodyElement, 'top');
>
> > var ctx = $('mycanvas').getContext('2d');
>
> > // Draw shapes
> > ctx.beginPath();
> > ctx.moveTo(25,25);
> > ctx.bezierCurveTo(75,37,100,25,50,25);
> > ctx.strokeStyle = "#FFA500";
> > ctx.stroke();
>
> > });
>
> > </script>
>
> > </head>
> > <body>
> > <!-- <canvas id="mycanvas" width:"800px" height:"600px"></canvas> When
> > i wrote the canvas markup into the body "by hand" it work -->
> > </body>
> > </html>
>
> > thanks for your help!
