HTML5 Canvas Performance Spectacular

Technical Details >

Date
Browser
All examples attempt attempt to run at 60 frames per second using setInterval("world_ontimer();", 16 milliseconds);
1024x644 is the iPad maximum canvas size - OS/Safari 5.1, Tabs+Bookmarks on, held horizontally.
Using <meta name="viewport" content="initial-scale=1, maximum-scale=1"> to stop automatic iPad Safari scaling.
Rectangles/Images are positioned and moved in INTEGERS to avoid decimals/subpixels.
Canvas supports and aliases "subpixels", which presumably impacts performance (did not test this)
Rectangle is cleared (.clearRect) before moving - not employing dirty rectangles. (PC tests showed .clearRect same performance as .fillRect white)
Batching doesn't exist for .fillRect or .drawImage (only applies to line/vector drawing).
Assumptions - Canvas performance NOT impacted by:
... absolute positioning and zIndex (PC Chrome/Firefox tests showed no difference)
... size of browser window/tab (PC Chrome/Firefox tests showed no difference).
... document.style.backgroundColor (PC Chrome/Firefox tests showed little difference).
Results should be relevant for ~1 year (mobile browsers rarely get upgraded, consumers/business slow to upgrade desktop browsers)
No way to prevent tearing / no VSync
.drawImage scaling automatically uses bilinear interpolation - no way to turn it off.
Using <meta http-equiv="X-UA-Compatible" content="IE=Edge"/> to ensure IE9 uses best render.
NO HTML CSS/Styles are applied to CANVAS tag - bare minimum to BODY tag. CANVAS:Background impacts performance slightly (lost ~1fps)
There may be a faster way to do rotation using canvas.setTransform entirely. I take several easier steps (.translate, .rotate and sometimes .scale).

Ke Zhendong wearing a Gucci suit unveiled in 2012 the 49th Taiwan nike free trainer Golden Horse Awards red carpet _ Ke Zhendong .11 evening of May 24, 2012 49th Taiwan Golden Horse Awards Ceremony at the very local cultural characteristics of Taiwan's Ilan cultural workshops organized. Ke Zhendong dressed in Gucci unveiled Awards red carpet.Joke dressed in Gucci green dress 2013 early spring vacation series debut in 2012 49th Taiwan Golden Horse Awards Michael Kors Shoulder Bags red carpet evening of Michael Kors Clutches 24 .11 _ Joke, 2012 49th Taiwan Golden Horse Awards Ceremony at very local culture chemical characteristics nike free run 5.0 womens of the field Ilan Luo Dongwen organized. Joke dressed in Gucci 2013 early spring vacation series debut ceremony red carpet green dress. Unsurprisingly Gucci once again chosen to do ""armor"" of Lilao, even after the hair is always super docile comb hair, Michael Kors Satchels always sophisticated and elegant, but it is no nike free 4.0 surprise there is no error.Andy debut 2012 49th Taiwan Golden Horse Awards red carpet _ Andy evening of 24 .11, 2012 49th Taiwan Golden nike free 5.0 womens Canada Horse Awards Ceremony at the very local cultural characteristics of the chemical field Ilan Luo Dongwen organized. Andy Awards red carpet debut.Button Chengze Liang phase 2012 49th Taiwan Golden Horse Awards red carpet evening of Nike Free 3.0 V2 May 24, .11, 2012 49th Taiwan Golden Horse Awards Ceremony at the very local cultural characteristics of the chemical field Ilan Luo Dongwen organized. Button Chengze Liang phase Awards red carpet.Eddie nike free 5.0 wearing a Gucci suit unveiled in 2012 the 49th Taiwan Golden Horse Awards red carpet _ Eddie .11 evening of May 24, 2012 49th Taiwan Golden Horse Awards Ceremony at nike free 5.0 the very local cultural characteristics of Taiwan's Ilan cultural workshops organized. nike Canada store Eddie wearing a Gucci suit debut Michael Kors Totes Awards nike air max Canada red carpet.Richie debut in 2012 49th Taiwan Golden Horse Awards red carpet evening of 24 .11 _ Richie, 2012 49th Taiwan Golden Horse Awards Ceremony at very local cultural characteristics of organized Ilan Luo Dongwen chemical field. Richie debut Awards red carpet. Denise, Richie Alec debut 2012 49th Taiwan Golden Horse Awards red carpet evening of .11 _ Alec 24, 2012 49th Taiwan Golden Horse Awards Ceremony at the very local cultural characteristics of the chemical field Ilan Luo Dongwen organized. Alec debut Awards red carpet.Sonia dressed in light blue + black Lanvin shoulder dress hit the color debut nike free 5.0 Canada in 2012 49th Taiwan Golden Horse Awards red carpet _ Sonia evening of 24 .11, 2012 49th Taiwan Golden Horse Nike Air Max 95 awards ceremony held at the very local cultural characteristics Ilan Luo Dongwen chemical field. Sonia dressed in light blue + black Lanvin shoulder dress hit the color ceremony red carpet appearances.Nicholas debut 2012 49th Taiwan Golden Horse Awards red carpet evening of 24 .11 _ Nicholas, 2012 49th Taiwan Golden Horse Awards Ceremony at very local cultural Michael Kors Backpacks characteristics of organized Ilan Luo Dongwen chemical field. Nicholas Awards red carpet debut Angelababy dressed nike free 5.0 Canada Allie Saab 2012 Winter gold sequined skirt debut 2012 49th Taiwan Golden Horse Awards red carpet evening _.11 May 24, 2012 49th Taiwan Golden Horse Awards Ceremony at the very local cultural characteristics Taiwan Ilan Luo Dongwen chemical field organizing. Angelababy dressed Allie Saab 2012 Winter gold sequined dress red carpet debut ceremony, the choice of the perfect combination beginning Awards red carpet,Nike Roshe Run but compared to the last time the unique style side comb long hair, comb the ponytail low it seems a little old-fashioned.Zhang Zixuan debut in 2012 wearing a dress Bra 49th Taiwan Golden Horse Awards red carpet _ Zhang Zixuan .11 evening of January 24, 2012 49th Taiwan Golden Horse Awards Ceremony at the very local cultural characteristics of Yilan, Taiwan Luo Dongwen chemical field organizing. Zhang Zixuan Strapless dress dressed red carpet debut ceremony.Michelle Obama wore Salim Khan nike air max 2013 Neuilly-coming designer dress dinner Prime Minister Manmohan Singh couple _ .11 24 evening, U.S. President Barack Obama and his wife Michelle Obama at the White House South Lawn set up a grand banquet, dinner visiting Washington, Prime Minister Manmohan Singh couple. nike free 3.0 First Lady Michelle Obama chose an Indian by the budding designers Neuilly Salim Khan designed dress, elegant and dignified.2 members dressed in a gray woolen jacket combination debut ""Dream"" charity ambassador took office conference _.11 May 25, two members dressed in a gray woolen jacket combination attended the ""Dream"" charity ambassador took office conference .

Conclusion: Overall: Scaling (software) significantly impacts performance - best avoided.

Software Scaling: Scaling from a small canvas to a LARGE canvas - even ONCE - HURTS.
256x161 to 1024x644 so COSTLY it's faster just to draw the large images.
(Rotation is a different story)
Software Scaling: If scaling is required, it can be faster to scale EACH image rather than drawing to a small offscreen canvas.
It depends on the number and size of the images you're scaling.
Don't assume the offscreen canvas trick will gain performance, sometimes it hurts performance.
Canvas.scale doesn't scale the entire canvas. Rather, it's simply a default applied to the >next< .drawImage/.fillRect.
i.e. After drawing 25 images regular size, I can change Canvas.scale to make the next 25 images double in size
The 3 argument drawImage has the same performance as the 5 argument version - despite not having to scale/stretch (even software accelerated).
Unlike Win32 BitBlt/StretchBlt, believe that every drawImage (especially GPU accelerated) call is the same underneath the hood.