Lazily create the canvas element

[Tyriar]

Images are pretty rare at least in my usage patterns, we would save a bunch of work by not creating/attaching/resizing the canvas until the first time it's needed

I know I'm blocking on https://github.com/xtermjs/xterm.js/pull/4577 and will move this over when that goes in, trying to catch up 😅

[jerch]

Yes thats a good idea and should also help with https://github.com/microsoft/vscode/issues/187460.

We could even go one step further and remove the canvas for long living terminals, once the storage gets emptied (thus all image notions got finally removed from scrollback etc). Ofc this would create a tiny burden for canvas recreation upon the next image (which is a rather rare use case). Not sure if this helps much, it would at least save some resources on very big terminals. In the end there is not much use for a transparent canvas on top of everything else, if there is nothing to show on it at all.

[Tyriar]

:+1: good idea, I was thinking about that with a timeout but when it scrolls off is even better