Making a Canvas takes full available space on screen


Hello friends,

This is my first experiment with Ionic and Cordova, and I decided to start from the Ionic Tabs Template of Visual Studio, This examples creates 3 tabs.

In one of those tabs, I am trying to make a canvas occupy all the space available between the ion-nav-bar above and the tab-bar below. (Note: in some emulators the nav-bar and tab-bar appears together in one side of the screen. It’s no problem. The idea is that I need to fullfill with the canvas all the space left free on the screen beyond the two bars)

I have replaced the tab-dash.html template of the example for this:

<ion-view view-title="MyDrawing">
         <canvas class="resizeCanvas" id="paperCanvas" style="border: 1px solid #00ff21" drawing></canvas>

I’ve tried many ways to make the canvas expand but without success, including this on a canvas directive:

element[0].style.width = '100%';
element[0].style.height = '100%';
element[0].width = element[0].offsetWidth;
element[0].height = element[0].offsetHeight;

And tried this:

.resizeCanvas {
background: #ffd800;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;

Some tests made the canvas too big, and the canvas occupied the full screen, going behind tab-bar and nav-bar. In other tests, the canvas was small, not big enough to occupy the full space between tab-bar and nav-bar.

Can you friends help me? I am out of ideas now.

Thank you,


CSS and canvas. terrible idea.