Topics

• Getting started with html5-canvas
• Images
• Path (Syntax only)
• Animation
• Collisions and Intersections
• Paths
• Text
• Clearing the screen
• Navigating along a Path
• Dragging Path Shapes & Images on Canvas
• Shadows
• Charts & Diagrams
• Polygons
• Transformations
• Responsive Design
• Compositing
• Pixel Manipulation with "getImageData" and "putImageData"

Examples

• How to add the Html5 Canvas Element to a webpage
• Creating a responsive full page canvas
• Simple animation with 2D context and requestAnimationFrame
• Drawing many translated, scaled, and rotated images quickly
• Image cropping using canvas
• The Tained canvas
• Is "context.drawImage" not displaying the image on the Canvas?
• Overview of the basic path drawing commands: lines and curves
• lineTo (a path command)
• arc (a path command)
• quadraticCurveTo (a path command)
• bezierCurveTo (a path command)
• arcTo (a path command)
• rect (a path command)
• closePath (a path command)
• beginPath (a path command)
• lineCap (a path styling attribute)
• lineJoin (a path styling attribute)
• strokeStyle (a path styling attribute)
• fillStyle (a path styling attribute)
• lineWidth (A path styling attribute)
• shadowColor, shadowBlur, shadowOffsetX, shadowOffsetY (path styling attributes)
• createLinearGradient (creates a path styling object)
• createRadialGradient (creates a path styling object)
• createPattern (creates a path styling object)
• stroke (a path command)
• fill (a path command)
• clip (a path command)
• Animate at a specified interval (add a new rectangle every 1 second)
• Animate at a specified time (an animated clock)
• Use requestAnimationFrame() NOT setInterval() for animation loops
• Animate an image across the Canvas
• Don't draw animations in your event handlers (a simple sketch app)
• Are 2 circles colliding?
• Are 2 rectangles colliding?
• Are a circle and rectangle colliding?
• Are 2 line segments intercepting?
• Are a line segment and circle colliding?
• Are line segment and rectangle colliding?
• Are 2 convex polygons colliding?
• Are 2 polygons colliding? (both concave and convex polys are allowed)
• Is an X,Y point inside an arc?
• Is an X,Y point inside a wedge?
• Is an X,Y point inside a circle?
• Is an X,Y point inside a rectangle?
• Stars
• Line with arrowheads
• Cubic & Quadratic Bezier curve with arrowheads
• Wedge
• Arc with both fill and stroke
• Ellipse
• Line without blurryness
• Regular Polygon
• Easing using Robert Penners equations
• Wrapping text into paragraphs
• Draw text paragraphs into irregular shapes
• Fill text with an image
• Render a rounded polygon.
• Finding points along a cubic Bezier curve
• Finding points along a quadratic curve
• Finding points along a line
• Finding points along an entire Path containing curves and lines
• How shapes & images REALLY(!) "move" on the Canvas
• Dragging circles & rectangles around the Canvas
• Dragging irregular shapes around the Canvas
• Dragging images around the Canvas
• Sticker effect using shadows
• How to stop further shadowing
• Shadowing is computationally expensive -- Cache that shadow!
• Add visual depth with shadows
• Inner shadows
• Length of a Cubic Bezier Curve (a close approximation)
• Pie Chart with Demo
• Rotate an Image or Path around it's centerpoint
• Mouse coordinates after resizing (or scrolling)
• Introduction to Transformations
• A Transformation Matrix to track translated, rotated & scaled shape(s)
• Draw behind existing shapes with "destination-over"
• Erase existing shapes with "destination-out"
• Default compositing: New shapes are drawn over Existing shapes
• Clip images inside shapes with "destination-in"
• Clip images inside shapes with "source-in"
• Inner shadows with "source-atop"
• Introduction to "context.getImageData"
• An index to Html5 Canvas Capabilities & Uses
• Change opacity with "globalAlpha"
• Animate from [x0,y0] to [x1,y1]