How to get device width and height


#1

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


#2

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


#3

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


#4

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


#5
        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;

#6

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


#7

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


#8
window.screen.width
window.screen.height

not fitting the width or height


#9

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


#10

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


#11

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


#12

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.


#13

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/


#14

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.


#15

Hey @Gajotres,

Really cool article!!!

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


#16

Just use standard JavaScript methods:

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


#17

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


#18

its great!!! Congratulations !!! Thanks Gajotres


#19

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.


#20

It works for me thanks. :+1: