Home/ Questions/Q 8157937
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-06T17:27:28+00:00

<!DOCTYPE html> <html> <head> <meta http-equiv=X-UA-Compatible content=IE=edge /> <script src=resources/js/jquery-1.7.2.min.js> </script> … … <script>

  • 0
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <script src="resources/js/jquery-1.7.2.min.js"> </script>
        ...
        ...
        <script>
            ...
            ...
            function draw(screen, data) {  
                if (screen.document.getElementById("screen") == null){
                    screen.document.write('<div id="screen" style="width:' +
                    data.maxX + '; height:' + data.maxY + '; margin: auto;" >' +
                    '<canvas id="screenCanvas" width=' + data.maxX + ' height=' + 
                    data.maxY + 'style="border:2px solid #000000;color:#000000;" > </canvas></div>');
                }
                var canvas = screen.document.getElementById('screenCanvas');
                var context = canvas.getContext('2d');  
                var tileY = 0;
                var tileX = 0;
                var counter = 0;
                var tileWidth = data.tileWidth;
                var tileHeight = data.tileHeight;
                for (var i=0;i<(data.maxX/data.tileWidth);i++){  
                    for (var j=0;j<(data.maxY/data.tileHeight);j++){  
                        var img = new Image();  
                        img.onload = (function(img, tileX, tileY, tileWidth, tileHeight){
                            return function() {
                                context.drawImage(img,tileX, tileY, tileWidth, tileHeight);
                            }
                        })(img, tileX, tileY, tileWidth, tileHeight);  
                        img.src = "http://myserver:8080/images/screen/tile/" + 
                                   data.tiles[counter].imageId; 
                        tileX = tileX + parseInt(data.tileWidth); 
                        counter ++; 
                     } 
                    tileY = tileY + parseInt(data.tileHeight); 
                    tileX = 0;
                }  
            }
            ...
            ...
        </script>
    </head>
    <body>
        ...
        ...
        ...
        ...
    </body>
</html>

i call this function when i open a new window to draw a canvas in the new window contains an array of images.

problem:

1- Internet explorer 9: draw canvas but it didn’t draw images (since the border that i set in the style of the canvas appears).

2- when IE try to get image this error appears

SCRIPT5022: Exception thrown and not caught 
index.html, line 1 character 1

3- Opera 12: it didn’t display canvas.

Note:

1- this function works fine with Firefox, google chrome, and safari.

2- i am sure that internet explorer are not in compatibility view (F12) and not Quirks mode (it is standards).

any help?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team
    <!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <script src="resources/js/jquery-1.7.2.min.js"> </script>
        ...
        ...
        <script>
            ...
            ...
            function draw(screen, data) {  
                var canvas;
                if (screen.document.getElementById("screen") == null){
                    var canvasDiv = screen.document.createElement("div"); 
                    canvasDiv.id = "screen"; 
                    canvasDiv.style.margin = "0px auto";
                    canvasDiv.style.width = data.maxX;
                    canvasDiv.style.height = data.maxY;
                    canvasDiv.style.border='2px solid black';
                    screen.document.body.appendChild(canvasDiv); 

                    canvas = screen.document.createElement('canvas');
                    canvas.setAttribute('width', data.maxX);
                    canvas.setAttribute('height', data.maxY);
                    canvas.setAttribute('id', 'screenCanvas');
                    canvasDiv.appendChild(canvas);
                    if(typeof G_vmlCanvasManager != 'undefined') {
                        canvas = G_vmlCanvasManager.initElement(canvas);
                    }
                }else{
                    canvas = screen.document.getElementById('screenCanvas');
                }

                var context = canvas.getContext('2d');  
                var tileY = 0;
                var tileX = 0;
                var counter = 0;
                var tileWidth = data.tileWidth;
                var tileHeight = data.tileHeight;
                for (var i=0;i<(data.maxX/data.tileWidth);i++){  
                    for (var j=0;j<(data.maxY/data.tileHeight);j++){  
                        var img = new Image();  
                        img.onload = (function(img, tileX, tileY, tileWidth, tileHeight){
                            return function() {
                                context.drawImage(img,tileX, tileY, tileWidth, tileHeight);
                            }
                        })(img, tileX, tileY, tileWidth, tileHeight);  
                        img.src = "http://myserver:8080/images/screen/tile/" + 
                                   data.tiles[counter].imageId; 
                        tileX = tileX + parseInt(data.tileWidth); 
                        counter ++; 
                     } 
                    tileY = tileY + parseInt(data.tileHeight); 
                    tileX = 0;
                }  
            }
            ...
            ...
        </script>
    </head>
    <body>
        ...
        ...
        ...
        ...
    </body>
</html>

    reference: http://www.williammalone.com

    since IE doesn’t know what the canvas tag means, and if we used that in our markup, IE would serve us an entrée of error. Instead we create a canvas element in JavaScript.

    hope this help you

    • 0