How to get device width and height

hello everyone how i can i get device width and height using ionic framework.
I want to create a canvas which is filling the whole screen of device even the content is null the canvas should be filled with a background color covering whole device . Thank you

Use $window.innerHeight and $window.innerHeight.
You may have to watch for changes mainly for orientation.

3 Likes

its not working there is a blank space even if i add $window.innerHeight and $window.innerWidth

Please show some code, you injected $window in yoru conrtoller, right?

        var canvas = document.getElementById('canvasId');
        var context = canvas.getContext('2d');
        context.font = "30px Arial";
        context.fillStyle="#F5F3EE";
        context.fillRect(0,0, window.innerWidth, window.innerHeight);
        context.fillStyle="black";
        context.fillText('sample text',10,50);
        var dataURL = canvas.toDataURL();
        $scope.image = dataURL;

use:
window.screen.width
window.screen.height

3 Likes

@hussainanver52 It’s $window not window if you want to use angular service and you should inject it in your controller.

window.screen.width
window.screen.height

not fitting the width or height

$window is not creating the canvas also its making a blank area

Have you checked the values under debugger?
Maybe you should post a codepen.

i am not much fluent in codepen
in debugger console i get error $window is not definned
I am putting my javascript and html code below for reference

js is

var canvas = document.getElementById('mycanvas');
            var context = canvas.getContext('2d');
            context.font = "30px Arial";
            context.fillStyle="#F5F3EE";
            context.fillRect(0,0, $window.innerWidth, window.screen.height);
            context.fillStyle="black";window.screen.width
            context.fillText('sample text',10,50);

and my html is

<ion-view view-title="" hide-back-button="true">
<ion-nav-buttons side="left">
    <button class="button button-icon button-clear ion-navicon" menu-toggle="left">
    </button>
</ion-nav-buttons>

<ion-slide-box on-slide-changed="slideHasChanged(count)">
    <ion-slide>
        
        <ion-content class="bkcolor">
            <canvas id="mycanvas">
            </canvas>
        </ion-content>
    </ion-slide>
</ion-slide-box>

what i want is the canvas should fill the with 100% and height 80%

thanks a lot for suggestions

additionally in brwser if i do a console log of screen size its giving exact size

If $window is not defined it’s probably because you didn’t inject it in the controller or service that builds the canvas. Pleas show the line where you define this controller or service.

1 Like

gmarziou is right, you probably forgot to inject $windows service.

Take a look here, I wrote an article just for you: http://www.gajotres.net/ionic-framework-get-page-height-width/

4 Likes

Your canvas is on absolute position ? Because the canvas in the regular flow, it will be positioned under the nav bar. So you can have a 44ish pixel offset on top .

Just to help. Be careful with the canvas on mobile devices. In browser, it’s look good but can be really pixelated on the device. I’m speaking about experience, better to use svg instead of canvas.

Hey @Gajotres,

Really cool article!!!

How can I get the width and height of a div but not the window?

Just use standard JavaScript methods:

document.getElementById(“someID”).offsetWidth
document.getElementById(“someID”).offsetHeight

3 Likes

Nice one!! @Gajotres That one took me a while to sort out

its great!!! Congratulations !!! Thanks Gajotres

The new design of your web ist just beautiful but the rest of the planet sees just the front-page. None of you posts are accessible. We got just 404 not found.

1 Like

It works for me thanks. :+1: