CODEWITHSUNDEEP
javascripthtmlcanvashtml5-canvas
auroranil
auroranil

Reputation: 2661

Does HTML5 Canvas render off-screen by default?

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?

Upvotes: 4

Views: 5006

Answers (3)

Jeetendra Chauhan
Jeetendra Chauhan

Reputation: 1977

i create this demo http://jsbin.com/okoful/edit#javascript,html,live using two canvas and i conclude that if we draw outside of canvas it will not render it.

var canvas1 = document.getElementById('canvas1');
var ctx1 = canvas1.getContext('2d');
ctx1.fillRect(50, 50, 300, 300);
var canvas2 = document.getElementById('canvas2');
var ctx2 = canvas2.getContext('2d');
ctx2.translate(0,0);
ctx2.drawImage(ctx1.canvas,0,0);

$("#debug").text("Output: ");

Upvotes: 1

Simon Sarris
Simon Sarris

Reputation: 63812

It's actually different for different browsers and different drawing commands.

IE9 has wisened up and does a no-op on drawImage calls if the image is out of the canvas' bounds. This is easily noticeable in the IE9 performance profiler.

This might be an optimization that is only done when the transformation matrix is identity, I haven't checked otherwise.

Other browsers differ, of course!

Upvotes: 0

Matt Greer
Matt Greer

Reputation: 62027

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.

Upvotes: 1

Related Questions