TEMPLATES

INSTRUCTIONS

• Select an image above to go to the template
• On the template page press CTRL U or ⌘ U to see the code
• Right click and save page as Web Page Only to start your app
• Click here to get examples of common META TAGS

NOTES

• The colored area above represents the content (canvas / stage)
• The dashed lines represent the screen (window / viewport)
• In the FIT and FILL mode you can align and valign the canvas
• FIT and FILL scale your content keeping the aspect ratio
• This makes positioning in code easy with one set of dimensions
• FULL makes the stage the same as the screen size
• FULL does not scale the stage so handle scaling in app
• See ZIM scale(), scaleTo(), fit() and Layout() for scaling help
• TAG adds the canvas and the stage to an HTML element specified by tag ID
• TAG sets the width and height of the stage to the tag dimensions
• unless you specify dimensions and then it uses the specified dimensions
• See the code and docs for parameters and information
• See the ZIM Basics 01 video for a mention of this page

ADVICE

• FULL is the most professional solution for mobile apps
• FIT is a handy easy-to-code solution for full-screen Web apps
• FILL can be used for full-screen apps where border does not matter
• for instance, drawing on a page or making fireworks
• TAG is used to embed a canvas inside a Web page
• Use zim.fit() to fit content of a TAG frame to fit the area of the tag
• Giving TAG dimensions is like a positioning a picture
• WARNING - be careful with CSS scaling
• Caching your shapes and text is faster but can make scaling more noticable
• Use a bigger canvas and scale down for FIT, FILL and TAG (with dimensions)