How can I access DOM elements within a <canvas>?

Question

I'm using the Cytoscape library, which is flexible in and of itself. However, I've reached a point where I'd need to access a certain element dynamically based on a certain event.

Cytoscape renders the data in a canvas element. Here is an example .

Is it possible to access, for instance, the innerText of any of these nodes? I've tried cycling through all child elements of the main canvas. I've even tried giving it a ref in React and going about it that way. What are my options here? I'm aware that I can change the label with their API, but innerText was just an example off the top of my head.

Are these elements in the canvas even DOM elements? Would I be able to, say, get a node and give it a box shadow or a different border radius by dynamically changing the CSS at runtime?

Answer 1

The shapes rendered inside the canvas are literally pixels in a picture; A raster images if you will; non of the HTML API works of nodes inside that canvas, since they are not Elements; (even drag event is done internally; the canvas handles mouse events, detects the mouse position, and re-draw frame to simulate drag event) . Cytoscape internally holds the data of those models and based on that, draws the pixel on canvas; thus you can find node's text in the data passed to Cytoscape component.

Styling of those shapes, lines, etc is limited to what Cytoscape supports (eg color, line width, line color) and non of html, css stuff works on inner nodes; the canvas itself is valid Element, and you can apply box-shadow, border, filter(invert), etc on it, but probably it wouldn't be any useful.