Or you could use following code to do the scaling automatically if needed
var devicePixelRatio = window.devicePixelRatio || 1,
backingStoreRatio = ctx.webkitBackingStorePixelRatio ||
ctx.mozBackingStorePixelRatio ||
ctx.msBackingStorePixelRatio ||
ctx.oBackingStorePixelRatio ||
ctx.backingStorePixelRatio || 1;
ratio = devicePixelRatio / backingStoreRatio;
if (devicePixelRatio !== backingStoreRatio) {
var oldWidth = canvas.width;
var oldHeight = canvas.height;
canvas.width = oldWidth * ratio;
canvas.height = oldHeight * ratio;
canvas.style.width = oldWidth + 'px';
canvas.style.height = oldHeight + 'px';
// now scale the context to counter
// the fact that we've manually scaled
// our canvas element
ctx.scale(ratio, ratio);
}
if you set the size of the canvas element to the screen/window size and using
above code you will get on any resolution a sharp display
I'm using above code successfully with cordova on iOS and Android (e.g. on a
Nexus 4 the ratio is 1.5 instead of 2 on iPhone with retina display)
Stephan
On Friday 06 December 2013 11:48:39 Ian Clelland wrote:
> Yes, if we're actually talking about the HTML <canvas> element, then it's
> default resolution will match the element's size *in CSS pixels*, which are
> twice the size of device pixels on a retina display.
>
> You need to set the element's "width" and "height" attributes (*not* the
> CSS properties) to increase that resolution.
>
> A full-screen hi-res canvas on an iPhone 4 would look like this:
>
> <canvas style="width: 320px; height: 480px;" width="640"
> height="960"></canvas>
>
> (and, of course, those numbers would be different on an iPhone 5, or an
> Android device :) )
>
> Ian
>
>
> On Fri, Dec 6, 2013 at 11:40 AM, Michal Mocny <mmo...@chromium.org> wrote:
>
> > Yeah if you don't have correct viewport, and are using the 3.5 inch retina
> > iphone simulator, you will get 2 device pixels per css pixel, and thus see
> > the resolution you claim.
> >
> > Also, even if you fix the viewport, I think that for efficiency reasons
> > some web renderers will specifically treat the canvas element as lowdpi
> > even on a highdpi device. I do not know the details of safari webview, but
> > thats worth exploring if viewport doesn't fix the issue. One quick article
> > I found that generally explains things to consider when working with canvas
> > on highdpi is: http://www.html5rocks.com/en/tutorials/canvas/hidpi/
> >
> >
> > On Fri, Dec 6, 2013 at 10:54 AM, Andrew Grieve <agri...@chromium.org>
> > wrote:
> >
> > > Problem with viewport <meta> tag?
> > >
> > >
> > > On Fri, Dec 6, 2013 at 10:07 AM, James Jong <wjamesj...@gmail.com>
> > wrote:
> > >
> > > > Are you targeting prior to iOS 5?
> > > > -James Jong
> > > >
> > > > On Dec 6, 2013, at 9:49 AM, Maxime LUCE <max...@somatic.fr> wrote:
> > > >
> > > > > By default, Cordova ios project targets iOS 5+, could it be blocking
> > ??
> > > > >
> > > > >
> > > > > Cordialement.
> > > > >
> > > > >
> > > > > Maxime LUCE
> > > > >
> > > > >
> > > > > max...@touchit.fr
> > > > > 06 28 60 72 34
> > > > > http://touchit.fr
> > > > >
> > > > >
> > > > > -----Original Message-----
> > > > > From: mmo...@google.com [mailto:mmo...@google.com] On Behalf Of
> > Michal
> > > > Mocny
> > > > > Sent: vendredi 6 décembre 2013 15:45
> > > > > To: dev
> > > > > Subject: Re: iOS webview size
> > > > >
> > > > > 320 sounds like the width of the first three generations of iphone
> > > > (though the height is not 240 but 480). Perhaps you are emulating an
> > > older
> > > > device?
> > > > >
> > > > >
> > > > > On Fri, Dec 6, 2013 at 9:28 AM, Maxime LUCE <max...@somatic.fr>
> > wrote:
> > > > >
> > > > >> Frame is fullscreen but frame content is sized
> > > > >>
> > > > >>
> > > > >> Cordialement.
> > > > >>
> > > > >>
> > > > >> Maxime LUCE
> > > > >>
> > > > >>
> > > > >> max...@touchit.fr
> > > > >> 06 28 60 72 34
> > > > >> http://touchit.fr
> > > > >>
> > > > >>
> > > > >> -----Original Message-----
> > > > >> From: James Jong [mailto:wjamesj...@gmail.com]
> > > > >> Sent: vendredi 6 décembre 2013 14:47
> > > > >> To: dev@cordova.apache.org
> > > > >> Subject: Re: iOS webview size
> > > > >>
> > > > >> Sounds like you have some customization in obj-c or the nib files.
> > > > >> The frame should be fullscreen by default.
> > > > >> -James Jong
> > > > >>
> > > > >> On Dec 6, 2013, at 8:25 AM, Maxime LUCE <max...@somatic.fr> wrote:
> > > > >>
> > > > >>> Hi,
> > > > >>>
> > > > >>> I will try to explain the issue more precisely.
> > > > >>> When I launch my app using XCode in the iOS emulator, I can see
> > that
> > > > >>> my
> > > > >> app is resized in a 320x240 frame. This behavior force iOS to resize
> > > > >> every DOM elements to adjust to an arbitrary 320x240.
> > > > >>>
> > > > >>> I checked the behavior by putting a "alert(document.width) on start
> > > > up".
> > > > >>>
> > > > >>> Someone could help me override this behavior ? I'm not an iOS nor
> > > > >> objective C expert.
> > > > >>>
> > > > >>>
> > > > >>> Cordialement.
> > > > >>> ----------------------------
> > > > >>> Maxime LUCE
> > > > >>> max...@touchit.fr
> > > > >>> 06 28 60 72 34
> > > > >>> http://touchit.fr
> > > > >>>
> > > > >>>
> > > > >>> Not sure what you mean.
> > > > >>>
> > > > >>> Are you saying you can only have a canvas with a max size of
> > > > >>> 320x240? I
> > > > >> have an app with a larger canvas than that.
> > > > >>>
> > > > >>> If that is what you are saying, be sure you are not trying to set
> > > > >>> the
> > > > >> canvas size just using CSS.
> > > > >>>
> > > > >>> For an example maybe have a look at my canvas demo:
> > > > >>>
> > > > >>> https://github.com/devgeeks/Canvas2ImageDemo
> > > > >>> On 06/12/2013 12:06 pm, "Maxime LUCE" <max...@somatic.fr> wrote:
> > > > >>>
> > > > >>>> Hi everyone,
> > > > >>>>
> > > > >>>> It appears that on iOS, webview is restricted to a 320x240 canvas.
> > > > >>>>
> > > > >>>> Is it possible to automatically set canvas size using device
> > > > >>>> screen's
> > > > >> one ?
> > > > >>>>
> > > > >>>> Why is it not the default scenario ?
> > > > >>>>
> > > > >>>> Cordialement.
> > > > >>>> -------------------------------
> > > > >>>> Maxime LUCE - Somatic
> > > > >>>> maxime.l...@somatic.fr
> > > > >>>> 06 28 60 72 34
> > > > >>>>
> > > > >>
> > > > >>
> > > >
> > > >
> > >
> >
