HTML5 Canvas Performance Spectacular

Bigpants' HTML5 CANVAS PERFORMANCE SPECTACULAR - laser clarity backed by unrelenting facts

Operating System

Operating System version (not just hardware) severely impacts performance. Settings > General > About > Version
Operating System determines version of Safari browser - Safari (on iPad) cannot be upgraded independently.
Users can upgrade their iPad1 operating system from 4.2.1 to the latest (5.x, Apple encourages this).
Upgrade significantly improves Safari canvas performance, and reduces available browser height (the addition of non removable Tabs).
Unsure how many users have upgraded their OS - upgrading from 4.x to 5.x requires computer connection.
Some iPad1 users dislike the overall performance of IOS 5.01/5.1 and return to the original OS 4.x.

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

iPad 1 & 2 physical screens are 1024x768. Safari/OS influences available width/height - hardware produces the same width/height results.
By default, iPad automatically scales canvas content to fit display (1fps performance impact). Controlled using HTML:Meta:Viewport tag:
<meta name="viewport" content="initial-scale=1, maximum-scale=1"> stops iPad Safari from scaling.
Without viewport, a 1000x1000 canvas positioned at left:300,top:300 will appear 724x1000? while still saying 1000x1000.
Safari OS v4.2.1 (8C148) did NOT support Tabs - only bookmarks. Believe iPad2 shipped with Safari OS 5.x.
Safari OS v5.x supports Tabs AND bookmarks (bookmarks a little buried).
Bookmarks Bar toggled using "Settings > Safari > Always Show Bookmarks Bar" - Bookmarks always show when keyboard appears
Safari Tabs cannot be turned off.

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

Misc

iPad canvas NOT hardware/GPU accelerated. Proof: compare any AppStore game to these results.
Performance is not affected if canvas clipped by the browser (only possible using Viewport with large width/height)
Canvas can have -'ve left, top - no idea why you'd want this :)
Safari Visible Area Article
iPad Peek
Investigate: iPhone4 size: apparently 960x640

Conclusions

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