Double canvases

[bryevdv]

Just noticed in both 2.4 and 3.0 docs that gallery examples seem to have a second blank canvas under the canvas that is drawn on:

These are "autoload" embeds but also seems the case in bokeh server apps and output_file output. I am probably just forgetting some change in the past, but want to make sure. Is this intentional? If so, what is the rationale? cc @mattpap (or @ianthomas23 if you have some idea)

[ianthomas23]

A quick look through the code shows that there are indeed 2 canvases:

bokeh/bokehjs/src/lib/models/canvas/canvas.ts

Lines 97 to 98 in 530c735

	this.primary = this.create_layer()
	this.overlays = this.create_layer()

A relevant PR is #9948.

[mattpap]

Historically we used single canvas and HTML based annotations for overlays, but that was cumbersome at best (e.g. keeping canvas and HTML versions of those annotations in line with each other, if possible at all). Currently there are two canvases, the primary one for everything except overlays and one for overlays. This way, rapidly changing overlays (e.g. crosshair tool's spans) don't require expensive repaint of glyphs, etc. We could keep offscreen canvases and then paint those on a single canvas, but that would result in flickering if simple overpaint algorithm is used. Implementing anything more sophisticated seems to be more trouble than it's worth, given how well the current setup works. Also it's worth to note that ctx.drawImage() is actually pretty expensive. In PR #12083 the existing approach will be generalized further, to allow arbitrary number of user-defined layers.