Ionic and HTML5 Canvas


#1

I have an app in which I was using Konva to create an interface on a canvas element. This was allowing for a header automatically by using:

    stageMain = new Konva.Stage({
        container: 'canvasHeating',
        width: window.innerWidth,
        height: window.innerHeight
    });

The canvas now appears under the header and overflows the screen requiring a vertical scroll. How should a full screen canvas element be defined/sized for a cross platform ionic mobile app?


#2

I’m finding that the same code launched in the Intel XDK sizes correctly. Furthermore if the previous screen has the soft keyboard displayed then half the canvas height is cut. This occurs even if I explicitly define the height of the canvas. The screen on the left is launched from an XDK build, the second image from an Ionic build and the third is a screen grab of a transition between the login with the keyboard enabled and the canvas being loaded. I’ve tried putting a delay between the page screen load and canvas draw to no avail.


#3

I’ve found what the problem was and wanted to report back. The canvas were mostly being laid out correctly. The issue occurred thereafter when I was drawing certain elements on the canvas. I was using screen.availableHeight for the height calculations and the canvas was being automatically enlarged. I don’t know why Intel XDK seemed to fix this but on balance the Ionic method may be the better approach. I now take a snapshot of the $window.innerHeight on app load and use this height throughout the application regardless of fluctuations in available screen space. It seems to be working on the various devices it didn’t previously appreciate.


#4

Any one help me to solve this issue…I’ve been this error more than a day…Anyhelp thanks