StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>I think I get what you're saying. One possibility is to split your animation onto multiple <code><canvas></code> elements, each with their own position and z-index based on where they are on the screen (so at the bottom over the footer, you'd have z-index 0, and then halfway or so up the page you'd have another canvas with z-index -5 or such.) Absolute positioning/JavaScript assistance would be the easiest way to size and place everything properly, though it's not the only option.</p> <p>The canvas 2d api actually makes this quite easy to do, too... no change to your drawing logic needed at all! Just transform the context of any canvas that isn't exactly aligned with the top left, and draw the scene in all canvases as normal. For example, just before you draw, run</p> <pre><code>context.save(); //Determine canvas pixel position, possibly with jQuery context.translate(-myCanvasXPosition, -myCanvasYPosition); ...//draw context.restore(); </code></pre> <p>This will adjust your scene so that the point (0,0) is always the upper-left corner of the browser for all your canvases (instead of the usual upper-left corner of each canvas), so all your drawing logic will draw the correct thing no matter which canvas it's in. If performance starts to be a problem, you could add logic to only try to draw elements that may actually be shown in the canvas currently drawing.</p> <p>With this method, what appears to be a single background drawing will actually be multiple drawings stitched together invisibly, which will let you make different parts of the drawings different z-indexes.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload