I do not think that there is any special hardware support for
style.display.visiblity
it is just that modern browser manage to do nothing stupid while switching this property.

I would say that good old bitBlt is as fast.

Or you could target the C64 or NES or Sega Master System. They have hardware support for tiles with four colors!

Hello!

1 hour ago, Lode said:

Is there any alternative better way to have a 2D tile based engine where each tile can efficiently swap between two different graphics?

Clearly "yes". Juggling with thousands of canvases to draw something seems like a very (very, very) bad approach to me. You could have done something like this in the pre-canvas days of HTML when your only option to draw a tile map was to use an individual <img> element to draw each tile. However, the whole idea behind the <canvas> element is that you can draw any sort of image dynamically so that you don't have to use such hacks any more.

The solution is simple: Just use one canvas and paint your tile map on that. Drawing on canvas is quite fast, it is very unlikely that you run into unsolvable performance problems with that. In the end, of course, it depends on the resolution of the canvas and on the number of tiles, but a typical scenario (full HD, a couple of hundreds of tiles in the viewport) can probably be rendered at interactive frame rates (i.e. a complete redraw on each frame, including fluid scrolling).

Hello Lode!

I do not yet completely understand your use case, but perhaps these suggestions/comments can help?

No. 1: If you don't need to update the entire map view on each frame, then don't do it. Only redraw the tiles that have changed.

No. 2: The performance of path drawing on the canvas heavily depends on the number of state changes (i.e. changing of color, line width etc.) and "beginPath() ... fill() / stroke()" commands. It's the same concept as with OpenGL draw calls (and perhaps the very same reason behind the scenes). Try to "batch-draw" shapes that need the same draw settings, it will significantly speed up your rendering.

No. 3: Are you aware that you can have invisible canvases (i.e. ones that just "hang around" as JavaScript objects, not added to the DOM), and that there is also the ImageData class which provides a low-level way to store image data?

I still strongly suggest not to create thousands of canvases, but maybe you could use one (or, if absolutely neccessary, a few) extra hidden ones as a sort of buffer/cache for your line drawings? Maybe you could pre-render the line drawings to an invisible canvas and then copy parts of that invisible canvas to the right places on the visible one?

Can you show a screenshot of how your map display currently looks like, or something similar to what you want to accomplish?

Okay. I still don't understand which advantage you get from splitting the drawing up into thousands of separate canvases though. As far as I understand you at the moment, it is meant to be a measure against the need to redraw the entire map view even when only a small subset of the tiles need to be updated. Is this correct? If yes, you don't need to do this, as already mentioned. Just clear and redraw the parts of the canvas that have changed. Am I missing something?

I see.

Have you thought about composing your combined tile images by drawing multiple bitmap-based parts on top of each other with alpha transparency? Maybe pre-render the parts with line/path drawing in an invisible canvas and then copy the bitmaps from there?

Also, keep in mind that with one canvas, you can make use of batch drawing, as long as you have enough shapes that should be drawn with the same settings. With many separate canvases, you lose this option since each canvas has its own drawing context.

Another thing: You say you want to draw 100x100 tiles or even much more. Are you drawing the *entire* map at once? And if yes, are your tiles reall so small that the entire map fits on a single screen? If only a part of the map is visible at any given moment, you should of course only draw the visible tiles. This would save you a lot of time, too.

I'd really like to see what image you want to draw :). I just don't want to believe that you really need thousands of individual canvases for that ;).