excanvas IE8, Unexpected call to method or property access

Question

Hi I am getting an error on IE8 which is "Unexpected call to method or property access." at the line "foo.appendChild(canvas);" My codes are as follows.

 <canvas id="foo" class="canvasstyle" height="300" width="300"></canvas>

var foo = document.getElementById("foo");
var canvas = document.createElement('canvas');
canvas.setAttribute("width", 300);
canvas.setAttribute("height", 300);
foo.appendChild(canvas);
canvas= G_vmlCanvasManager.initElement(canvas);
var ctx = canvas.getContext('2d');
ctx.save();
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.translate(canvas.width / 2, canvas.height / 2);
    ctx.drawImage(server, -112, -120);
    ctx.rotate(x2 * Math.PI / 180);

        ctx.drawImage( point, -198, -80 );
        ctx.restore();

Does anybody have any idea how to get rid of this error and work canvas on IE8. Thank you for your help...

Answer 1

I think that there is a good chance that your issue is that you are inserting a canvas into another canvas... I cannot think of a legitimate reason for this and because anything inside of a canvas element is only visible in browsers that do not support canvas, it is certainly in violation of the intended use.

This is the intended use:

<canvas width="600" height="400">
    Your browser can't handle our site and it looks very outdated... Try installing
    <a href="https://chrome.google.com">one that doesn't suck</a>.
</canvas>

On any browser that supports canvas the message inside will not display. Try inserting your canvas into another element.