Chapter 2: Setting Up Your Canvas Platform
3. Double-click this entry to toggle the value to True
4. Restart your browser.
Testing Your Application on Mobile Devices
Since the introduction of the iPhone in 2007, followed by Android, Windows, and others, websites can now be easily viewed on a wide variety of mobile devices. Although you don’t need a mobile device to develop an HTML5 Canvas application, you might want to test your application on a smartphone or tablet to see how it performs.
Mobile screen resolutions range from about 160 x 100 pixels for smaller smartphones to around 1024 x 600 pixels for larger tablets. At the low end of the range, viewing a website can be difficult. On the higher-end smartphones and tablets, accessing websites is becoming easy and common.
Mobile devices generally lag computers in their support for HTML5 and Canvas. You can test the level of HTML5 support for your mobile devices by going to www.html5test.com, as shown in Figures 2-5 through 2-7.
Even if your device shows as supporting Canvas, not all websites using Canvas will necessarily work on your phone or tablet. If a Canvas application uses WebGL, or other additional features that are not supported on your device, the application won’t function.
Keep in mind that average mobile device processors and video hardware aren’t as powerful as those in desktop or laptop computers. This means that a Canvas application may not work as well on your mobile device as it does on your desktop or laptop.
To test your mobile device for Canvas performance, follow the same steps in the earlier section “Testing Canvas Performance on Your System” and note the frame rate for your phone.
29
Chapter 2: Setting Up Your Canvas Platform
Table 2-2 shows the results running on my smartphone, which has the following profile:
✓ Samsung Galaxy Nexus SCH 1515
✓ 1.2 GHz Dual-Core Processor
✓ Android 4.0 Operating System
Table 2-2 Canvas Performance on a Smartphone
Browser Version Frames per Second
Chrome Mobile Beta 20
Opera Mobile 12 8
Android 4 9
Dolphin HD 8 14
Measuring Web Browser Support for HTML5 Canvas
Web browser support for HTML5 Canvas is a work in progress. Browser developers are continuing to add HTML5 feature support and performance improvements.
Examining HTML5 Canvas support
HTML5 is the fifth and latest version of the markup language for displaying content on the World Wide Web. HTML standards are defined by the World Wide Web Consortium (W3C), which is targeting 2014 for the completion of the HTML5 recommendation. It will likely take some years after that for all web browsers to support the complete set of HTML5 features.
The world, however, isn’t waiting for completion of the standard to begin using HTML5. Many HTML5 features, including Canvas, are already imple- mented in recent releases of the major browsers.
The table in Figure 2-4 from www.caniuse.com/#feat=canvas shows the level of implementation for HTML5 Canvas for the major browsers as of this writing.
30 Part I: Looking at Canvas
Courtesy Alexis Deveria.
Figure 2-4: Browser support for HTML5 Canvas.
Testing the browsers you use
Test the browsers on your computers and mobile devices for HTML5 support by using the HTML5 Test at www.html5test.com. It produces an overall rating for a browser version on a scale of 0-500 and checks ratings for indi- vidual features. An overall rating of over 400 is a decent score. These ratings will rise as browser developers add HTML5 functionality.
To test your Canvas applications on the major browsers, load recent versions of Internet Explorer, Firefox, Chrome, Safari, and Opera onto your computer.
Open your completed application with each browser to check its performance.
(See Chapter 1 for details on where to download these browsers.)
31
Chapter 2: Setting Up Your Canvas Platform
Using Text Editors
HTML5 Canvas application code is represented by sequences of text charac- ters. Use a text editor to create and edit your code. You can’t use a word pro- cessor, such as Microsoft Word, because it inserts special control characters to give the document the desired formatting, such as you see in this book. A text editor doesn’t insert formatting characters.
Standard text editors
Computers usually come with a standard text editor already installed, such as Notepad (shown Figure 2-5) with Windows, and TextEdit (shown in Figure 2-6) with Mac OS X. They provide basic, no-frills text editing.
Figure 2-5: Windows Notepad text editor.
32 Part I: Looking at Canvas
Figure 2-6: Mac OS X TextEdit text editor.
Alternatives to standard text editors
There are many alternatives to standard text editors. These enhanced editors provide features such as:
✓ Colored element and indentation highlighting: For easier differentia- tion of code elements
✓ Find and replace: For easier multiple changes to the same piece of code ✓ Drag-and-drop: To more easily rearrange your code
✓ Split screen editing: To be able to edit multiple files side-by-side ✓ Zoom controls: To make your code larger or smaller
33
Chapter 2: Setting Up Your Canvas Platform
Here are a few popular ones you may want to check out:
✓ Notepad++: Shown in Figure 2-7, Notepad++ is one of the most popular alternatives to standard Windows Notepad. It’s free and can be down- loaded from www.notepad-plus-plus.org.
✓ jEdit: Shown in Figure 2-8, jEdit is a popular text editor that can be used with Windows, Mac OS, Unix, and Linux. jEdit is free and can be down- loaded from www.jedit.org.
Figure 2-7: Notepad++ text editor.
34 Part I: Looking at Canvas
Figure 2-8: The jEdit text editor.
Saving HTML5 Canvas application files
After you’ve entered the HTML5 Canvas application code in your favorite text editor, save the file with the .htm or .html extension. To do this, click Save and then, in the Save As dialog box, select All Files from the Save As Type drop-down list, and append .htm or .html to the filename (see Figure 2-9).
Then click Save.
With the .htm or .html file extension, when you click the filename, your default browser opens the file as a web page, and your Canvas is displayed.
To edit your code, open the file with a text editor, such as Notepad or jEdit.
35
Chapter 2: Setting Up Your Canvas Platform
Figure 2-9: Saving HTML5 Canvas application files.
Using Code Debuggers
It’s virtually impossible to develop Canvas applications without a code debugger. HTML and JavaScript are interpreted languages, so there’s no compiler used to check for syntax errors. Program code is executed by the browser. Your code can also contain logic errors and other problems that are difficult to diagnose.
As a result, when your code contains errors, you’ll often see nothing happen.
Your Canvas simply remains blank. You’ll have no indication where to look for the cause of failure. This is, in fact, usually what happens the first time you run your application code. You see nothing. Yikes, what do you do now?
Code debuggers to the rescue. A debugger lets you set code breakpoints (places where execution stops) and examine application variables during execution. You can step through your code and follow exactly what’s happen- ing to determine where failures occur and what’s causing them.
Firefox Firebug
Shown in Figure 2-10, the Firefox Firebug browser extension is a popular and powerful debugging tool. It’s free, and you can download and add it to your Firefox browser by following these steps:
36 Part I: Looking at Canvas
Firerainbow add-on provides color-coded syntax highlighting.
Figure 2-10: Firefox Firebug debugger extension with the Firerainbow add-on.
1. If you don’t have the latest version of Firefox installed on your com- puter, go to www.firefox.com. Click Firefox Free Download and install the browser.
2. Using the Firefox browser, go to www.getfirebug.com, and then click the Install Firebug button.
It’s important to use Firefox in this step so that Firebug will be automati- cally installed as a Firefox extension.