Strange issue with Canvas in Internet Explorer 9, is there any constraint of width and size of canvas/context?_问答_开发者

Strange issue with Canvas in Internet Explorer 9, is there any constraint of width and size of canvas/context?

开发者 https://www.devze.com 2023-03-16 22:00 出处：网络

I have a very simple code which draws a image on a large canvas (2560 * 2560), which works perfectly in FireFox but in IE the images are not getting rendered after a particular width and height (appro

Check the code:

Is this a bug with IE9, or a design constraint of width and size of canvas/contex开发者_如何学Got?

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
</head>
<body>
    <div style="background-color:#000;width:2560px;height:2560px;">
        <canvas id="map" width="2560px" height="2560px"></canvas>
    </div>
</body>
</html>
<script
    src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.5.1.min.js" 
    type="text/javascript"></script>
<script>
    $(document).ready(function () {
        var canvas = document.getElementById("map");
        var ctx = canvas.getContext("2d");
        var img = new Image();

        img.onload = function () {
            for (var y = 0; y < 2560; y += 256) {
                for (var x = 0; x < 2560; x += 256) {
                    ctx.drawImage(img, x, y, 256, 256);
                }
            }
            ctx.fillStyle = "rgba(255, 0, 0, 1)";
            ctx.fillRect(2400, 2400, 100, 100);
        };
        img.src = "http://mt1.google.com/vt/lyrs=m@157000000&hl=en&x=9&y=28&z=6&s=Ga";
    });
</script>

There doesn't seem to be any problem with IE 9.0.8112 on Windows 7.

It may be specific to your computer, too few resources or something.

Is this example below not working for you?

http://jsfiddle.net/5QrVk/6/

For the record, having a smaller canvas and translating it when you want to view more is almost always a good idea. What are you doing that needs such a large space?