Oh i forgot to mention, that the posted code is derived from the High DPI
canvas entry on html5rocks
Stephan
On Friday 06 December 2013 18:17:57 Stephan Wezel wrote:
> 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
> > > > > >>>>
> > > > > >>
> > > > > >>
> > > > >
> > > > >
> > > >
> > >
>
