Big Stage == Canvas Content is not shown on iPhone

[solitud]

Hi, if I set a stage with dimensions around 500 x 2620px Kineticjs does not render the canvas content on an iPhone. It works in Apples iOS Simulator but not on the real device.

Kineticjs 4.4.3, iPhone 4S 6.1.3

[fervanrijswijk]

I've did a test something simular to test this one (on iPad3). I added a new layer on each click. With Kinetic each layer is a new canvas.

I creaded a stage of 500 x 500. Max layers i could create 52, than the safari crashed.

As a canvas is basicly nothing more than an image I've did the same test with some divs containg a same sized image: same result...

My guess is that is has nothing to do with Kinetic / Canvas, but the resource limitations of iDivece(s)

[solitud]

No, it's not the iPhone in my case. I can create Canvas the old school way without KineticJS that exceed the 1310580 Pixel Limit and it will be displayed on iPad/iPhone.

I am wondering nobody else has this issue? I know my canvas is big but not HUGE. My project has to deal with dynamically sized canvas based on user created images, so my workaround for now is to crop them.

Nonetheless I love KineticJS for the ease of use. I never would be able to deal with all the dragndrop without the framework, so thank you Eric for creating it!

BTW: this is my project: http://modulargrid.net/e/patches/view/92

[ericdrowell]

Two things that kill performance on mobile is Text + Shadows. Have you tried removing shadows for the mobile experience?

[ericdrowell]

P.S. cool demo, I'll be linking to it from the homepage soon :)

[solitud]

I disable the shadows on dragstart and enable them later on dragend. It works pretty well on desktop browsers. But the problem on iOS is not a bad performance... there isn't ANY performance at all because nothing is displayed (white screen) if the Stage exceeds the magic ca. 1310580 pixels barrier... I appreciate the link and of course your awesome work!

[solitud]

To make things clearer I have created a simple jsFiddle which draws a Circle with and without KineticJS. This Test fails on iOS devices. Find it here: http://jsfiddle.net/solitud/ajzhG/

[felipehaack]

Hello... i have the same problem, thanks for Solitud's exemplo... I used kinectjs version 4.5.3 in the ios 6.1.3 but test fail, now I change the version to kinectjs 4.0.3 and it's make fine :)

[Max-Wong]

Hi, solitud, I have encountered this problem too. My kinectjs version is v4.5.5 and run in my iPhone 4s, ios 6.1.3. And I've found a way to solve this problem temporarily:

1. download the source file(not the .min file) from KineticJs.com
2. replace "_pixelRatio = devicePixelRatio / backingStoreRatio;" as "_pixelRatio = 1". (OR replace "e=c/d" as "e=1" in kinetic-v4.5.5.min.js)

Actually, the issue caused by this segment:

This code may help us for zooming the canvas to the best ratio automatically, but when our backingStoreRatio is too big, as you said, 1310580 pixels is the barrier, _pixelRatio might be zero. So, our browser wouldn't render any thing.

[ElliotChong]

I've created a Gist that overwrites KineticJS's automatic pixel ratio detection without having to edit the source (so you could use the minified version if you prefer and be upgrade-proofed until the API changes.) Thought you might find it helpful!

https://gist.github.com/ElliotChong/6107722

[solitud]

I think you guys nailed it. Im using a custom build of KineticJS 4.5.4 and adapted Elliots Gist. Canvas is now properly rendered on iOS Devices. I experienced some browser crashes on iPhone on very large Canvases, but overall it works like a charm! This should make it in the main distribution. Really appreciate it, thanks a ton!

[valeroAlbatera]

Sorry, Im using kinetics 4.7.2 and Elliots Gist...and my problem with iphone5 is not solved!! Any help, please?

[isdito]

Hello. I have the same problem. I see canvas in firefox,opera,chrome,safary,.. in computer all but in the ipad I not see nothing and in the Galaxy go very slow and mousemove and mouseenter not work.

[lavrton]

http://jsfiddle.net/ajzhG/40/ This demo will not work on ipad3 with retina display. Because KineticJS automatically resolve high resolution device and increase canvas size twice. If you don't need such behaviour use this:

Kinetic.pixelRatio = 1;

[rajmohanperiyasamy]

Thank you so much guys...Bcz of you all, i have saved my time lot...I was facing the issue that canvas size gets doubled in ipad and i phones series when i was using kineticjs v4.4.1...later i updated from v4.4.1 to v4.4.3...Now everything works fine...