Bigpants' HTML5 CANVAS PERFORMANCE SPECTACULAR - laser clarity backed by unrelenting facts
Home   Test   iPad Notes     back to bigpants
Operating System
Test iPad1-4.2.1 iPad1-5.1 iPad2-5.0.1 iPad2-5.1
800x600 canvas, 300 drawImage (40x20) 11fps 22fps 41fps 54fps
400x300 canvas, 300 fillRect (40x20) 28fps 50fps 59fps 59fps
256x192 (scaled 4X), 1,000 drawImage (40x20) 2fps 8fps 18fps 20fps
iPad 1 = Model A1219 | OS v4.2.1 = 8C148 | OS v5.1 = 9B176
iPad 2 = Model A1395 | OS v5.0.1 = 9A405 | OS v5.1 = 9B176
Results used basic HTML, no viewport

Width & Height
Test v4.2.1-noTabs-noBooks v4.2.1-noTabs+Books v5.1+Tabs-noBooks v5.1+Tabs+Books
Horz-noView 981x661 (+29) * 981x632 * 981x644 * 981x617 *
Horz+View 1024x690 (+30) 1024x660 1024x672 1024x644
Vert-noView 980x1208 (+39) ** 980x1169 980x1185 980x1149
Vert+View 768x946 (+30) 768x916 768x928 768x900
Results provided by javascript window.innerWidth, window.innerHeight during onLoad event with no vertical scrollbar on HTML:Body
* iPad auto-scaling likely responsible for incorrect "Horz-noView" .innerWidth & .innerHeight
   Subtract 1 for "real" size: 981x644 actually 980x643, 981x617 actually 980x616
** iPad auto-scaling likely responsible for increase in delta betwen Bookmarks/NoBookmarks Horz and Vert


Target iPad2 v5.1+. Reasons:
a) iPad1 canvas performance is terrible - even with Safari/OS 5.1
b) iPad2 ships with v5.x, users can now upgrade WITHIN iPad (no longer need to connect to machine)
c) iPad3...

Use HTML:Meta:Viewport to ensure "real" canvas pixels. Reasons:
a) iPad scaling introduces alias/subpixel issues i.e. Clearing a dirty rectangle tricky
b) Game devs used to handling/controlling scale (automatic scale offers no performance gain)
c) Pixel perfect beyond developer control (big problem for crisp pixel art)
d) Inaccurate reporting of window.innerWidth, window.innerHeight when held horizontally
<meta name="viewport" content="initial-scale=1, maximum-scale=1">

MAX Canvas Size: Horiontal:1024x644 or Vertical:768x900. Reasons:
a) Tabs are ALWAYS on. Need to assume Bookmarks might be on.
b) You're using Viewport... RIGHT?!
Don't forget - you might need screen room to display virtual controls (arrow keys)

When you output to the canvas (fillRect, drawImage) ALWAYS be aware of subpixel/aliasing.
i.e. Draw at 1.0, 1.0 (no alias) NOT 1.1, 1.1 (aliasing) - never forget subpixel bunny
i.e. Scaling using drawImage or Canvas.scale() using partial widths/heights introduces aliasing thanks to bilinear resampling - can't be turned off