CODEWITHSUNDEEP
htmlhtml5-canvas
Nick
Nick

Reputation: 594

HTML5 Canvas not preserving the draw order

I am trying to draw a rough outline of a building in canvas. I'm achieving the effect below by creating a series of squares for each side, plus the top 'roof' and then drawing them in sequence basically following the Painter's algorithm.

The screenshot on the left is showing how it should look. This is painting each square separately.

To improve performance I want as few .stroke() and .fill() calls as possible so I queue up all the moveTo() and lineTo() calls and paint them all in one big go. Tests have shown that (at least for lines) this gives a massive performance improvement and I've verified it myself.

Unfortunately as you can see from the right screenshot, when I paint the buildings only once at the end the layering basically gets destroyed. It paints things in a seemingly random order.

Is the canvas supposed to work this way? Why doesn't it draw everything in the order I told it to draw in like the first screenshot? Does anyone know a good work around for this behaviour?

mock 3d buildings

Upvotes: 3

Views: 479

Answers (1)

hunterloftis
hunterloftis

Reputation: 13809

If you're sending it all the moveTos and lineTos etc as one big batch, it's going to draw them as if you were rendering one large shape (where you'd want to see all the inner strokes).

There's a minor performance penalty for running multiple draw operations, but it's usually not worth making your code harder to understand and debug.

Upvotes: 1

Related Questions