Canvas cannot perform fill if size is too big

Question

After I set the canvas in HTML for a certain size, for example, 800x600, the script will not fill for me, but if I set it to be 150x150, it will. Why is it happening? Can it be fixed? Any help would be appreciated.

HTML:

<!DOCTYPE html>
<html>
    <head>
        <title>Let's Draw!</title>
        <link rel="stylesheet" type="text/css" href="style.css" />
        <script type="text/javascript" src="script.js"></script>
    </head>
    <body onload="drawShape();">
        <canvas id="my_canvas" width="800" height="600">
            This text is displayed if your browser does not support HTML5 Canvas.
        </canvas>
    </body>
</html>

Javascript:

function drawShape(){
    var canvas = document.getElementById('my_canvas');

    if (canvas.getContext){

        var ctx = canvas.getContext('2d');  // ctx = context

        ctx.fillStyle = "red";

        // Filled triangle
        ctx.beginPath();
        ctx.moveTo(25,25);
        ctx.lineTo(105,25);
        ctx.lineTo(25,105);
        ctx.fill();

        // Stroked triangle
        ctx.beginPath();
        ctx.moveTo(125,125);
        ctx.lineTo(125,45);
        ctx.lineTo(45,125);
        ctx.closePath();
        ctx.stroke();

    } else {
        alert('You need Safari or Firefox 1.5+ to see this demo.');
    }
}

But not for me. I think there is a limited pixels, or size limit for the canvas element, maybe different for different devices and computers? — Pete C., Dec 24 '12 at 21:00
I think this is my answer: http://stackoverflow.com/questions/6081483/maximum-size-of-a-canvas-element — Pete C., Dec 24 '12 at 21:13

score 0 · Answer 1 · answered Jan 09 '13 at 08:57

0

800x600 is relatively small and should be supported by all reasonable browsers that support canvas. Canvases 4 times the size should work. What browser/OS are you using?

answered Jan 09 '13 at 08:57

DLev

53
2
8

Canvas cannot perform fill if size is too big

1 Answers1