HTML5 elements to local objects?

One thing I’ve been trying to figure out lately is how can I convert or work with HTML5 elements within the context of OpenFL (HTML5 target).

Is there any way to convert these for HTML5 target, for example?

// Javascript / HTML5
var image:ImageElement = Browser.document.createImageElement();

// OpenFL
var image:Bitmap = new Bitmap();

If not, is there a way to create an ImageElement and attach that to the main canvas (ie, Stage)? How can I get the root display object? If I simply do Browser.document.appendChild( image ) from inside an OpenFL project, I don’t see any difference visually that anything is rendered. I can see some of the data if I hunt around in the browser’s sources. Are my tags rendering behind OpenFL?

Any insight here would be very useful. Thanks!

There is no direct conversion between browser elements and OpenFL elements.

For example, depending on html5 subtarget (-Ddom, -Dcanvas, -Dwebgl), and on bitmap contents it can be rendered as new img tag, as new canvas tag, or rendered to existing canvas without creating new tag at all.

Thanks for the reply! It’s good to know I can stop hunting for a secretive shared browser element in both systems.

I was trying to populate an Image tag from code; mostly because the url was formatted as “data:image/gif;base64,R0lGODlhyADIAAAAACH/C05FVFNDQVBFMi4wAwEAAAAh+QQACgAAACwAAAAA…” and I didn’t think that Loader class would be able to load it, but it did!

I am also working with an external JS library that works in terms of elements and won’t have anything to do with openfl. I find myself in this case now and again so it’s hard to “translate” code between both systems without better understanding the back-end.

Perhaps -Ddom mode and an openfl.display.DOMSprite element would help?

Light offtopic. Where can I read more about the differences of these subtargets?

In the source code of openfl.
Probably @singmajesty can say more about it.

OpenFL has multiple renderers – OpenGL, Canvas, Cairo and DOM are the most used

OpenGL is default on native, or optionally -Dwebgl on HTML5. Canvas and Cairo are similar (for HTML5 or for native respectively) and are software.

DOM for HTML5 uses elements on the DOM than a single flat canvas