Hello,
I’m making a tool that is text-heavy, and I want to get it working on retina displays on the canvas rendering backend without blurriness. (I know this is done automatically in DOM, but that backend has other issues so I’d rather not use it).
There is some work already being done on this–currently it seems the best solution is on this topic: HTML5 Canvas and blurry rendering. devicePixelRatio is needed but the solution doesn’t work when you zoom in and out, it only does the scaling once.
Is there a better way to do this? Or is the DOM renderer really the only way to get smooth text on html5?
can you wait until Ian Harrigan’s haxeui2 comes out? He’s got a pure dom version that I will be using in my research software.
Are you using the new version of openfl? I was hoping blurry text would not be an issue in the new version (4?).
Openfl was a good way for me to get familiar with haxe, with me coming from as3. Now I’m a lot more comfortable in the software my plan is to move over to Ian’s haxeui2.
Modify index.html to use your own canvas, call lime.embed with the reference to your canvas element (instead of the standard div) and Lime should use this element – retain retina density, to my knowledge.
the DOM renderer is not as heavily tested, but what issues did you have?
On the DOM there seems to be a fairly significant framerate dip in certain cases, where there isn’t one on canvas.
I used your suggestion but there seemed to be another problem–when I zoom in on Chrome the app just gets more pixelated, it doesn’t zoom in the canvas at all. Is there a way around that? My window width and height are set to 0.
I guess our renderer uses the canvas dimensions to render, we would need to render at a higher resolution than the actual canvas dimensions. Not sure how other developers usually handle this?
