One of the problems faced when creating a UI system for our engine that can be deployed on devices that use OpenGL as well as inside of a web browser is that the UI elements that are designed and placed via HTML and CSS have no way of being displayed on a pure OpenGL implementation.
With this in mind I have started to work on a system that can render HTML + CSS directly to a canvas tag so that you get an “image” version of a web page.
You can see an example of this working live here: http://www.isogenicengine.com/html-canvas/test/index.html (click “Render” on the right of the page to see the canvas version get generated).
On the left hand side are the HTML elements rendered using standard DIV tags and CSS stylings. On the right is a canvas that is rendering the same HTML + CSS except as canvas output. The result looks like this (the background colours of the HTML and canvas containers has been set differently so you can distinguish them apart):
Apart from a few minor differences the canvas version is almost identical to the HTML + CSS version. There are some obvious optimisations that can be made to bring the canvas version even closer to the HTML + CSS but for now, this is a good starting point.
The system currently supports:
- Border settings for left, top, right, bottom including widths, colours and radius
- Background colours
- Background images
- Element positions
- Element dimensions
- z-index
- opacity
- text output
- background repeat settings
- border styles
Feel free to grab the code from the example page or download the archive here or grab a fork from our github repo here: https://github.com/coolbloke1324/html-to-canvas
To run the archive, make sure you are running from a webserver (it uses AJAX!) and then hit the page ./test/index.html
Oh, and if you like this, don’t forget to take 1 second and click the +1 right at the top of the page! 