Welcome!

Welcome to the official BlackBerry Support Community Forums.

This is your resource to discuss support topics with your peers, and learn from each other.

inside custom component

Web and WebWorks Development

Reply
New Contributor
Posts: 4
Registered: ‎05-02-2011
My Device: 9800

Html5 Canvas Resizing

Hi all ,

I was just wondering if there is a way to set the html5canvas to full screen ?.

Right now i am doing it with the following code

 

 g_canvas.setAttribute("width",  $(window).width() - 20);
    g_canvas.setAttribute("height",  $(window).height() - 20);

 but the problems i am facing with this is :

 In ripple and emulators it works perfectly fine , but when i loaded the program in an acual black berry ..

it works fine in portrait mode ... but when i flip it to landscape mode ... its bigger than the acuall viewport size .. thats cause the $(window).width() is updated correctly but the height remains same ... am i missing some thing ?

 

 

i have the following meta tag  too.

<metaname="viewport"content="height=device-height,width=device-width,t​argetuser-scalable=no,initial-scale=1.0"/>

 

 

thanks for any help.



Regular Contributor
Posts: 81
Registered: ‎03-09-2012
My Device: PlayBook & Bold 9780

Re: Html5 Canvas Resizing

Try this:

 

g_canvas.setAttribute("width", window.innerWidth - 20);
g_canvas.setAttribute("height", window.innerHeight - 20);

 

so just access the attributes, don't call the methods.

Retired
Posts: 1,382
Registered: ‎07-02-2009
My Device: BlackBerry Bold 9900
My Carrier: Bell

Re: Html5 Canvas Resizing

Good suggestion!

 

Would also want to make sure that your canvas sizing JavaScript is re-executed when the  screen orientation changes?  Doing so will ensure that the canvas is properly sized to the new screen width when you change between landscape and portrait?

 

One way of doing this is with the window.orientation object.  Demo here:

http://blackberry.github.com/WebWorks-Samples/kitchenSink/html/browser/orientation.html

Follow me on Twitter: @n_adam_stanley
-------------------------------------------------------------------------------------------------------------------------
Your app doesn't work? Use BlackBerry remote web inspector to find out why.