PIXI JS Cordova IOS issues rendering canvas

[bretly]

I am unable to successfully view a canvas element on rendered by pixi.js.  The element attaches fine in a browser and if I add a static canvas to the page it will also display properly in broswer and ios simulator when ran through cordova.  Has anyone else experienced this or found a work around?  The code is pretty straight forward:

     

onDeviceReady: function() {
    this.receivedEvent('deviceready');

    var Container  = PIXI.Container,
        autoDetectRenderer = PIXI.autoDetectRenderer,
        loader = PIXI.loader,
        resources = PIXI.loader.resources,
        Sprite = PIXI.Sprite,
        Rectangle = PIXI.Rectangle,
        TextureCache = PIXI.TextureCache,
        Graphics = PIXI.Graphics,
        Text = PIXI.Text,
        ParticleContainer = PIXI.ParticleContainer,
        stage,
        renderer;

    stage = new Container();

    renderer = new autoDetectRenderer(window.innerWidth, window.innerHeight);

    document.body.appendChild(renderer.view);


},

[mattstyles]

Does the renderer actually attach?

Are you running the rest of your code before the `deviceReady` event fires? as in, are you trying to render to the renderer/stage before it is actually in the DOM? (I'm assuming this is a synchronous task for your web builds but has become async here, I'm assuming this actually is not the case as your variables are all local inside your function so there would be no way of triggering a render anyway).

Are you sure window.innerWidth and innerHeight are returning correctly? Maybe try hardcoding these to something like 800x600 to make sure you get something.

I've done a very similar method for programmatically adding a canvas to the page and then running stuff (although never specifically with PIXI) and had no issue punting it through cordova to produce a build.

[bretly]

Yes, I've attempted hard coding the height and width of the renderer, but didn't have any luck there either.  Also moved the variables outside the object.  I'm not 100% sure about the async.  The device ready function event is where cordova/phonegap (tried it as well) directs you to put in the code according to the docs.  All this still works fine when launching the browser.

[Fatalist]

1 hour ago, bretly said:

renderer = new autoDetectRenderer

"new" is not needed here(but it should still work).

Maybe it's a WebGL problem, have you tried CanvasRenderer?

[bretly]

Didn't have luck with either the webgl renderer or the canvas render.  I can attach a canvas here pretty easily through JS.  Seems a little odd

[bretly]

This actually looks like it may be rendering, as if I run this in the browser the canvas renders as black in chrome, but renders transparent in safari.  Even using these settings when instantiating the object fails, i.e. black background in chrome and transparent in safari.  Seems PIXI can't apply these properly from within cordova as this works properly when serving straight from apache.  So maybe a scoping issue?

var renderer = PIXI.autoDetectRenderer(800, 600,{backgroundColor : 0x1099bb});
 

[bretly]

Finally got this rendering through phonegap, but still can't affect properties such as background color. 

[mattstyles]

On 21/11/2016 at 5:57 PM, bretly said:

Seems PIXI can't apply these properly from within cordova as this works properly when serving straight from apache

Nah, its not that. PIXI doesn't care about anything other than the canvas implementation.

I really don't know what is causing this issue for you, Cordova (Phonegap), by default will use the system browser to do its stuff, although you could use wkwebview for iOS but, again, I still think its just the standard safari in there, certainly related to the DOM, I'm not sure how Crosswalk affects Android but I was pretty sure it was just running the latest version of chrome inside your app as a webview. 

When you say, run in a browser (i.e. safari), is that on-device? Emulating from your computer doesn't count, is it working perfectly being served into Safari/Chrome on your device?