How does hyper render the text and output?

[jakofranko]

It seems like hyper should be rendering to a canvas element but I can't understand exactly how it's happening.

From the devtools console, the canvas element that seems to contain the text can be roughly selected like this document.querySelector('.xterm-screen').children[3] which is a canvas without an id or class.

I know that it is that canvas that holds the rendered text, because when hiding this element via the dev tools, the text disappears (so it's not the other two canvas elements that contain the rendered text).

However, when I try to extract the canvas data and render it as an image (via toDataURL() on the canvas element), I just get a blank png. I can get an image with the cursor on it if I run this on the .xterm-cursor-layer canvas, so I know it's not a bug with my code.

I've even gone so far as to run a demo of xtermjs to try to understand how the terminal is working, and I can grab the contents of the terminal in the demo just fine, but the underlying HTML looks different from Hyper.

I'm trying to write a theme that puts some various effects on the rendered text but am at a loss 😭

[LabhanshAgrawal]

Did you try with webgl disabled?

[jakofranko]

Omg @LabhanshAgrawal that was it! I didn't realize it was using the webgl renderer...setting webGLRenderer: false in the config let's me grab the canvas image of the text. Thank you so much!