HTML5 Canvas

A Dart port of the HTML5 Canvas (2nd Edition) Samples. The samples contained here are all based entirely off of the works: HTML5 Canvas, Second Edition by Steve Fulton and Jeff Fulton (O'Reilly). Copyright 2013 8bitrocket Studios ISBN: 978-1-449-33498-7. The samples are reproduced under the MIT License (See included LICENSE file) with permission from O’Reilly Media, Inc. Copyright 2013.

About The Port

The aim of this project is to provide Dart versions of the examples used in the HTML5 Canvas (2nd Edition). Where possible I've remained true to the examples rather than implementing any optimizations. However I have tried to use common Dart idioms whenever I can. The original goal of the book is to teach readers the HTML5 Canvas and related APIs, not game programming optimizations. (Also see Bob Nystrom's book in progress: Game Programming Patterns)

The examples are located in the web/ directory per Pub's Package Layout Conventions. Within that directory, each chapter is broken down into its own directory. In chapter 1, I have omitted the first couple of samples as they do not pertain directly to Dart. I have included the base template used for many of the samples.

I varied from the book samples by keeping the HTML, stylesheets and Dart code in their own separate files to more clearly display the specific code. Additionally I find this helps conceptionally when compiling to JavaScript.

While the source is heavily commented, I highly recommend that you read HTML5 Canvas, 2nd Edition while following the samples. They have also generously made this book available for reading online.

The Examples

• Chapter 1
  • Example 3 - Your First Canvas Application [.html] [.dart]
  • Example 4 - Guess The Letter Game [.html] [.dart]
  • Example 5 - Hello World Animated [.html] [.dart]
  • Example 6 - Canvas Sub DOM Example [.html] [.dart]
• Chapter 2
  • Example 1 - Basic Rectangles [.html] [.dart]
  • Example 2 - Basic Paths [.html] [.dart]
  • Example 3 - Basic Line Joins [.html] [.dart]
  • Example 4 - Arcs, Curves, and beziers [.html] [.dart]
  • Example 5 - Clipping Regions [.html] [.dart]
  • Example 6 - Compositing and Global Alpha [.html] [.dart]
  • Example 7 - Rotation Transformation #1 [.html] [.dart]
  • Example 8 - Rotation Transformation #2 [.html] [.dart]
  • Example 9 - Rotation Transformation #3 [.html] [.dart]
  • Example 10 - Rotation Transformation Multi Example [.html] [.dart]
  • Example 11 - Scale Transformation #1 [.html] [.dart]
  • Example 12 - Combined Scale and Rotation [.html] [.dart]
  • Example 13 - Combined Scale and Rotation #2 [.html] [.dart]
  • Example 14 - Simple Linear Gradients [.html] [.dart]
  • Example 15 - Simple Linear Gradients #2 [.html] [.dart]
  • Example 16 - Simple Linear Gradients #3 - Horizontal Stroke Rects [.html] [.dart]
  • Example 17 - Simple Linear Gradients #4 - Complex Shape [.html] [.dart]
  • Example 18 - Simple Linear Gradients #5 - Vertical Complex Shape [.html] [.dart]
  • Example 19 - Simple Linear Gradients #6 - Vertical Stroke Shape [.html] [.dart]
  • Example 20 - Simple Diagonal Gradient [.html] [.dart]
  • Example 21 - Simple Radial Gradient #1 [.html] [.dart]
  • Example 22 - Simple Radial Gradient #2 [.html] [.dart]
  • Example 23 - Simple Radial Gradient #3 - Arc [.html] [.dart]
  • Example 24 - Simple Radial Gradient #4 - Arc Stroke [.html] [.dart]
  • Example 25 - Fill Pattern Example #1 [.html] [.dart]
  • Example 26 - Fill Pattern Example #2 [.html] [.dart]
  • Example 27 - Shadow Examples [.html] [.dart]
  • Example 28 - Animating a Path [.html] [.dart]
• Chapter 3
  • Example 1 - Text Arranger Version 1.0 [.html] [.dart]
  • Example 2 - Text Arranger Version 2.0 [.html] [.dart]
  • Example 3 - Text Arranger Version 3.0 [.html] [.dart]