All geek questions in one place

Draw shapes / text on canvas using layers or z-index

I draw some text elements using a for loop. But I want the first element to be drawn on top of all the other elves. Besides changing the loop, is there a way to determine the layer number for a drawn element, such as text or shapes?

+3
source share
2 answers

No, HTML5 Canvas-like SVG uses the “artist model” when rendering: the ink you put on it dries on the canvas right away; successive drawing calls go at the top of the result.

In addition, HTML5 Canvas - unlike SVG or HTML - uses non-persistent (or immediate) graphics mode : objects are not saved, the corresponding original drawing commands after you issued them.

Your options:

  • Change your cycle or otherwise implement your own layer system, which queues up drawing calls and then issues them in order from bottom to top.

  • As @Stoive suggests, create separate (non-displayable) canvas elements programmatically, draw them, and then reflect the results on your main canvas again in the order you like.

  • Create some (displayable) canvases on the page and draw them using CSS, drawing them as your own layer.

, / , .

+5

2D- canvas - .

, , context.drawImage - , "" , .

0

Source: https://habr.com/ru/post/1794564/

More articles:


All Articles