You are previewing Supercharged JavaScript Graphics.

Supercharged JavaScript Graphics

Cover of Supercharged JavaScript Graphics by Raffaele Cecco Published by O'Reilly Media, Inc.
  1. Supercharged JavaScript Graphics
    1. SPECIAL OFFER: Upgrade this ebook with O’Reilly
    2. Preface
      1. Audience and Assumptions
      2. Organization
      3. Conventions Used in This Book
      4. Using Code Examples
      5. Safari® Books Online
      6. How to Contact Us
      7. Acknowledgments
    3. 1. Code Reuse and Optimization
      1. Keeping It Fast
      2. What and When to Optimize
      3. Homespun Code Profiling
      4. Optimizing JavaScript
      5. Optimizing jQuery and DOM Interaction
      6. Other Resources
    4. 2. DHTML Essentials
      1. Creating DHTML Sprites
      2. Converting into a jQuery Plug-in
      3. Timers, Speed, and Frame Rate
      4. Internet Explorer 6 Background Image Caching
    5. 3. Scrolling
      1. CSS-Only Scrolling Effects
      2. Scrolling with JavaScript
    6. 4. Advanced UI
      1. HTML5 Forms
      2. Using JavaScript UI Libraries
      3. Creating UI Elements from Scratch
    7. 5. Introduction to JavaScript Games
      1. Game Objects Overview
      2. The Game Code
    8. 6. HTML5 Canvas
      1. Canvas Support
      2. Bitmaps, Vectors, or Both?
      3. Canvas Limitations
      4. Canvas Versus SVG
      5. Canvas Versus Adobe Flash
      6. Canvas Exporters
      7. Canvas Drawing Basics
      8. Animating with Canvas
      9. Canvas and Recursive Drawing
      10. Replacing DHTML Sprites with Canvas Sprites
      11. A Graphical Chat Application with Canvas and WebSockets
    9. 7. Vectors for Games and Simulations
      1. Operations on Vectors
      2. Creating a JavaScript Vector Object
      3. A Cannon Simulation Using Vectors
      4. Rocket Simulation
    10. 8. Google Visualizations
      1. Limitations
      2. Chart Glossary
      3. Image Charts
      4. Interactive Charts
    11. 9. Reaching the Small Screen with jQuery Mobile
      1. jQuery Mobile
      2. TilePic: A Mobile-Friendly Web Application
      3. PhoneGap
    12. 10. Creating Android Apps with PhoneGap
      1. Installing PhoneGap
      2. Creating a PhoneGap Project in Eclipse
    13. Index
    14. About the Author
    15. Colophon
    16. SPECIAL OFFER: Upgrade this ebook with O’Reilly
O'Reilly logo

Canvas Drawing Basics

The basic Canvas drawing commands are straightforward to implement and are discussed in the following sections.

The Canvas Element

Inserting a Canvas element into a web page is no different than inserting any other HTML element:

<canvas id = 'mycanvas' width = 512 height = 384>
    Fallback content

If you don’t specify any width or height attributes, the default size will be 300 × 150 pixels. It is possible to change the canvas size via CSS (e.g., width:50%), but it’s not recommended; depending on the browser implementation, the output may become distorted or scaled. However, you can style the element with the usual borders, margins, and background colors, although this in no way affects drawing to the canvas itself. The coordinate system has its default origin in the top left—coordinate (0,0)—so, for example, something drawn at coordinate (10, 15) would be positioned 10 pixels from the left and 15 pixels from the top.

If Canvas is not available to the browser, the fallback content between the start and end tags is displayed. Ideally, this should be the regular text or HTML representation of the data that was to be displayed by Canvas. For example, where Canvas might have displayed a pie chart, the fallback content would display a regular table. There are situations where fallback content simply cannot replace Canvas; games and drawing applications don’t have non-Canvas equivalents. In these cases, the fallback content should display a useful message explaining ...

The best content for your career. Discover unlimited learning on demand for around $1/day.