Canvas null inside ionic tab

ionic-v1
1

Hello,

I have a problem with canvas inside ionic tabs.
Whenever I have a canvas element in a tab, I get null at getElementById for my canvas Objekt:

<ion-view title="Übersicht">
<ion-nav-buttons side="left">
    <button menu-toggle="left" class="button button-icon icon ion-navicon"></button>
</ion-nav-buttons>   
<ion-tabs type="tabs-icon-only tabs-stable">
    <ion-tab icon-on="home" icon-off="home" ng-click="goTo('ownconsumption-daychart')">
        <ion-pane>    
            <ion-content class="has-header padding">
                <div id="canvas-container">
                    <canvas id="startcanvas" width="411" height="411"></canvas>
                </div>
            </ion-content>    
        </ion-pane>
    </ion-tab>
</ion-tabs>

If I use the the canvas outside, everything is ok:

<ion-view title="Übersicht">
<ion-nav-buttons side="left">
    <button menu-toggle="left" class="button button-icon icon ion-navicon"></button>
</ion-nav-buttons>   

            <ion-content class="has-header padding">
                <div id="canvas-container">
                    <canvas id="startcanvas" width="411" height="411"></canvas>
                </div>
            </ion-content>

How can help?

Best regards
Jens

2

Hmm can you put this into a codepen? I can fork it and take a look at it

3

Yes of course.
Here:

And the working version without Tab:

4

@MrQ - Have you found a solution to this problem?

5

Hi,

I have the same problem and found this. Sadly there doesn’t appear to be any update.

Your example seems to encapsulate the issue so I won’t raise it again.

Robv

6

Also having the same problem any solutions found ?

7

I’ve created a Codepen with an example of a canvas inside an Ionic tab. It’s pretty straightforward. The canvas border is in red and you’ll notice a black line going across the canvas. The code that is drawing the line is in the .controller at the bottom of the JavaScript.

See the Pen Navigation Tabs w/Canvas in a Tab by Brad Burns (@BradBurns) on CodePen.

Hope that helps.

~ Brad

8

Not really i have the canvas in html but it is not being loaded some of the time i get a canvas is null error and other times when i reload it will appear fine. Ionic appears to be delaying the loading of the script im using to populate the canvas whenever i wrap it in a ion-nav element. :confused:

9

Still nothing on this? I have the same problem, I can’t access any element inside an ionic tab.

10

Nice example! I forked it with a simple animation: http://codepen.io/jareilly/pen/wKjZyQ

Is there any convenience function for the Javascript to know the ‘free’ drawing space available to a canvas,
without using a fixed canvas width and height? Something like window.innerWidth and
window.innerHeight functions, but removing any other UI items that are laid out inside the window
around the canvas?