frame rate significantly lower above certain canvas size thresholds on mobile

[joonhyublee]

Hi, first of all, thank you all for your great work! I really appreciate it.

I'm developing an interactive desktop + mobile web with p5js, and I noticed that the frame rate really suffers when the size of the canvas exceeds certain threshold.

For example, my iPhone 6 has no problem rendering the sketch at a reasonable frame rate (30 ish?) with,

function setup() {
    createCanvas(1020, 700);
}

function draw() {
    background(100);
    ellipse(touchX, touchY, 20, 20);
}

function touchStarted() {
    return false;
}

but with (a mere 10px increment in width),

function setup() {
    createCanvas(1030, 700);
}

suddenly the frame rate is much lower (>10 ish).

Since this is not a gradual performance degradation but rather a sudden drop, I'm thinking maybe it's a problem to do with the canvas hitting a browser memory limit or something. I'm wondering if you guys had this one before? Thanks!

[kjhollen]

I was curious about this one and did a little googling. This article suggests that some devices change their rendering modes if the canvas aspect ratio isn't close to the aspect ratio of the device. It's a little old, but I wonder if that's what's happening here.

http://blog.toggl.com/2013/05/6-performance-tips-for-html-canvas-and-createjs/

[joonhyublee]

Hi kjhollen, thanks for the article. Unfortunately, I wasn't able to achieve the kind of performance I needed for my web app, so had to build my own minimal canvas engine out of vanilla js & html5, at the cost of all the convenience P5.js offers.

As of now, mobile performance seems to be very dependent on the particular ways of doing things, (one way of event handling over the other, or drawing multiple lines instead of drawing a single polyline) and it's a pity that things have to be this way.

I hear a performance update is coming soon for p5js, and I'm looking forward for that. Cheers for all the guys & gals at P5js for their stellar work as always, and I'll be happy to share my experience with optimizing canvas performance for mobile, if anybody needs that.

[lmccart]

My guess is that you are crossing 1024px which seems like it may be a rendering limit on many mobile devices. http://www.tricedesigns.com/2013/03/11/performance-ux-considerations-for-successful-phonegap-apps/

While I think there is more that can be done to improve performance across the library and maybe especially with mobile devices (addressed in #331 and #332), my sense is that this particular bug is not one due to the p5.js library but rather a limitation of canvas rendering on the mobile device.

[dnassler]

Hi folks,

I noticed that the frame rate is really bad on my iPhone5S or iPad (2nd generation) if I use the basic getting started setup provided (i.e. using the index.html and sketch.js from the download page).

BUT

If I change the index.html META tag from:

<meta charset="UTF-8">

which causes my iphone/ipad to have a frame rate less than 5 .... to...

<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1">

then the my iPhone/ipad has a frame rate of 60+ !