4

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 (approximately after 2200). Canvas does respond to click events in that area.

Check the code:

Is this a bug with IE9, or a design constraint of width and size of canvas/context?

<!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>
2
  • 1
    From what I can tell, there is no size limitation in the spec but MSIE might have chosen to limit the memory used by the canvas to 20 MB (note that each pixel requires 4 bytes). Jul 1, 2011 at 12:34
  • Note that width= and height= require numbers without px.
    – pimvdb
    Jul 1, 2011 at 14:25

1 Answer 1

1

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?

9
  • It works for me too (Vista, same IE version). Also adding a click event handler works just fine.
    – pimvdb
    Jul 1, 2011 at 14:24
  • it seems to be machine specific issue, the jsfiddle.net and even my own code is working on my home box. I will checkback on my work box and will update the thread. Jul 1, 2011 at 15:19
  • What I really wants do a show huge floor plans on canvas (more like a map) Jul 1, 2011 at 15:23
  • 1
    What you really want is a smaller canvas (probably) and to use the concept of a viewport, using context.translate(x,y) to scroll. Jul 1, 2011 at 15:48
  • Even the fiddle is not working on my work box - IE Version: 9.0.8112.16421 Update Versions: 9.0.1 (KB2530548), Windows 7 Enterprise Jul 15, 2011 at 6:10

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.