Chapter 6. Using Canvas for web apps

 

This chapter covers

  • Learning about Canvas
  • Using Canvas to draw simple shapes
  • Using Canvas for animations and other complex graphics

We’ve already discussed two major ways to lay out high-quality iPhone web apps. As we described in chapter 4, you can create primarily text-based applications that use the new HTML extensions of the WebKit. Alternatively, you can use a third-party library like iUI to create web pages that look a lot like iPhone native apps, as we showed in chapter 5.

But what if you want to create graphical web apps for the iPhone, mirroring items like Clock, Stocks, and Weather? At first this might seem a little daunting, because we’ve already learned that we can’t use either Flash or SVG on the iPhone. Fortunately, Apple has a ready-made answer: Canvas.

6.1. Getting ready for Canvas

6.2. Drawing paths

6.3. Drawing shapes

6.4. Creating styles: colors, gradients, and lines

6.5. Modifying composition and clipping

6.6. Transforming and restoring

6.7. Incorporating images, patterns, and text

6.8. Putting it together

6.9. Applying animation

6.10. Summary

sitemap