locked
Canvas Max Size?

    Question

  • Does the canvas have a max size? It seems to stop drawing shapes when the width gets greater than 8000. ( not sure of the exact number )

    Thanks,

    Todd


    STBraley

    Wednesday, June 20, 2012 3:36 AM

Answers

  • Todd,

    This appears to be an IE 10 bug.  I filed a bug for this.

    I am not aware of any possible repro at the moment.

    -Jeff


    Jeff Sanders (MSFT)

    Thursday, June 21, 2012 1:40 PM
    Moderator

All replies

  • Hi Braley,

    Can you provide simple sample code to repro the issue?

    -Jeff


    Jeff Sanders (MSFT)

    Wednesday, June 20, 2012 1:54 PM
    Moderator
  • Sure, the following code will show you the problem. There should be 1000 blue boxes painted. However, only 73 paint.

    // First add a container div the home.html file on the navigation template project. Make sure you set the style so that the div will scroll.

    <div id="container" style="overflow-x:auto; overflow-y:hidden;-ms-overflow-style:-ms-autohiding-scrollbar;"></div>

    // In your home.js file add the following javascript to try and paint 1000 blue boxes that should be scroll-able across the screen.

    // The scroll bar appears to be working, however only 73 and  1/2  boxes are drawn

                                

    WinJS.UI.Pages.define("/pages/home/home.html", {

            // This function is called whenever a user navigates to this page. It

            // populates the page elements with the app's data.
            ready: function (element, options) {
                // TODO: Initialize the page here.

                var container = document.getElementById("container");
                var canvas = document.createElement("canvas");
                container.appendChild(canvas);

                canvas.height = container.offsetHeight;

                var context = canvas.getContext("2d");
                var count = 1000;


                var x = 10; // start 10 pixels in..
                canvas.width = count * 100 + 50; // +50 to give me a little more room than I will need
                for (var n = 0; n < count; n++) {

                    context.fillStyle = "blue";
                    context.fillRect(x, 10, 100, 100);

                    context.fillStyle = "Red";

                    // center number under the box
                    var measure = context.measureText(n.toString());
                    var offset = (100 - measure.width) / 2;

                    context.font = "20px Calibri";
                    context.fillText(n.toString(), x + offset, 140, 100);

                    x += 100 + 10; // + 10 to give it a little padding
                }
            }
        });

    Thanks for your Help,

    Todd 


    STBraley

    Wednesday, June 20, 2012 4:36 PM
  • Thanks Todd,

    I am able to repro this given your code.  I will investigate further and update you.

    -Jeff


    Jeff Sanders (MSFT)

    Wednesday, June 20, 2012 5:58 PM
    Moderator
  • Todd,

    This appears to be an IE 10 bug.  I filed a bug for this.

    I am not aware of any possible repro at the moment.

    -Jeff


    Jeff Sanders (MSFT)

    Thursday, June 21, 2012 1:40 PM
    Moderator
  • Any news on this???

    I faced the same issue on the new Surface RT. But the max. size is 2048 pixels, which is pretty low!


    Example code:

        var img = new Image();
        img.onload = function () {
            var c = document.createElement('canvas');
            c.width = this.naturalWidth;
            c.height = this.naturalHeight;
    
            var cx = c.getContext('2d');
            cx.drawImage(this, 0, 0, c.width, c.height);
    
            // TODO: Save the canvas to file.
            saveCanvasToFile(c);
        };
        img.src = URL.createObjectURL(file, { oneTimeOnly: true });
    

    This code works fine for images < 2048 pixels (on Surface RT). Large images will be cropped at 2048x2048 pixels.

    Thanks

    -Joerg

    Wednesday, November 14, 2012 12:07 PM
  • Try setting your canvas and height to an appropriate size.  8292 is the max.

    For example.  This works for the entire size:

    <html>
    <head>
        <title>Canvas test</title>
        <script type="text/javascript">
            function draw() {
                var canvas = document.getElementById("myCanvas");
                //  if the canvas element exists 
                if (canvas.getContext) {
                    // Draw some rectangles with different color values
                    var ctx = canvas.getContext("2d");
                    ctx.fillStyle = "red";
                    ctx.fillRect(5, 5, 100, 100);
                    ctx.fillStyle = "rgba(0,50,200,0.5)";
                    ctx.fillRect(55, 55, 100, 100);
                    ctx.fillStyle = "rgba(0,255,10,0.5)";
                    ctx.fillRect(8100, 8100, 100, 100);
                }
            }
        </script>
    </head>
    <body onload = "draw();">
        <canvas id="myCanvas"" width="8292" height="8292" >
           Canvas is not supported on this browser or in this mode
        </canvas>
    </body>
    </html>

     

    Jeff Sanders (MSFT)

    Wednesday, November 21, 2012 7:19 PM
    Moderator
  • Hi Jeff,

    I faced the same issue. I found that different computers have different max width limitation.

    As your example, the width of canvas was set as 8292. However, if I want to replace fillRect(55, 55, 100, 100) as fillRect(55, 55, 8292, 100)...

    As some computers with Windows 8 RTM, it can fill 8192px, and my ultraBook with Windows 8 RTM it can fill as whole, but my platform with Windows RT, it can only fill 2048px...

    So, it there any way to get the value of max fill width limitation?

    Thanks.

    Nick

    Tuesday, November 27, 2012 5:54 AM