Cover image for Canvas Pocket Reference

Book description

The canvas element is a revolutionary feature of HTML5 that enables powerful graphics for rich Internet applications, and this pocket reference provides the essentials you need to put this element to work. If you have a working knowledge of JavaScript, this book will help you create detailed, interactive, and animated graphics from charts to interfaces to video games, whether you’re a web designer or a programmer interested in graphics.

Table of Contents

  1. Canvas Pocket Reference
  2. A Note Regarding Supplemental Files
  3. Preface
  4. 1. Canvas Tutorial
    1. Drawing Lines and Filling Polygons
    2. Graphics Attributes
    3. Canvas Dimensions and Coordinates
    4. Coordinate System Transforms
      1. Understanding Transformations Mathematically
      2. Transformation Example
    5. Drawing and Filling Curves
    6. Rectangles
    7. Colors, Transparency, Gradients, and Patterns
    8. Line-Drawing Attributes
    9. Text
    10. Clipping
    11. Shadows
    12. Images
    13. Compositing
    14. Pixel Manipulation
    15. Hit Detection
    16. Canvas Example: Sparklines
  5. 2. Canvas Reference
    1. Canvas
    2. Canvas.getContext()
    3. Canvas.toDataURL()
    4. CanvasGradient
    5. CanvasGradient.addColorStop()
    6. CanvasPattern
    7. CanvasPixelArray
    8. CRC
    9. CRC.arc()
    10. CRC.arcTo()
    11. CRC.beginPath()
    12. CRC.bezierCurveTo()
    13. CRC.clearRect()
    14. CRC.clip()
    15. CRC.closePath()
    16. CRC.createImageData()
    17. CRC.createLinearGradient()
    18. CRC.createPattern()
    19. CRC.createRadialGradient()
    20. CRC.drawImage()
    21. CRC.fill()
    22. CRC.fillRect()
    23. CRC.fillText()
    24. CRC.getImageData()
    25. CRC.globalCompositeOperation
    26. CRC.isPointInPath()
    27. CRC.lineCap
    28. CRC.lineJoin
    29. CRC.lineTo()
    30. CRC.measureText()
    31. CRC.miterLimit
    32. CRC.moveTo()
    33. CRC.putImageData()
    34. CRC.quadraticCurveTo()
    35. CRC.rect()
    36. CRC.restore()
    37. CRC.rotate()
    38. CRC.save()
    39. CRC.scale()
    40. CRC.setTransform()
    41. CRC.stroke()
    42. CRC.strokeRect()
    43. CRC.strokeText()
    44. CRC.transform()
    45. CRC.translate()
    46. ImageData
    47. TextMetrics
  6. Index
  7. About the Author
  8. Copyright