Here's a template for a full-screen, resizing, rotating <canvas>:

http://sealiesoftware.com/iphonecanvas/

Ingredients:
* One <canvas> at 100% x 100%
* One <meta viewport> demanding scale=1.0 always
* One window.scrollTo(0, 1) hack
* One empty <div> at 100% x 100%
* One onresize function to update the canvas size and drawing dimensions.

The tricky part is updating the canvas size to account for the missing 
URL bar height. The 100% x 100% <div> always has the screen size as if 
the URL bar were visible, so <div> height + 60 is always the right canvas 
height. (Canvas height=100% or canvas bottom=0 or body.innerHeight didn't 
do the right thing.)  The canvas's width and height also need to be updated 
every time to keep one drawing context pixel equal to one screen pixel.

Bug: the first and maybe second rotation don't work as of iPhone 1.0.1. 
(The symptom is stretching of the squares drawn on the canvas, or a URL 
bar that doesn't disappear.)  Use iUI's polling technique, or just rotate 
until it warms up.


-- 
Greg Parker     [EMAIL PROTECTED]


--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups 
"iPhoneWebDev" group.
To post to this group, send email to [email protected]
To unsubscribe from this group, send email to [EMAIL PROTECTED]
For more options, visit this group at 
http://groups.google.com/group/iphonewebdev?hl=en
-~----------~----~----~----~------~----~------~--~---

Reply via email to