Question

If I do this:

    <canvas id="canvas" width="100" height="100">
        <p>Your browser does not support HTML5 Canvas.</p>
    </canvas>

And this:

    var canvas = document.getElementById('canvas');
    var ctx = canvas.getContext('2d');

    ctx.fillRect(150, 150, 10, 20);

Will the rectangle be rendered or will it be ignored by default?

Answer 1

Short of looking at the source code for a browser, I don’t think there is any way to know. The spec does give us one hint:

When a shape or image is painted, user agents must follow these steps,
in the order given (or act as if they do):

Render the shape or image onto an infinite transparent black bitmap

Note the word ‘infinite’. So the spec does suggest the browser should render things that are beyond the bounds of the canvas. But if I had to guess, most browsers will notice the shape is outside the current clipping region and drop the call. There is no way to render something beyond the bounds of the canvas then “scroll” it into the view, the canvas has no concept of that.