Page 1 of 1

DOMless retina canvas

PostPosted: Tue Oct 29, 2013 8:50 am
by 0plus1
I post here because it looks like the best place to do it.
As some of you might know I'm taking care of the unofficial Ejecta exporter. I've been able to create a 100% working webGL canvas (including effects) but I have a giant issue that I don't have any idea how to fix.

I really hope someone or @Ashley (even if I know your stance about DOMLess) can point me to the right direction.

Basically in webGL the canvas is not rendered with retina (please read here: for this reason there is the need to do it manually like so:

    canvas.width = window.innerWidth * window.devicePixelRatio;
    canvas.height = window.innerHeight * window.devicePixelRatio; = window.innerWidth; = window.innerHeight;

The issue is with touches, window.innerWidth * window.devicePixelRatio effectively doubles the canvas, if you don't set construct renders a giant canvas, so on screen you see just a quarter, this is expected, the issue is with touches, even setting the style c2 still reads touches from the giant canvas, resulting in an unusable app.

How can I hack this behaviour? Has anyone has any ideas?


Re: DOMless retina canvas

PostPosted: Tue Oct 29, 2013 10:28 am
by Ashley
Near the top of preview.js the retina mode is determined like so:

this.isRetina = (!this.isDomFree && this.useHighDpi && !this.isAndroidStockBrowser);

Remove the isDomFree check from that (and possibly the android stock browser check - I don't know what Ejecta's user agent string will detect as) and it will enable the code that you described, which is how we get high-DPI in browsers.

Then in runtime.setSize it still uses jQuery to set the CSS size (there's no real reason for it, it's just old code). Replace that with the assignments and hopefully that will work.

I think CocoonJS does this simply by having a devicePixelRatio of 1 and reporting the real physical pixel counts for the window innerWidth/innerHeight. That's a nice and simple way of doing it which perhaps Ejecta could support as an alternative mode.

Re: DOMless retina canvas

PostPosted: Thu Oct 31, 2013 12:33 pm
by 0plus1
Thanks, just tried and works like a charme

Re: DOMless retina canvas

PostPosted: Sat Nov 09, 2013 10:44 pm
by felixsg
You going to share the ejecta for c2?

is EjectaX?


Re: DOMless retina canvas

PostPosted: Mon Nov 11, 2013 11:29 pm
by 0plus1
@felixsg yes I'll share, I'm about to submit the game, when that's done I'll update the plugin.