├── .gitignore
├── web
    ├── base.css
    ├── ch1
    │   ├── base.css
    │   ├── html5bg.jpg
    │   ├── helloworld.gif
    │   ├── ch1ex5.html
    │   ├── ch1ex3.html
    │   ├── ch1ex4.html
    │   ├── ch1ex6.html
    │   ├── ch1ex6.dart
    │   ├── ch1ex3.dart
    │   ├── ch1ex5.dart
    │   └── ch1ex4.dart
    ├── ch2
    │   ├── base.css
    │   ├── fill_20x20.gif
    │   ├── ch2ex2.html
    │   ├── ch2ex5.html
    │   ├── ch2ex1.html
    │   ├── ch2ex27.html
    │   ├── ch2ex28.html
    │   ├── ch2ex3.html
    │   ├── ch2ex21.html
    │   ├── ch2ex4.html
    │   ├── ch2ex11.html
    │   ├── ch2ex12.html
    │   ├── ch2ex14.html
    │   ├── ch2ex15.html
    │   ├── ch2ex20.html
    │   ├── ch2ex22.html
    │   ├── ch2ex25.html
    │   ├── ch2ex26.html
    │   ├── ch2ex6.html
    │   ├── ch2ex7.html
    │   ├── ch2ex8.html
    │   ├── ch2ex9.html
    │   ├── ch2ex13.html
    │   ├── ch2ex23.html
    │   ├── ch2ex10.html
    │   ├── ch2ex17.html
    │   ├── ch2ex24.html
    │   ├── ch2ex16.html
    │   ├── ch2ex18.html
    │   ├── ch2ex19.html
    │   ├── ch2ex7.dart
    │   ├── ch2ex1.dart
    │   ├── ch2ex2.dart
    │   ├── ch2ex14.dart
    │   ├── ch2ex8.dart
    │   ├── ch2ex11.dart
    │   ├── ch2ex21.dart
    │   ├── ch2ex22.dart
    │   ├── ch2ex15.dart
    │   ├── ch2ex16.dart
    │   ├── ch2ex12.dart
    │   ├── ch2ex25.dart
    │   ├── ch2ex9.dart
    │   ├── ch2ex13.dart
    │   ├── ch2ex19.dart
    │   ├── ch2ex23.dart
    │   ├── ch2ex24.dart
    │   ├── ch2ex17.dart
    │   ├── ch2ex18.dart
    │   ├── ch2ex6.dart
    │   ├── ch2ex20.dart
    │   ├── ch2ex3.dart
    │   ├── ch2ex5.dart
    │   ├── ch2ex27.dart
    │   ├── ch2ex4.dart
    │   ├── ch2ex26.dart
    │   ├── ch2ex28.dart
    │   └── ch2ex10.dart
    ├── ch3
    │   ├── base.css
    │   ├── texture.jpg
    │   ├── ch3ex1.html
    │   ├── ch3ex1.dart
    │   ├── ch3ex2.html
    │   ├── ch3ex3.html
    │   ├── ch3ex2.dart
    │   └── ch3ex3.dart
    ├── base.dart
    └── base.html
├── AUTHORS
├── pubspec.yaml
├── LICENSE
└── README.md


/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | packages
3 | .project
4 | pubspec.lock
5 | *~
6 | 


--------------------------------------------------------------------------------
/web/base.css:
--------------------------------------------------------------------------------
1 | div#container {
2 |   position: absolute;
3 |   top: 50px;
4 |   left: 50px;
5 | }


--------------------------------------------------------------------------------
/web/ch1/base.css:
--------------------------------------------------------------------------------
1 | div#container {
2 |   position: absolute;
3 |   top: 50px;
4 |   left: 50px;
5 | }


--------------------------------------------------------------------------------
/web/ch2/base.css:
--------------------------------------------------------------------------------
1 | div#container {
2 |   position: absolute;
3 |   top: 50px;
4 |   left: 50px;
5 | }


--------------------------------------------------------------------------------
/web/ch3/base.css:
--------------------------------------------------------------------------------
1 | div#container {
2 |   position: absolute;
3 |   top: 50px;
4 |   left: 50px;
5 | }


--------------------------------------------------------------------------------
/web/ch1/html5bg.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/butlermatt/dart_HTML5_Canvas/HEAD/web/ch1/html5bg.jpg


--------------------------------------------------------------------------------
/web/ch3/texture.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/butlermatt/dart_HTML5_Canvas/HEAD/web/ch3/texture.jpg


--------------------------------------------------------------------------------
/web/ch1/helloworld.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/butlermatt/dart_HTML5_Canvas/HEAD/web/ch1/helloworld.gif


--------------------------------------------------------------------------------
/web/ch2/fill_20x20.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/butlermatt/dart_HTML5_Canvas/HEAD/web/ch2/fill_20x20.gif


--------------------------------------------------------------------------------
/AUTHORS:
--------------------------------------------------------------------------------
1 | Based on original works from:
2 | HTML5 Canvas, Second Edition by Steve Fulton and Jeff Fulton (O'Reilly)
3 | Copyright 2013 8bitrocket Studios
4 | ISBN 978-1-449-33498-7
5 | 
6 | Matthew Butler <butler.matthew@gmail.com>
7 | 
8 | 


--------------------------------------------------------------------------------
/pubspec.yaml:
--------------------------------------------------------------------------------
 1 | name: dart_html5_canvas
 2 | version: 0.0.2
 3 | author: Matthew Butler & Steve Fulton and Jeff Fulton (O'Reilly)
 4 | description: Dart port of examples from HTML5 Canvas, 2nd Edition
 5 | homepage: https://github.com/butlermatt/dart_HTML5_Canvas
 6 | documentation: https://github.com/butlermatt/dart_HTML5_Canvas/blob/master/README.md
 7 | environment:
 8 |   sdk: '>=0.8.10+6 <2.0.0'
 9 | dependencies:
10 |   browser: '>=0.9.0 <0.10.0'
11 | 


--------------------------------------------------------------------------------
/web/base.dart:
--------------------------------------------------------------------------------
 1 | library base;
 2 | 
 3 | import 'dart:html';
 4 | 
 5 | // The dart print() command will automatically print to the console
 6 | // and shouldn't throw an exception so no need to worry about creating
 7 | // our own debugger. For more complicated logging the logger package exists.
 8 | 
 9 | // Since dart supports class inheritance and library namespaces
10 | // we don't need to keep our methods/properties in a local scope.
11 | class CanvasApp {
12 |   CanvasElement theCanvas;
13 |   CanvasRenderingContext2D context;
14 |   
15 |   CanvasApp() {
16 |     // Initialize the canvas and context
17 |     theCanvas = document.querySelector('#canvas');
18 |     context = theCanvas.getContext('2d');
19 |   }
20 |   
21 |   void drawScreen() {
22 |     // Content goes here.
23 |     
24 |   }
25 | }
26 | 
27 | void main() {
28 |   var canvasApp = new CanvasApp();
29 |   canvasApp.drawScreen();
30 | }


--------------------------------------------------------------------------------
/web/base.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | 
 3 | <html lang="en">
 4 |   <head>
 5 |     <meta charset="UTF-8">
 6 |     <title>Base Page</title>
 7 |     <link rel="stylesheet" href="base.css">
 8 |     <!-- We don't include the modernizer because Dart only supports "The modern web" -->
 9 |   </head>
10 |  
11 |   <body>
12 |   <div id="container">
13 |     <canvas id="canvas" width="500" height="500">
14 |       Your browser does not support HTML 5 Canvas.
15 |     </canvas>
16 |   </div>
17 |   
18 |     <!-- 
19 |     Since dart VM usually runs after the page is initially rendered, we
20 |     keep our scripts just prior to the end of the body. This helps when
21 |     compiled to javascript for consistancy.
22 |      -->
23 |     <script type="application/dart" src="base.dart"></script>
24 |     <!-- for this next line to work, your pubspec.yaml file must have a dependency on 'browser' -->
25 |     <script src="packages/browser/dart.js"></script>
26 |   </body>
27 | </html>
28 | 


--------------------------------------------------------------------------------
/web/ch2/ch2ex2.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | 
 3 | <html lang="en">
 4 |   <head>
 5 |     <meta charset="UTF-8">
 6 |     <title>Ch2Ex2 Basic Paths</title>
 7 |     <link rel="stylesheet" href="base.css">
 8 |     <!-- We don't include the modernizer because Dart only supports "The modern web" -->
 9 |   </head>
10 |  
11 |   <body>
12 |   <div id="container">
13 |     <canvas id="canvas" width="500" height="500">
14 |       Your browser does not support HTML 5 Canvas.
15 |     </canvas>
16 |   </div>
17 |   
18 |     <!-- 
19 |     Since dart VM usually runs after the page is initially rendered, we
20 |     keep our scripts just prior to the end of the body. This helps when
21 |     compiled to javascript for consistancy.
22 |      -->
23 |     <script type="application/dart" src="ch2ex2.dart"></script>
24 |     <!-- for this next line to work, your pubspec.yaml file must have a dependency on 'browser' -->
25 |     <script src="packages/browser/dart.js"></script>
26 |   </body>
27 | </html>
28 | 


--------------------------------------------------------------------------------
/web/ch2/ch2ex5.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | 
 3 | <html lang="en">
 4 |   <head>
 5 |     <meta charset="UTF-8">
 6 |     <title>Ch2Ex5 Clipping Region</title>
 7 |     <link rel="stylesheet" href="base.css">
 8 |     <!-- We don't include the modernizer because Dart only supports "The modern web" -->
 9 |   </head>
10 |  
11 |   <body>
12 |   <div id="container">
13 |     <canvas id="canvas" width="500" height="500">
14 |       Your browser does not support HTML 5 Canvas.
15 |     </canvas>
16 |   </div>
17 |   
18 |     <!-- 
19 |     Since dart VM usually runs after the page is initially rendered, we
20 |     keep our scripts just prior to the end of the body. This helps when
21 |     compiled to javascript for consistancy.
22 |      -->
23 |     <script type="application/dart" src="ch2ex5.dart"></script>
24 |     <!-- for this next line to work, your pubspec.yaml file must have a dependency on 'browser' -->
25 |     <script src="packages/browser/dart.js"></script>
26 |   </body>
27 | </html>
28 | 


--------------------------------------------------------------------------------
/web/ch2/ch2ex1.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | 
 3 | <html lang="en">
 4 |   <head>
 5 |     <meta charset="UTF-8">
 6 |     <title>Ch2Ex1 The Basic Rectangle</title>
 7 |     <link rel="stylesheet" href="base.css">
 8 |     <!-- We don't include the modernizer because Dart only supports "The modern web" -->
 9 |   </head>
10 |  
11 |   <body>
12 |   <div id="container">
13 |     <canvas id="canvas" width="500" height="500">
14 |       Your browser does not support HTML 5 Canvas.
15 |     </canvas>
16 |   </div>
17 |   
18 |     <!-- 
19 |     Since dart VM usually runs after the page is initially rendered, we
20 |     keep our scripts just prior to the end of the body. This helps when
21 |     compiled to javascript for consistancy.
22 |      -->
23 |     <script type="application/dart" src="ch2ex1.dart"></script>
24 |     <!-- for this next line to work, your pubspec.yaml file must have a dependency on 'browser' -->
25 |     <script src="packages/browser/dart.js"></script>
26 |   </body>
27 | </html>
28 | 


--------------------------------------------------------------------------------
/web/ch2/ch2ex27.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | 
 3 | <html lang="en">
 4 |   <head>
 5 |     <meta charset="UTF-8">
 6 |     <title>Ch2Ex27  Shadow Examples</title>
 7 |     <link rel="stylesheet" href="base.css">
 8 |     <!-- We don't include the modernizer because Dart only supports "The modern web" -->
 9 |   </head>
10 |  
11 |   <body>
12 |   <div id="container">
13 |     <canvas id="canvas" width="500" height="500">
14 |       Your browser does not support HTML 5 Canvas.
15 |     </canvas>
16 |   </div>
17 |   
18 |     <!-- 
19 |     Since dart VM usually runs after the page is initially rendered, we
20 |     keep our scripts just prior to the end of the body. This helps when
21 |     compiled to javascript for consistancy.
22 |      -->
23 |     <script type="application/dart" src="ch2ex27.dart"></script>
24 |     <!-- for this next line to work, your pubspec.yaml file must have a dependency on 'browser' -->
25 |     <script src="packages/browser/dart.js"></script>
26 |   </body>
27 | </html>
28 | 


--------------------------------------------------------------------------------
/web/ch2/ch2ex28.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | 
 3 | <html lang="en">
 4 |   <head>
 5 |     <meta charset="UTF-8">
 6 |     <title>Ch2Ex28: Animating a Path</title>
 7 |     <link rel="stylesheet" href="base.css">
 8 |     <!-- We don't include the modernizer because Dart only supports "The modern web" -->
 9 |   </head>
10 |  
11 |   <body>
12 |   <div id="container">
13 |     <canvas id="canvas" width="500" height="500">
14 |       Your browser does not support HTML 5 Canvas.
15 |     </canvas>
16 |   </div>
17 |   
18 |     <!-- 
19 |     Since dart VM usually runs after the page is initially rendered, we
20 |     keep our scripts just prior to the end of the body. This helps when
21 |     compiled to javascript for consistancy.
22 |      -->
23 |     <script type="application/dart" src="ch2ex28.dart"></script>
24 |     <!-- for this next line to work, your pubspec.yaml file must have a dependency on 'browser' -->
25 |     <script src="packages/browser/dart.js"></script>
26 |   </body>
27 | </html>
28 | 


--------------------------------------------------------------------------------
/web/ch2/ch2ex3.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | 
 3 | <html lang="en">
 4 |   <head>
 5 |     <meta charset="UTF-8">
 6 |     <title>Ch2Ex3 Basic Line Joins</title>
 7 |     <link rel="stylesheet" href="base.css">
 8 |     <!-- We don't include the modernizer because Dart only supports "The modern web" -->
 9 |   </head>
10 |  
11 |   <body>
12 |   <div id="container">
13 |     <canvas id="canvas" width="500" height="500">
14 |       Your browser does not support HTML 5 Canvas.
15 |     </canvas>
16 |   </div>
17 |   
18 |     <!-- 
19 |     Since dart VM usually runs after the page is initially rendered, we
20 |     keep our scripts just prior to the end of the body. This helps when
21 |     compiled to javascript for consistancy.
22 |      -->
23 |     <script type="application/dart" src="ch2ex3.dart"></script>
24 |     <!-- for this next line to work, your pubspec.yaml file must have a dependency on 'browser' -->
25 |     <script src="packages/browser/dart.js"></script>
26 |   </body>
27 | </html>
28 | 


--------------------------------------------------------------------------------
/web/ch1/ch1ex5.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | 
 3 | <html lang="en">
 4 |   <head>
 5 |     <meta charset="UTF-8">
 6 |     <title>CH1EX5 : Hello World Animated</title>
 7 |     <link rel="stylesheet" href="base.css">
 8 |     <!-- We don't include the modernizer because Dart only supports "The modern web" -->
 9 |   </head>
10 |  
11 |   <body>
12 |   <div id="container">
13 |     <canvas id="canvasOne" width="640" height="480">
14 |       Your browser does not support HTML 5 Canvas.
15 |     </canvas>
16 |   </div>
17 |   
18 |     <!-- 
19 |     Since dart VM usually runs after the page is initially rendered, we
20 |     keep our scripts just prior to the end of the body. This helps when
21 |     compiled to javascript for consistancy.
22 |      -->
23 |     <script type="application/dart" src="ch1ex5.dart"></script>
24 |     <!-- for this next line to work, your pubspec.yaml file must have a dependency on 'browser' -->
25 |     <script src="packages/browser/dart.js"></script>
26 |   </body>
27 | </html>
28 | 


--------------------------------------------------------------------------------
/web/ch2/ch2ex21.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | 
 3 | <html lang="en">
 4 |   <head>
 5 |     <meta charset="UTF-8">
 6 |     <title>Ch2Ex21 radial Gradients #1</title>
 7 |     <link rel="stylesheet" href="base.css">
 8 |     <!-- We don't include the modernizer because Dart only supports "The modern web" -->
 9 |   </head>
10 |  
11 |   <body>
12 |   <div id="container">
13 |     <canvas id="canvas" width="500" height="500">
14 |       Your browser does not support HTML 5 Canvas.
15 |     </canvas>
16 |   </div>
17 |   
18 |     <!-- 
19 |     Since dart VM usually runs after the page is initially rendered, we
20 |     keep our scripts just prior to the end of the body. This helps when
21 |     compiled to javascript for consistancy.
22 |      -->
23 |     <script type="application/dart" src="ch2ex21.dart"></script>
24 |     <!-- for this next line to work, your pubspec.yaml file must have a dependency on 'browser' -->
25 |     <script src="packages/browser/dart.js"></script>
26 |   </body>
27 | </html>
28 | 


--------------------------------------------------------------------------------
/web/ch2/ch2ex4.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | 
 3 | <html lang="en">
 4 |   <head>
 5 |     <meta charset="UTF-8">
 6 |     <title>Ch2Ex4 Arcs, Curves, and beziers</title>
 7 |     <link rel="stylesheet" href="base.css">
 8 |     <!-- We don't include the modernizer because Dart only supports "The modern web" -->
 9 |   </head>
10 |  
11 |   <body>
12 |   <div id="container">
13 |     <canvas id="canvas" width="500" height="500">
14 |       Your browser does not support HTML 5 Canvas.
15 |     </canvas>
16 |   </div>
17 |   
18 |     <!-- 
19 |     Since dart VM usually runs after the page is initially rendered, we
20 |     keep our scripts just prior to the end of the body. This helps when
21 |     compiled to javascript for consistancy.
22 |      -->
23 |     <script type="application/dart" src="ch2ex4.dart"></script>
24 |     <!-- for this next line to work, your pubspec.yaml file must have a dependency on 'browser' -->
25 |     <script src="packages/browser/dart.js"></script>
26 |   </body>
27 | </html>
28 | 


--------------------------------------------------------------------------------
/web/ch2/ch2ex11.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | 
 3 | <html lang="en">
 4 |   <head>
 5 |     <meta charset="UTF-8">
 6 |     <title>Ch2Ex11 Scale Transformation #1</title>
 7 |     <link rel="stylesheet" href="base.css">
 8 |     <!-- We don't include the modernizer because Dart only supports "The modern web" -->
 9 |   </head>
10 |  
11 |   <body>
12 |   <div id="container">
13 |     <canvas id="canvas" width="500" height="500">
14 |       Your browser does not support HTML 5 Canvas.
15 |     </canvas>
16 |   </div>
17 |   
18 |     <!-- 
19 |     Since dart VM usually runs after the page is initially rendered, we
20 |     keep our scripts just prior to the end of the body. This helps when
21 |     compiled to javascript for consistancy.
22 |      -->
23 |     <script type="application/dart" src="ch2ex11.dart"></script>
24 |     <!-- for this next line to work, your pubspec.yaml file must have a dependency on 'browser' -->
25 |     <script src="packages/browser/dart.js"></script>
26 |   </body>
27 | </html>
28 | 


--------------------------------------------------------------------------------
/web/ch2/ch2ex12.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | 
 3 | <html lang="en">
 4 |   <head>
 5 |     <meta charset="UTF-8">
 6 |     <title>Ch2Ex12 Combined scale and rotation</title>
 7 |     <link rel="stylesheet" href="base.css">
 8 |     <!-- We don't include the modernizer because Dart only supports "The modern web" -->
 9 |   </head>
10 |  
11 |   <body>
12 |   <div id="container">
13 |     <canvas id="canvas" width="500" height="500">
14 |       Your browser does not support HTML 5 Canvas.
15 |     </canvas>
16 |   </div>
17 |   
18 |     <!-- 
19 |     Since dart VM usually runs after the page is initially rendered, we
20 |     keep our scripts just prior to the end of the body. This helps when
21 |     compiled to javascript for consistancy.
22 |      -->
23 |     <script type="application/dart" src="ch2ex12.dart"></script>
24 |     <!-- for this next line to work, your pubspec.yaml file must have a dependency on 'browser' -->
25 |     <script src="packages/browser/dart.js"></script>
26 |   </body>
27 | </html>
28 | 


--------------------------------------------------------------------------------
/web/ch2/ch2ex14.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | 
 3 | <html lang="en">
 4 |   <head>
 5 |     <meta charset="UTF-8">
 6 |     <title>Ch2Ex14 Simple Linear Gradients</title>
 7 |     <link rel="stylesheet" href="base.css">
 8 |     <!-- We don't include the modernizer because Dart only supports "The modern web" -->
 9 |   </head>
10 |  
11 |   <body>
12 |   <div id="container">
13 |     <canvas id="canvas" width="500" height="500">
14 |       Your browser does not support HTML 5 Canvas.
15 |     </canvas>
16 |   </div>
17 |   
18 |     <!-- 
19 |     Since dart VM usually runs after the page is initially rendered, we
20 |     keep our scripts just prior to the end of the body. This helps when
21 |     compiled to javascript for consistancy.
22 |      -->
23 |     <script type="application/dart" src="ch2ex14.dart"></script>
24 |     <!-- for this next line to work, your pubspec.yaml file must have a dependency on 'browser' -->
25 |     <script src="packages/browser/dart.js"></script>
26 |   </body>
27 | </html>
28 | 


--------------------------------------------------------------------------------
/web/ch2/ch2ex15.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | 
 3 | <html lang="en">
 4 |   <head>
 5 |     <meta charset="UTF-8">
 6 |     <title>Ch2Ex14 Simple Linear Gradients #2</title>
 7 |     <link rel="stylesheet" href="base.css">
 8 |     <!-- We don't include the modernizer because Dart only supports "The modern web" -->
 9 |   </head>
10 |  
11 |   <body>
12 |   <div id="container">
13 |     <canvas id="canvas" width="500" height="500">
14 |       Your browser does not support HTML 5 Canvas.
15 |     </canvas>
16 |   </div>
17 |   
18 |     <!-- 
19 |     Since dart VM usually runs after the page is initially rendered, we
20 |     keep our scripts just prior to the end of the body. This helps when
21 |     compiled to javascript for consistancy.
22 |      -->
23 |     <script type="application/dart" src="ch2ex15.dart"></script>
24 |     <!-- for this next line to work, your pubspec.yaml file must have a dependency on 'browser' -->
25 |     <script src="packages/browser/dart.js"></script>
26 |   </body>
27 | </html>
28 | 


--------------------------------------------------------------------------------
/web/ch2/ch2ex20.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | 
 3 | <html lang="en">
 4 |   <head>
 5 |     <meta charset="UTF-8">
 6 |     <title>Ch2Ex20 Simple Diagonal Gradient #1</title>
 7 |     <link rel="stylesheet" href="base.css">
 8 |     <!-- We don't include the modernizer because Dart only supports "The modern web" -->
 9 |   </head>
10 |  
11 |   <body>
12 |   <div id="container">
13 |     <canvas id="canvas" width="500" height="500">
14 |       Your browser does not support HTML 5 Canvas.
15 |     </canvas>
16 |   </div>
17 |   
18 |     <!-- 
19 |     Since dart VM usually runs after the page is initially rendered, we
20 |     keep our scripts just prior to the end of the body. This helps when
21 |     compiled to javascript for consistancy.
22 |      -->
23 |     <script type="application/dart" src="ch2ex20.dart"></script>
24 |     <!-- for this next line to work, your pubspec.yaml file must have a dependency on 'browser' -->
25 |     <script src="packages/browser/dart.js"></script>
26 |   </body>
27 | </html>
28 | 


--------------------------------------------------------------------------------
/web/ch2/ch2ex22.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | 
 3 | <html lang="en">
 4 |   <head>
 5 |     <meta charset="UTF-8">
 6 |     <title>Ch2Ex22 Simple radial Gradients #2</title>
 7 |     <link rel="stylesheet" href="base.css">
 8 |     <!-- We don't include the modernizer because Dart only supports "The modern web" -->
 9 |   </head>
10 |  
11 |   <body>
12 |   <div id="container">
13 |     <canvas id="canvas" width="500" height="500">
14 |       Your browser does not support HTML 5 Canvas.
15 |     </canvas>
16 |   </div>
17 |   
18 |     <!-- 
19 |     Since dart VM usually runs after the page is initially rendered, we
20 |     keep our scripts just prior to the end of the body. This helps when
21 |     compiled to javascript for consistancy.
22 |      -->
23 |     <script type="application/dart" src="ch2ex22.dart"></script>
24 |     <!-- for this next line to work, your pubspec.yaml file must have a dependency on 'browser' -->
25 |     <script src="packages/browser/dart.js"></script>
26 |   </body>
27 | </html>
28 | 


--------------------------------------------------------------------------------
/web/ch2/ch2ex25.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | 
 3 | <html lang="en">
 4 |   <head>
 5 |     <meta charset="UTF-8">
 6 |     <title>Ch2Ex25 Fill Pattern Example #1</title>
 7 |     <link rel="stylesheet" href="base.css">
 8 |     <!-- We don't include the modernizer because Dart only supports "The modern web" -->
 9 |   </head>
10 |  
11 |   <body>
12 |   <div id="container">
13 |     <canvas id="canvas" width="500" height="500">
14 |       Your browser does not support HTML 5 Canvas.
15 |     </canvas>
16 |   </div>
17 |   
18 |     <!-- 
19 |     Since dart VM usually runs after the page is initially rendered, we
20 |     keep our scripts just prior to the end of the body. This helps when
21 |     compiled to javascript for consistancy.
22 |      -->
23 |     <script type="application/dart" src="ch2ex25.dart"></script>
24 |     <!-- for this next line to work, your pubspec.yaml file must have a dependency on 'browser' -->
25 |     <script src="packages/browser/dart.js"></script>
26 |   </body>
27 | </html>
28 | 


--------------------------------------------------------------------------------
/web/ch2/ch2ex26.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | 
 3 | <html lang="en">
 4 |   <head>
 5 |     <meta charset="UTF-8">
 6 |     <title>Ch2Ex26 Fill Pattern Example #2</title>
 7 |     <link rel="stylesheet" href="base.css">
 8 |     <!-- We don't include the modernizer because Dart only supports "The modern web" -->
 9 |   </head>
10 |  
11 |   <body>
12 |   <div id="container">
13 |     <canvas id="canvas" width="500" height="500">
14 |       Your browser does not support HTML 5 Canvas.
15 |     </canvas>
16 |   </div>
17 |   
18 |     <!-- 
19 |     Since dart VM usually runs after the page is initially rendered, we
20 |     keep our scripts just prior to the end of the body. This helps when
21 |     compiled to javascript for consistancy.
22 |      -->
23 |     <script type="application/dart" src="ch2ex26.dart"></script>
24 |     <!-- for this next line to work, your pubspec.yaml file must have a dependency on 'browser' -->
25 |     <script src="packages/browser/dart.js"></script>
26 |   </body>
27 | </html>
28 | 


--------------------------------------------------------------------------------
/web/ch2/ch2ex6.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | 
 3 | <html lang="en">
 4 |   <head>
 5 |     <meta charset="UTF-8">
 6 |     <title>Ch2Ex6 Compositing and Global Alpha</title>
 7 |     <link rel="stylesheet" href="base.css">
 8 |     <!-- We don't include the modernizer because Dart only supports "The modern web" -->
 9 |   </head>
10 |  
11 |   <body>
12 |   <div id="container">
13 |     <canvas id="canvas" width="500" height="500">
14 |       Your browser does not support HTML 5 Canvas.
15 |     </canvas>
16 |   </div>
17 |   
18 |     <!-- 
19 |     Since dart VM usually runs after the page is initially rendered, we
20 |     keep our scripts just prior to the end of the body. This helps when
21 |     compiled to javascript for consistancy.
22 |      -->
23 |     <script type="application/dart" src="ch2ex6.dart"></script>
24 |     <!-- for this next line to work, your pubspec.yaml file must have a dependency on 'browser' -->
25 |     <script src="packages/browser/dart.js"></script>
26 |   </body>
27 | </html>
28 | 


--------------------------------------------------------------------------------
/web/ch2/ch2ex7.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | 
 3 | <html lang="en">
 4 |   <head>
 5 |     <meta charset="UTF-8">
 6 |     <title>Ch2Ex7 Rotation Transformation #1</title>
 7 |     <link rel="stylesheet" href="base.css">
 8 |     <!-- We don't include the modernizer because Dart only supports "The modern web" -->
 9 |   </head>
10 |  
11 |   <body>
12 |   <div id="container">
13 |     <canvas id="canvas" width="500" height="500">
14 |       Your browser does not support HTML 5 Canvas.
15 |     </canvas>
16 |   </div>
17 |   
18 |     <!-- 
19 |     Since dart VM usually runs after the page is initially rendered, we
20 |     keep our scripts just prior to the end of the body. This helps when
21 |     compiled to javascript for consistancy.
22 |      -->
23 |     <script type="application/dart" src="ch2ex7.dart"></script>
24 |     <!-- for this next line to work, your pubspec.yaml file must have a dependency on 'browser' -->
25 |     <script src="packages/browser/dart.js"></script>
26 |   </body>
27 | </html>
28 | 


--------------------------------------------------------------------------------
/web/ch2/ch2ex8.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | 
 3 | <html lang="en">
 4 |   <head>
 5 |     <meta charset="UTF-8">
 6 |     <title>Ch2Ex8 Rotation Transformation #2</title>
 7 |     <link rel="stylesheet" href="base.css">
 8 |     <!-- We don't include the modernizer because Dart only supports "The modern web" -->
 9 |   </head>
10 |  
11 |   <body>
12 |   <div id="container">
13 |     <canvas id="canvas" width="500" height="500">
14 |       Your browser does not support HTML 5 Canvas.
15 |     </canvas>
16 |   </div>
17 |   
18 |     <!-- 
19 |     Since dart VM usually runs after the page is initially rendered, we
20 |     keep our scripts just prior to the end of the body. This helps when
21 |     compiled to javascript for consistancy.
22 |      -->
23 |     <script type="application/dart" src="ch2ex8.dart"></script>
24 |     <!-- for this next line to work, your pubspec.yaml file must have a dependency on 'browser' -->
25 |     <script src="packages/browser/dart.js"></script>
26 |   </body>
27 | </html>
28 | 


--------------------------------------------------------------------------------
/web/ch2/ch2ex9.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | 
 3 | <html lang="en">
 4 |   <head>
 5 |     <meta charset="UTF-8">
 6 |     <title>Ch2Ex9 Rotation Transformation #3</title>
 7 |     <link rel="stylesheet" href="base.css">
 8 |     <!-- We don't include the modernizer because Dart only supports "The modern web" -->
 9 |   </head>
10 |  
11 |   <body>
12 |   <div id="container">
13 |     <canvas id="canvas" width="500" height="500">
14 |       Your browser does not support HTML 5 Canvas.
15 |     </canvas>
16 |   </div>
17 |   
18 |     <!-- 
19 |     Since dart VM usually runs after the page is initially rendered, we
20 |     keep our scripts just prior to the end of the body. This helps when
21 |     compiled to javascript for consistancy.
22 |      -->
23 |     <script type="application/dart" src="ch2ex9.dart"></script>
24 |     <!-- for this next line to work, your pubspec.yaml file must have a dependency on 'browser' -->
25 |     <script src="packages/browser/dart.js"></script>
26 |   </body>
27 | </html>
28 | 


--------------------------------------------------------------------------------
/web/ch1/ch1ex3.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | 
 3 | <html lang="en">
 4 |   <head>
 5 |     <meta charset="UTF-8">
 6 |     <title>Ch1Ex3: Your First Canvas Application</title>
 7 |     <link rel="stylesheet" href="base.css">
 8 |     <!-- We don't include the modernizer because Dart only supports "The modern web" -->
 9 |   </head>
10 |  
11 |   <body>
12 |   <div id="container">
13 |     <canvas id="canvasOne" width="500" height="300">
14 |       Your browser does not support HTML 5 Canvas.
15 |     </canvas>
16 |   </div>
17 |   
18 |     <!-- 
19 |     Since dart VM usually runs after the page is initially rendered, we
20 |     keep our scripts just prior to the end of the body. This helps when
21 |     compiled to javascript for consistancy.
22 |      -->
23 |     <script type="application/dart" src="ch1ex3.dart"></script>
24 |     <!-- for this next line to work, your pubspec.yaml file must have a dependency on 'browser' -->
25 |     <script src="packages/browser/dart.js"></script>
26 |   </body>
27 | </html>
28 | 


--------------------------------------------------------------------------------
/web/ch2/ch2ex13.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | 
 3 | <html lang="en">
 4 |   <head>
 5 |     <meta charset="UTF-8">
 6 |     <title>Ch2Ex13 Combined scale and rotation #2</title>
 7 |     <link rel="stylesheet" href="base.css">
 8 |     <!-- We don't include the modernizer because Dart only supports "The modern web" -->
 9 |   </head>
10 |  
11 |   <body>
12 |   <div id="container">
13 |     <canvas id="canvas" width="500" height="500">
14 |       Your browser does not support HTML 5 Canvas.
15 |     </canvas>
16 |   </div>
17 |   
18 |     <!-- 
19 |     Since dart VM usually runs after the page is initially rendered, we
20 |     keep our scripts just prior to the end of the body. This helps when
21 |     compiled to javascript for consistancy.
22 |      -->
23 |     <script type="application/dart" src="ch2ex13.dart"></script>
24 |     <!-- for this next line to work, your pubspec.yaml file must have a dependency on 'browser' -->
25 |     <script src="packages/browser/dart.js"></script>
26 |   </body>
27 | </html>
28 | 


--------------------------------------------------------------------------------
/web/ch2/ch2ex23.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | 
 3 | <html lang="en">
 4 |   <head>
 5 |     <meta charset="UTF-8">
 6 |     <title>Ch2Ex23 Simple radial Gradients #3 - Arc</title>
 7 |     <link rel="stylesheet" href="base.css">
 8 |     <!-- We don't include the modernizer because Dart only supports "The modern web" -->
 9 |   </head>
10 |  
11 |   <body>
12 |   <div id="container">
13 |     <canvas id="canvas" width="500" height="500">
14 |       Your browser does not support HTML 5 Canvas.
15 |     </canvas>
16 |   </div>
17 |   
18 |     <!-- 
19 |     Since dart VM usually runs after the page is initially rendered, we
20 |     keep our scripts just prior to the end of the body. This helps when
21 |     compiled to javascript for consistancy.
22 |      -->
23 |     <script type="application/dart" src="ch2ex23.dart"></script>
24 |     <!-- for this next line to work, your pubspec.yaml file must have a dependency on 'browser' -->
25 |     <script src="packages/browser/dart.js"></script>
26 |   </body>
27 | </html>
28 | 


--------------------------------------------------------------------------------
/web/ch2/ch2ex10.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | 
 3 | <html lang="en">
 4 |   <head>
 5 |     <meta charset="UTF-8">
 6 |     <title>Ch2Ex10 Rotation Transformation Multi Example</title>
 7 |     <link rel="stylesheet" href="base.css">
 8 |     <!-- We don't include the modernizer because Dart only supports "The modern web" -->
 9 |   </head>
10 |  
11 |   <body>
12 |   <div id="container">
13 |     <canvas id="canvas" width="500" height="500">
14 |       Your browser does not support HTML 5 Canvas.
15 |     </canvas>
16 |   </div>
17 |   
18 |     <!-- 
19 |     Since dart VM usually runs after the page is initially rendered, we
20 |     keep our scripts just prior to the end of the body. This helps when
21 |     compiled to javascript for consistancy.
22 |      -->
23 |     <script type="application/dart" src="ch2ex10.dart"></script>
24 |     <!-- for this next line to work, your pubspec.yaml file must have a dependency on 'browser' -->
25 |     <script src="packages/browser/dart.js"></script>
26 |   </body>
27 | </html>
28 | 


--------------------------------------------------------------------------------
/web/ch2/ch2ex17.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | 
 3 | <html lang="en">
 4 |   <head>
 5 |     <meta charset="UTF-8">
 6 |     <title>Ch2Ex17 Simple Linear Gradients #4 complex shape</title>
 7 |     <link rel="stylesheet" href="base.css">
 8 |     <!-- We don't include the modernizer because Dart only supports "The modern web" -->
 9 |   </head>
10 |  
11 |   <body>
12 |   <div id="container">
13 |     <canvas id="canvas" width="500" height="500">
14 |       Your browser does not support HTML 5 Canvas.
15 |     </canvas>
16 |   </div>
17 |   
18 |     <!-- 
19 |     Since dart VM usually runs after the page is initially rendered, we
20 |     keep our scripts just prior to the end of the body. This helps when
21 |     compiled to javascript for consistancy.
22 |      -->
23 |     <script type="application/dart" src="ch2ex17.dart"></script>
24 |     <!-- for this next line to work, your pubspec.yaml file must have a dependency on 'browser' -->
25 |     <script src="packages/browser/dart.js"></script>
26 |   </body>
27 | </html>
28 | 


--------------------------------------------------------------------------------
/web/ch2/ch2ex24.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | 
 3 | <html lang="en">
 4 |   <head>
 5 |     <meta charset="UTF-8">
 6 |     <title>ChEx24 Simple radial Gradients #4 - Arc stroke</title>
 7 |     <link rel="stylesheet" href="base.css">
 8 |     <!-- We don't include the modernizer because Dart only supports "The modern web" -->
 9 |   </head>
10 |  
11 |   <body>
12 |   <div id="container">
13 |     <canvas id="canvas" width="500" height="500">
14 |       Your browser does not support HTML 5 Canvas.
15 |     </canvas>
16 |   </div>
17 |   
18 |     <!-- 
19 |     Since dart VM usually runs after the page is initially rendered, we
20 |     keep our scripts just prior to the end of the body. This helps when
21 |     compiled to javascript for consistancy.
22 |      -->
23 |     <script type="application/dart" src="ch2ex24.dart"></script>
24 |     <!-- for this next line to work, your pubspec.yaml file must have a dependency on 'browser' -->
25 |     <script src="packages/browser/dart.js"></script>
26 |   </body>
27 | </html>
28 | 


--------------------------------------------------------------------------------
/web/ch2/ch2ex16.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | 
 3 | <html lang="en">
 4 |   <head>
 5 |     <meta charset="UTF-8">
 6 |     <title>Ch2Ex16 Simple Linear Gradients #3 Horizontal stroke rects</title>
 7 |     <link rel="stylesheet" href="base.css">
 8 |     <!-- We don't include the modernizer because Dart only supports "The modern web" -->
 9 |   </head>
10 |  
11 |   <body>
12 |   <div id="container">
13 |     <canvas id="canvas" width="500" height="500">
14 |       Your browser does not support HTML 5 Canvas.
15 |     </canvas>
16 |   </div>
17 |   
18 |     <!-- 
19 |     Since dart VM usually runs after the page is initially rendered, we
20 |     keep our scripts just prior to the end of the body. This helps when
21 |     compiled to javascript for consistancy.
22 |      -->
23 |     <script type="application/dart" src="ch2ex16.dart"></script>
24 |     <!-- for this next line to work, your pubspec.yaml file must have a dependency on 'browser' -->
25 |     <script src="packages/browser/dart.js"></script>
26 |   </body>
27 | </html>
28 | 


--------------------------------------------------------------------------------
/web/ch2/ch2ex18.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | 
 3 | <html lang="en">
 4 |   <head>
 5 |     <meta charset="UTF-8">
 6 |     <title>Ch2Ex18 Simple Linear Gradients #5 Vertical complex shape</title>
 7 |     <link rel="stylesheet" href="base.css">
 8 |     <!-- We don't include the modernizer because Dart only supports "The modern web" -->
 9 |   </head>
10 |  
11 |   <body>
12 |   <div id="container">
13 |     <canvas id="canvas" width="500" height="500">
14 |       Your browser does not support HTML 5 Canvas.
15 |     </canvas>
16 |   </div>
17 |   
18 |     <!-- 
19 |     Since dart VM usually runs after the page is initially rendered, we
20 |     keep our scripts just prior to the end of the body. This helps when
21 |     compiled to javascript for consistancy.
22 |      -->
23 |     <script type="application/dart" src="ch2ex18.dart"></script>
24 |     <!-- for this next line to work, your pubspec.yaml file must have a dependency on 'browser' -->
25 |     <script src="packages/browser/dart.js"></script>
26 |   </body>
27 | </html>
28 | 


--------------------------------------------------------------------------------
/web/ch2/ch2ex19.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | 
 3 | <html lang="en">
 4 |   <head>
 5 |     <meta charset="UTF-8">
 6 |     <title>Ch2Ex19 Simple Linear Gradients #6 Vertical stroke shape</title>
 7 |     <link rel="stylesheet" href="base.css">
 8 |     <!-- We don't include the modernizer because Dart only supports "The modern web" -->
 9 |   </head>
10 |  
11 |   <body>
12 |   <div id="container">
13 |     <canvas id="canvas" width="500" height="500">
14 |       Your browser does not support HTML 5 Canvas.
15 |     </canvas>
16 |   </div>
17 |   
18 |     <!-- 
19 |     Since dart VM usually runs after the page is initially rendered, we
20 |     keep our scripts just prior to the end of the body. This helps when
21 |     compiled to javascript for consistancy.
22 |      -->
23 |     <script type="application/dart" src="ch2ex19.dart"></script>
24 |     <!-- for this next line to work, your pubspec.yaml file must have a dependency on 'browser' -->
25 |     <script src="packages/browser/dart.js"></script>
26 |   </body>
27 | </html>
28 | 


--------------------------------------------------------------------------------
/web/ch1/ch1ex4.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | 
 3 | <html lang="en">
 4 |   <head>
 5 |     <meta charset="UTF-8">
 6 |     <title>CH1Ex4: Guesss The Letter Game</title>
 7 |     <link rel="stylesheet" href="base.css">
 8 |     <!-- We don't include the modernizer because Dart only supports "The modern web" -->
 9 |   </head>
10 |  
11 |   <body>
12 |   <div id="container">
13 |     <canvas id="canvasOne" width="500" height="300">
14 |       Your browser does not support HTML 5 Canvas.
15 |     </canvas>
16 |     <form>
17 |       <input type="button" id="createImageData" value="Export Canvas Image">
18 |     </form>
19 |   </div>
20 |   
21 |     <!-- 
22 |     Since dart VM usually runs after the page is initially rendered, we
23 |     keep our scripts just prior to the end of the body. This helps when
24 |     compiled to javascript for consistancy.
25 |      -->
26 |     <script type="application/dart" src="ch1ex4.dart"></script>
27 |     <!-- for this next line to work, your pubspec.yaml file must have a dependency on 'browser' -->
28 |     <script src="packages/browser/dart.js"></script>
29 |   </body>
30 | </html>
31 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2013 Matthew Butler
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy of
 6 | this software and associated documentation files (the "Software"), to deal in
 7 | the Software without restriction, including without limitation the rights to
 8 | use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
 9 | the Software, and to permit persons to whom the Software is furnished to do so,
10 | subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
17 | FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
18 | COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
19 | IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
20 | CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
21 | 


--------------------------------------------------------------------------------
/web/ch1/ch1ex6.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | 
 3 | <html lang="en">
 4 |   <head>
 5 |     <meta charset="UTF-8">
 6 |     <title>Chapter 1 Example 6 Canvas Sub Dom Example</title>
 7 |     <link rel="stylesheet" href="base.css">
 8 |     <!-- We don't include the modernizer because Dart only supports "The modern web" -->
 9 |   </head>
10 |  
11 |   <body>
12 |   <div id="container">
13 |     <canvas id="canvasOne" width="500" height="300">
14 |       <div>A yellow background with an image and text on top
15 |         <ol>
16 |           <li>The text says "Hello World"</li>
17 |           <li>The image is of planet earth</li>
18 |         </ol>
19 |       </div>
20 |     </canvas>
21 |   </div>
22 |   
23 |     <!-- 
24 |     Since dart VM usually runs after the page is initially rendered, we
25 |     keep our scripts just prior to the end of the body. This helps when
26 |     compiled to javascript for consistancy.
27 |      -->
28 |     <script type="application/dart" src="ch1ex6.dart"></script>
29 |     <!-- for this next line to work, your pubspec.yaml file must have a dependency on 'browser' -->
30 |     <script src="packages/browser/dart.js"></script>
31 |   </body>
32 | </html>
33 | 


--------------------------------------------------------------------------------
/web/ch2/ch2ex7.dart:
--------------------------------------------------------------------------------
 1 | library ch2.ex7;
 2 | 
 3 | import 'dart:html';
 4 | import 'dart:math' as math;
 5 | 
 6 | // The dart print() command will automatically print to the console
 7 | // and shouldn't throw an exception so no need to worry about creating
 8 | // our own debugger. For more complicated logging the logger package exists.
 9 | 
10 | // Since dart supports class inheritance and library namespaces
11 | // we don't need to keep our methods/properties in a local scope.
12 | class CanvasApp {
13 |   CanvasElement theCanvas;
14 |   CanvasRenderingContext2D context;
15 |   
16 |   CanvasApp() {
17 |     // Initialize the canvas and context
18 |     theCanvas = document.querySelector('#canvas');
19 |     context = theCanvas.getContext('2d');
20 |   }
21 |   
22 |   void drawScreen() {
23 |     // Content goes here.
24 |     
25 |     // Draw a red square and rotate it
26 |     var angleInRadians = 45 * (math.PI / 180);
27 |     context..setTransform(1, 0, 0, 1, 0, 0) // Required before rotating
28 |       ..rotate(angleInRadians)  // Rotate before drawing
29 |       ..fillStyle = 'red'
30 |       ..fillRect(100, 100, 50, 50);
31 |         
32 |   }
33 | }
34 | 
35 | void main() {
36 |   var canvasApp = new CanvasApp();
37 |   canvasApp.drawScreen();
38 | }


--------------------------------------------------------------------------------
/web/ch2/ch2ex1.dart:
--------------------------------------------------------------------------------
 1 | library ch2.ex1;
 2 | 
 3 | import 'dart:html';
 4 | 
 5 | // The dart print() command will automatically print to the console
 6 | // and shouldn't throw an exception so no need to worry about creating
 7 | // our own debugger. For more complicated logging the logger package exists.
 8 | 
 9 | // Since dart supports class inheritance and library namespaces
10 | // we don't need to keep our methods/properties in a local scope.
11 | class CanvasApp {
12 |   CanvasElement theCanvas;
13 |   CanvasRenderingContext2D context;
14 |   
15 |   CanvasApp() {
16 |     // Initialize the canvas and context
17 |     theCanvas = document.querySelector('#canvas');
18 |     context = theCanvas.getContext('2d');
19 |   }
20 |   
21 |   void drawScreen() {
22 |     // Content goes here.
23 |     
24 |     context..fillStyle = '#000000' // black filled rectangle
25 |         ..strokeStyle = '#ff00ff' // Magenta stroke rectangle 
26 |         ..lineWidth = 2 // Stroke line width is 2
27 |         ..fillRect(10, 10, 40, 40) // fill black rectangle
28 |         ..strokeRect(0, 0, 60, 60) // Stroke Magenta rectangle
29 |         ..clearRect(20, 20, 20, 20); // Clear small rectangle
30 |     
31 |   }
32 | }
33 | 
34 | void main() {
35 |   var canvasApp = new CanvasApp();
36 |   canvasApp.drawScreen();
37 | }


--------------------------------------------------------------------------------
/web/ch2/ch2ex2.dart:
--------------------------------------------------------------------------------
 1 | library ch2.ex2;
 2 | 
 3 | import 'dart:html';
 4 | 
 5 | // The dart print() command will automatically print to the console
 6 | // and shouldn't throw an exception so no need to worry about creating
 7 | // our own debugger. For more complicated logging the logger package exists.
 8 | 
 9 | // Since dart supports class inheritance and library namespaces
10 | // we don't need to keep our methods/properties in a local scope.
11 | class CanvasApp {
12 |   CanvasElement theCanvas;
13 |   CanvasRenderingContext2D context;
14 |   
15 |   CanvasApp() {
16 |     // Initialize the canvas and context
17 |     theCanvas = document.querySelector('#canvas');
18 |     context = theCanvas.getContext('2d');
19 |   }
20 |   
21 |   void drawScreen() {
22 |     // Content goes here.
23 |     
24 |     context..strokeStyle = 'black' // Stroke black line (#000000)
25 |         ..lineWidth = 10 // Stroke width is 10px
26 |         ..lineCap = 'square' // Line ends are squared (vs butt and round)
27 |         ..beginPath() // Start a path
28 |         ..moveTo(20, 0) // move pen to 20, 0
29 |         ..lineTo(100, 0) // draw a line from (20, 0) to (100, 0)
30 |         ..stroke() // paint the line
31 |         ..closePath(); // terminate the path.
32 |     
33 |   }
34 | }
35 | 
36 | void main() {
37 |   var canvasApp = new CanvasApp();
38 |   canvasApp.drawScreen();
39 | }


--------------------------------------------------------------------------------
/web/ch2/ch2ex14.dart:
--------------------------------------------------------------------------------
 1 | library ch2.ex14;
 2 | 
 3 | import 'dart:html';
 4 | 
 5 | // The dart print() command will automatically print to the console
 6 | // and shouldn't throw an exception so no need to worry about creating
 7 | // our own debugger. For more complicated logging the logger package exists.
 8 | 
 9 | // Since dart supports class inheritance and library namespaces
10 | // we don't need to keep our methods/properties in a local scope.
11 | class CanvasApp {
12 |   CanvasElement theCanvas;
13 |   CanvasRenderingContext2D context;
14 |   
15 |   CanvasApp() {
16 |     // Initialize the canvas and context
17 |     theCanvas = document.querySelector('#canvas');
18 |     context = theCanvas.getContext('2d');
19 |   }
20 |   
21 |   void drawScreen() {
22 |     // Content goes here.
23 |     
24 |     // Create a gradient that starts at 0,0 and extends along the x axis
25 |     var gr = context.createLinearGradient(0, 0, 100, 0);
26 |     
27 |     // Add the color stops.
28 |     gr..addColorStop(0, 'rgb(255, 0, 0)')
29 |         ..addColorStop(0.5, 'rgb(0, 255, 0)')
30 |         ..addColorStop(1, 'rgb(255, 0, 0)');
31 |     
32 |     // Use the gradient for the fillStyle
33 |     context..fillStyle = gr
34 |         ..fillRect(0, 0, 100, 100);
35 |         
36 |   }
37 | }
38 | 
39 | void main() {
40 |   var canvasApp = new CanvasApp();
41 |   canvasApp.drawScreen();
42 | }


--------------------------------------------------------------------------------
/web/ch2/ch2ex8.dart:
--------------------------------------------------------------------------------
 1 | library ch2.ex8;
 2 | 
 3 | import 'dart:html';
 4 | import 'dart:math' as math;
 5 | 
 6 | // The dart print() command will automatically print to the console
 7 | // and shouldn't throw an exception so no need to worry about creating
 8 | // our own debugger. For more complicated logging the logger package exists.
 9 | 
10 | // Since dart supports class inheritance and library namespaces
11 | // we don't need to keep our methods/properties in a local scope.
12 | class CanvasApp {
13 |   CanvasElement theCanvas;
14 |   CanvasRenderingContext2D context;
15 |   
16 |   CanvasApp() {
17 |     // Initialize the canvas and context
18 |     theCanvas = document.querySelector('#canvas');
19 |     context = theCanvas.getContext('2d');
20 |   }
21 |   
22 |   void drawScreen() {
23 |     // Content goes here.
24 |     
25 |     // Draw a small black square
26 |     context..fillStyle = 'black'
27 |         ..fillRect(20, 20, 25, 25);
28 |     
29 |     // Draw a red square and rotate it
30 |     var angleInRadians = 45 * (math.PI / 180);
31 |     context..setTransform(1, 0, 0, 1, 0, 0) // Required before rotating
32 |       ..rotate(angleInRadians)  // Rotate before drawing
33 |       ..fillStyle = 'red'
34 |       ..fillRect(100, 100, 50, 50);
35 |         
36 |   }
37 | }
38 | 
39 | void main() {
40 |   var canvasApp = new CanvasApp();
41 |   canvasApp.drawScreen();
42 | }


--------------------------------------------------------------------------------
/web/ch3/ch3ex1.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | 
 3 | <html lang="en">
 4 |   <head>
 5 |     <meta charset="UTF-8">
 6 |     <title>CH3EX1: Text Arranger Version 1.0</title>
 7 |     <link rel="stylesheet" href="base.css">
 8 |     <!-- We don't include the modernizer because Dart only supports "The modern web" -->
 9 |   </head>
10 |  
11 |   <body>
12 |   <div id="container">
13 |     <canvas id="canvas" width="500" height="300">
14 |       Your browser does not support HTML 5 Canvas.
15 |     </canvas>
16 |     
17 |     <form>
18 |       Text: <input id="textBox" placeholder="your text" />
19 |       <br>
20 |       
21 |       Fill or Stroke:
22 |       <select id="fillOrStroke">
23 |         <option value="fill">fill</option>
24 |         <option value="stroke">stroke</option>
25 |         <option value="both">both</option>
26 |       </select>
27 |       <br>
28 |     </form>
29 |     
30 |   </div>
31 |   
32 |     <!-- 
33 |     Since dart VM usually runs after the page is initially rendered, we
34 |     keep our scripts just prior to the end of the body. This helps when
35 |     compiled to javascript for consistancy.
36 |      -->
37 |     <script type="application/dart" src="ch3ex1.dart"></script>
38 |     <!-- for this next line to work, your pubspec.yaml file must have a dependency on 'browser' -->
39 |     <script src="packages/browser/dart.js"></script>
40 |   </body>
41 | </html>
42 | 


--------------------------------------------------------------------------------
/web/ch2/ch2ex11.dart:
--------------------------------------------------------------------------------
 1 | library ch2.ex11;
 2 | 
 3 | import 'dart:html';
 4 | 
 5 | // The dart print() command will automatically print to the console
 6 | // and shouldn't throw an exception so no need to worry about creating
 7 | // our own debugger. For more complicated logging the logger package exists.
 8 | 
 9 | // Since dart supports class inheritance and library namespaces
10 | // we don't need to keep our methods/properties in a local scope.
11 | class CanvasApp {
12 |   CanvasElement theCanvas;
13 |   CanvasRenderingContext2D context;
14 |   
15 |   CanvasApp() {
16 |     // Initialize the canvas and context
17 |     theCanvas = document.querySelector('#canvas');
18 |     context = theCanvas.getContext('2d');
19 |   }
20 |   
21 |   void drawScreen() {
22 |     // Content goes here.
23 |     
24 |     // Draw a red square and rotate it
25 |     var x = 100;
26 |     var y = 100;
27 |     var height = 50;
28 |     var width = 50;
29 |     
30 |     context..setTransform(1, 0, 0, 1, 0, 0) // Required before rotating
31 |       ..translate(x + (width/2), y + (height/2)) // Change our origin point.
32 |       // Try commenting out the following line and running again.
33 |       ..scale(2, 2)  // Scale before drawing
34 |       ..fillStyle = 'red'
35 |       ..fillRect(-width/2, -height/2, width, height);
36 |     
37 |   }
38 | }
39 | 
40 | void main() {
41 |   var canvasApp = new CanvasApp();
42 |   canvasApp.drawScreen();
43 | }


--------------------------------------------------------------------------------
/web/ch2/ch2ex21.dart:
--------------------------------------------------------------------------------
 1 | library ch2.ex21;
 2 | 
 3 | import 'dart:html';
 4 | 
 5 | // The dart print() command will automatically print to the console
 6 | // and shouldn't throw an exception so no need to worry about creating
 7 | // our own debugger. For more complicated logging the logger package exists.
 8 | 
 9 | // Since dart supports class inheritance and library namespaces
10 | // we don't need to keep our methods/properties in a local scope.
11 | class CanvasApp {
12 |   CanvasElement theCanvas;
13 |   CanvasRenderingContext2D context;
14 |   
15 |   CanvasApp() {
16 |     // Initialize the canvas and context
17 |     theCanvas = document.querySelector('#canvas');
18 |     context = theCanvas.getContext('2d');
19 |   }
20 |   
21 |   void drawScreen() {
22 |     // Content goes here.
23 |     
24 |     // Create a gradient that starts at 50,50 with a radius of 25
25 |     // and extends to second circle at same point with a radius of 100
26 |     var gr = context.createRadialGradient(50, 50, 25, 50, 50, 100);
27 |     
28 |     // Add the color stops.
29 |     gr..addColorStop(0, 'rgb(255, 0, 0)')
30 |         ..addColorStop(0.5, 'rgb(0, 255, 0)')
31 |         ..addColorStop(1, 'rgb(255, 0, 0)');
32 |     
33 |     // Use the gradient for the strokeStyle
34 |     context..fillStyle = gr
35 |         ..fillRect(0, 0, 200, 200);
36 |         
37 |   }
38 | }
39 | 
40 | void main() {
41 |   var canvasApp = new CanvasApp();
42 |   canvasApp.drawScreen();
43 | }


--------------------------------------------------------------------------------
/web/ch2/ch2ex22.dart:
--------------------------------------------------------------------------------
 1 | library ch2.ex22;
 2 | 
 3 | import 'dart:html';
 4 | 
 5 | // The dart print() command will automatically print to the console
 6 | // and shouldn't throw an exception so no need to worry about creating
 7 | // our own debugger. For more complicated logging the logger package exists.
 8 | 
 9 | // Since dart supports class inheritance and library namespaces
10 | // we don't need to keep our methods/properties in a local scope.
11 | class CanvasApp {
12 |   CanvasElement theCanvas;
13 |   CanvasRenderingContext2D context;
14 |   
15 |   CanvasApp() {
16 |     // Initialize the canvas and context
17 |     theCanvas = document.querySelector('#canvas');
18 |     context = theCanvas.getContext('2d');
19 |   }
20 |   
21 |   void drawScreen() {
22 |     // Content goes here.
23 |     
24 |     // Create a gradient that starts at 50,50 with a radius of 25
25 |     // and extends to second circle at 100,100 with radius of 100
26 |     var gr = context.createRadialGradient(50, 50, 25, 100, 100, 100);
27 |     
28 |     // Add the color stops.
29 |     gr..addColorStop(0, 'rgb(255, 0, 0)')
30 |         ..addColorStop(0.5, 'rgb(0, 255, 0)')
31 |         ..addColorStop(1, 'rgb(255, 0, 0)');
32 |     
33 |     // Use the gradient for the strokeStyle
34 |     context..fillStyle = gr
35 |         ..fillRect(0, 0, 200, 200);
36 |         
37 |   }
38 | }
39 | 
40 | void main() {
41 |   var canvasApp = new CanvasApp();
42 |   canvasApp.drawScreen();
43 | }


--------------------------------------------------------------------------------
/web/ch2/ch2ex15.dart:
--------------------------------------------------------------------------------
 1 | library ch2.ex15;
 2 | 
 3 | import 'dart:html';
 4 | 
 5 | // The dart print() command will automatically print to the console
 6 | // and shouldn't throw an exception so no need to worry about creating
 7 | // our own debugger. For more complicated logging the logger package exists.
 8 | 
 9 | // Since dart supports class inheritance and library namespaces
10 | // we don't need to keep our methods/properties in a local scope.
11 | class CanvasApp {
12 |   CanvasElement theCanvas;
13 |   CanvasRenderingContext2D context;
14 |   
15 |   CanvasApp() {
16 |     // Initialize the canvas and context
17 |     theCanvas = document.querySelector('#canvas');
18 |     context = theCanvas.getContext('2d');
19 |   }
20 |   
21 |   void drawScreen() {
22 |     // Content goes here.
23 |     
24 |     // Create a gradient that starts at 0,0 and extends along the x axis
25 |     var gr = context.createLinearGradient(0, 0, 100, 0);
26 |     
27 |     // Add the color stops.
28 |     gr..addColorStop(0, 'rgb(255, 0, 0)')
29 |         ..addColorStop(0.5, 'rgb(0, 255, 0)')
30 |         ..addColorStop(1, 'rgb(255, 0, 0)');
31 |     
32 |     // Use the gradient for the fillStyle
33 |     context..fillStyle = gr
34 |         ..fillRect(0, 0, 100, 100)
35 |         ..fillRect(0, 100, 50, 100)
36 |         ..fillRect(0, 200, 200, 100);
37 |         
38 |   }
39 | }
40 | 
41 | void main() {
42 |   var canvasApp = new CanvasApp();
43 |   canvasApp.drawScreen();
44 | }


--------------------------------------------------------------------------------
/web/ch2/ch2ex16.dart:
--------------------------------------------------------------------------------
 1 | library ch2.ex16;
 2 | 
 3 | import 'dart:html';
 4 | 
 5 | // The dart print() command will automatically print to the console
 6 | // and shouldn't throw an exception so no need to worry about creating
 7 | // our own debugger. For more complicated logging the logger package exists.
 8 | 
 9 | // Since dart supports class inheritance and library namespaces
10 | // we don't need to keep our methods/properties in a local scope.
11 | class CanvasApp {
12 |   CanvasElement theCanvas;
13 |   CanvasRenderingContext2D context;
14 |   
15 |   CanvasApp() {
16 |     // Initialize the canvas and context
17 |     theCanvas = document.querySelector('#canvas');
18 |     context = theCanvas.getContext('2d');
19 |   }
20 |   
21 |   void drawScreen() {
22 |     // Content goes here.
23 |     
24 |     // Create a gradient that starts at 0,0 and extends along the x axis
25 |     var gr = context.createLinearGradient(0, 0, 100, 0);
26 |     
27 |     // Add the color stops.
28 |     gr..addColorStop(0, 'rgb(255, 0, 0)')
29 |         ..addColorStop(0.5, 'rgb(0, 255, 0)')
30 |         ..addColorStop(1, 'rgb(255, 0, 0)');
31 |     
32 |     // Use the gradient for the strokeStyle
33 |     context..strokeStyle = gr
34 |         ..strokeRect(0, 0, 100, 100)
35 |         ..strokeRect(0, 100, 50, 100)
36 |         ..strokeRect(0, 200, 200, 100);
37 |         
38 |   }
39 | }
40 | 
41 | void main() {
42 |   var canvasApp = new CanvasApp();
43 |   canvasApp.drawScreen();
44 | }


--------------------------------------------------------------------------------
/web/ch2/ch2ex12.dart:
--------------------------------------------------------------------------------
 1 | library ch2.ex12;
 2 | 
 3 | import 'dart:html';
 4 | import 'dart:math' as math;
 5 | 
 6 | // The dart print() command will automatically print to the console
 7 | // and shouldn't throw an exception so no need to worry about creating
 8 | // our own debugger. For more complicated logging the logger package exists.
 9 | 
10 | // Since dart supports class inheritance and library namespaces
11 | // we don't need to keep our methods/properties in a local scope.
12 | class CanvasApp {
13 |   CanvasElement theCanvas;
14 |   CanvasRenderingContext2D context;
15 |   
16 |   CanvasApp() {
17 |     // Initialize the canvas and context
18 |     theCanvas = document.querySelector('#canvas');
19 |     context = theCanvas.getContext('2d');
20 |   }
21 |   
22 |   void drawScreen() {
23 |     // Content goes here.
24 |     
25 |     // Draw a red square and rotate it
26 |     var angleInRadians = 45 * (math.PI / 180);
27 |     var x = 100;
28 |     var y = 100;
29 |     var height = 50;
30 |     var width = 50;
31 |     
32 |     context..setTransform(1, 0, 0, 1, 0, 0) // Required before rotating
33 |       ..translate(x + (width/2), y + (height/2)) // Change our origin point.
34 |       ..scale(2, 2) // Scale the canvas by factor of 2 on x and y axis
35 |       ..rotate(angleInRadians)  // Rotate before drawing
36 |       ..fillStyle = 'red'
37 |       ..fillRect(-width/2, -height/2, width, height);
38 |     
39 |   }
40 | }
41 | 
42 | void main() {
43 |   var canvasApp = new CanvasApp();
44 |   canvasApp.drawScreen();
45 | }


--------------------------------------------------------------------------------
/web/ch2/ch2ex25.dart:
--------------------------------------------------------------------------------
 1 | library ch2.ex25;
 2 | 
 3 | import 'dart:html';
 4 | 
 5 | // The dart print() command will automatically print to the console
 6 | // and shouldn't throw an exception so no need to worry about creating
 7 | // our own debugger. For more complicated logging the logger package exists.
 8 | 
 9 | // Since dart supports class inheritance and library namespaces
10 | // we don't need to keep our methods/properties in a local scope.
11 | class CanvasApp {
12 |   CanvasElement theCanvas;
13 |   CanvasRenderingContext2D context;
14 |   
15 |   CanvasApp() {
16 |     // Initialize the canvas and context
17 |     theCanvas = document.querySelector('#canvas');
18 |     context = theCanvas.getContext('2d');
19 |   }
20 |   
21 |   void drawScreen() {
22 |     // Content goes here.
23 |     
24 |     var fillImg = new ImageElement(src: 'fill_20x20.gif');
25 |     fillImg.onLoad.listen((_) {
26 |       // Note Dart has 2 separate createPattern methods.
27 |       // The first, createPattern(canvas, repetitionType) expects to receive
28 |       // a canvas element to use for generating the pattern. To create a
29 |       // pattern with an image file we need the explicit: 
30 |       // createPatternFromImage(image, repetitionType) method.
31 |       var fillPattern = context.createPatternFromImage(fillImg, 'repeat');
32 |       context.fillStyle = fillPattern;
33 |       context.fillRect(0, 0, 200, 200);
34 |     });
35 |     
36 |   }
37 | }
38 | 
39 | void main() {
40 |   var canvasApp = new CanvasApp();
41 |   canvasApp.drawScreen();
42 | }


--------------------------------------------------------------------------------
/web/ch2/ch2ex9.dart:
--------------------------------------------------------------------------------
 1 | library ch2.ex9;
 2 | 
 3 | import 'dart:html';
 4 | import 'dart:math' as math;
 5 | 
 6 | // The dart print() command will automatically print to the console
 7 | // and shouldn't throw an exception so no need to worry about creating
 8 | // our own debugger. For more complicated logging the logger package exists.
 9 | 
10 | // Since dart supports class inheritance and library namespaces
11 | // we don't need to keep our methods/properties in a local scope.
12 | class CanvasApp {
13 |   CanvasElement theCanvas;
14 |   CanvasRenderingContext2D context;
15 |   
16 |   CanvasApp() {
17 |     // Initialize the canvas and context
18 |     theCanvas = document.querySelector('#canvas');
19 |     context = theCanvas.getContext('2d');
20 |   }
21 |   
22 |   void drawScreen() {
23 |     // Content goes here.
24 |     
25 |     // Draw a small black square
26 |     context..fillStyle = 'black'
27 |         ..fillRect(20, 20, 25, 25);
28 |     
29 |     // Draw a red square and rotate it
30 |     var angleInRadians = 45 * (math.PI / 180);
31 |     var x = 100;
32 |     var y = 100;
33 |     var height = 50;
34 |     var width = 50;
35 |     
36 |     context..setTransform(1, 0, 0, 1, 0, 0) // Required before rotating
37 |       ..translate(x + (width/2), y + (height/2)) // Change our origin point.
38 |       ..rotate(angleInRadians)  // Rotate before drawing
39 |       ..fillStyle = 'red'
40 |       ..fillRect(-width/2, -height/2, width, height);
41 |         
42 |   }
43 | }
44 | 
45 | void main() {
46 |   var canvasApp = new CanvasApp();
47 |   canvasApp.drawScreen();
48 | }


--------------------------------------------------------------------------------
/web/ch2/ch2ex13.dart:
--------------------------------------------------------------------------------
 1 | library ch2.ex13;
 2 | 
 3 | import 'dart:html';
 4 | import 'dart:math' as math;
 5 | 
 6 | // The dart print() command will automatically print to the console
 7 | // and shouldn't throw an exception so no need to worry about creating
 8 | // our own debugger. For more complicated logging the logger package exists.
 9 | 
10 | // Since dart supports class inheritance and library namespaces
11 | // we don't need to keep our methods/properties in a local scope.
12 | class CanvasApp {
13 |   CanvasElement theCanvas;
14 |   CanvasRenderingContext2D context;
15 |   
16 |   CanvasApp() {
17 |     // Initialize the canvas and context
18 |     theCanvas = document.querySelector('#canvas');
19 |     context = theCanvas.getContext('2d');
20 |   }
21 |   
22 |   void drawScreen() {
23 |     // Content goes here.
24 |     
25 |     // Draw a red square and rotate it
26 |     var angleInRadians = 90 * (math.PI / 180); // rotate 90 degrees
27 |     var x = 100;
28 |     var y = 100;
29 |     var height = 100; // Values for twice as high as it is wide
30 |     var width = 50;
31 |     
32 |     context..setTransform(1, 0, 0, 1, 0, 0) // Required before rotating
33 |       ..translate(x + (width/2), y + (height/2)) // Change our origin point.
34 |       ..rotate(angleInRadians)  // Rotate before drawing
35 |       ..scale(2, 2) // Scale the canvas by factor of 2 on x and y axis
36 |       ..fillStyle = 'red'
37 |       ..fillRect(-width/2, -height/2, width, height);
38 |     
39 |   }
40 | }
41 | 
42 | void main() {
43 |   var canvasApp = new CanvasApp();
44 |   canvasApp.drawScreen();
45 | }


--------------------------------------------------------------------------------
/web/ch2/ch2ex19.dart:
--------------------------------------------------------------------------------
 1 | library ch2.ex19;
 2 | 
 3 | import 'dart:html';
 4 | 
 5 | // The dart print() command will automatically print to the console
 6 | // and shouldn't throw an exception so no need to worry about creating
 7 | // our own debugger. For more complicated logging the logger package exists.
 8 | 
 9 | // Since dart supports class inheritance and library namespaces
10 | // we don't need to keep our methods/properties in a local scope.
11 | class CanvasApp {
12 |   CanvasElement theCanvas;
13 |   CanvasRenderingContext2D context;
14 |   
15 |   CanvasApp() {
16 |     // Initialize the canvas and context
17 |     theCanvas = document.querySelector('#canvas');
18 |     context = theCanvas.getContext('2d');
19 |   }
20 |   
21 |   void drawScreen() {
22 |     // Content goes here.
23 |     
24 |     // Create a gradient that starts at 0,0 and extends along the x axis
25 |     var gr = context.createLinearGradient(0, 0, 0, 100);
26 |     
27 |     // Add the color stops.
28 |     gr..addColorStop(0, 'rgb(255, 0, 0)')
29 |         ..addColorStop(0.5, 'rgb(0, 255, 0)')
30 |         ..addColorStop(1, 'rgb(255, 0, 0)');
31 |     
32 |     // Use the gradient for the strokeStyle
33 |     context..strokeStyle = gr
34 |         ..beginPath()
35 |         ..moveTo(0, 0)
36 |         ..lineTo(50, 0)
37 |         ..lineTo(100, 50)
38 |         ..lineTo(50, 100)
39 |         ..lineTo(0, 100)
40 |         ..lineTo(0, 0)
41 |         ..stroke() // Stroke to add the border
42 |         ..closePath(); // End path.
43 |         
44 |   }
45 | }
46 | 
47 | void main() {
48 |   var canvasApp = new CanvasApp();
49 |   canvasApp.drawScreen();
50 | }


--------------------------------------------------------------------------------
/web/ch2/ch2ex23.dart:
--------------------------------------------------------------------------------
 1 | library ch2.ex23;
 2 | 
 3 | import 'dart:html';
 4 | import 'dart:math' as math; // Needed to get PI
 5 | 
 6 | // The dart print() command will automatically print to the console
 7 | // and shouldn't throw an exception so no need to worry about creating
 8 | // our own debugger. For more complicated logging the logger package exists.
 9 | 
10 | // Since dart supports class inheritance and library namespaces
11 | // we don't need to keep our methods/properties in a local scope.
12 | class CanvasApp {
13 |   CanvasElement theCanvas;
14 |   CanvasRenderingContext2D context;
15 |   
16 |   CanvasApp() {
17 |     // Initialize the canvas and context
18 |     theCanvas = document.querySelector('#canvas');
19 |     context = theCanvas.getContext('2d');
20 |   }
21 |   
22 |   void drawScreen() {
23 |     // Content goes here.
24 |     
25 |     // Create a gradient that starts at 50,50 with a radius of 25
26 |     // and extends to second circle at 100,100 with radius of 100
27 |     var gr = context.createRadialGradient(50, 50, 25, 100, 100, 100);
28 |     
29 |     // Add the color stops.
30 |     gr..addColorStop(0, 'rgb(255, 0, 0)')
31 |         ..addColorStop(0.5, 'rgb(0, 255, 0)')
32 |         ..addColorStop(1, 'rgb(255, 0, 0)');
33 |     
34 |     // Use the gradient for the strokeStyle
35 |     context..fillStyle = gr
36 |         // Remember: anticlockwise boolean is option in dart. Default is false
37 |         ..arc(100, 100, 100, (math.PI / 180) * 0, (math.PI / 180) * 360)
38 |         ..fill();
39 |         
40 |   }
41 | }
42 | 
43 | void main() {
44 |   var canvasApp = new CanvasApp();
45 |   canvasApp.drawScreen();
46 | }


--------------------------------------------------------------------------------
/web/ch2/ch2ex24.dart:
--------------------------------------------------------------------------------
 1 | library ch2.ex24;
 2 | 
 3 | import 'dart:html';
 4 | import 'dart:math' as math; // Needed to get PI
 5 | 
 6 | // The dart print() command will automatically print to the console
 7 | // and shouldn't throw an exception so no need to worry about creating
 8 | // our own debugger. For more complicated logging the logger package exists.
 9 | 
10 | // Since dart supports class inheritance and library namespaces
11 | // we don't need to keep our methods/properties in a local scope.
12 | class CanvasApp {
13 |   CanvasElement theCanvas;
14 |   CanvasRenderingContext2D context;
15 |   
16 |   CanvasApp() {
17 |     // Initialize the canvas and context
18 |     theCanvas = document.querySelector('#canvas');
19 |     context = theCanvas.getContext('2d');
20 |   }
21 |   
22 |   void drawScreen() {
23 |     // Content goes here.
24 |     
25 |     // Create a gradient that starts at 50,50 with a radius of 25
26 |     // and extends to second circle at 100,100 with radius of 100
27 |     var gr = context.createRadialGradient(50, 50, 25, 100, 100, 100);
28 |     
29 |     // Add the color stops.
30 |     gr..addColorStop(0, 'rgb(255, 0, 0)')
31 |         ..addColorStop(0.5, 'rgb(0, 255, 0)')
32 |         ..addColorStop(1, 'rgb(255, 0, 0)');
33 |     
34 |     // Use the gradient for the strokeStyle
35 |     context..strokeStyle = gr
36 |         // Remember: anticlockwise boolean is option in dart. Default is false
37 |         ..arc(100, 100, 50, (math.PI / 180) * 0, (math.PI / 180) * 360)
38 |         ..stroke();
39 |         
40 |   }
41 | }
42 | 
43 | void main() {
44 |   var canvasApp = new CanvasApp();
45 |   canvasApp.drawScreen();
46 | }


--------------------------------------------------------------------------------
/web/ch2/ch2ex17.dart:
--------------------------------------------------------------------------------
 1 | library ch2.ex17;
 2 | 
 3 | import 'dart:html';
 4 | 
 5 | // The dart print() command will automatically print to the console
 6 | // and shouldn't throw an exception so no need to worry about creating
 7 | // our own debugger. For more complicated logging the logger package exists.
 8 | 
 9 | // Since dart supports class inheritance and library namespaces
10 | // we don't need to keep our methods/properties in a local scope.
11 | class CanvasApp {
12 |   CanvasElement theCanvas;
13 |   CanvasRenderingContext2D context;
14 |   
15 |   CanvasApp() {
16 |     // Initialize the canvas and context
17 |     theCanvas = document.querySelector('#canvas');
18 |     context = theCanvas.getContext('2d');
19 |   }
20 |   
21 |   void drawScreen() {
22 |     // Content goes here.
23 |     
24 |     // Create a gradient that starts at 0,0 and extends along the x axis
25 |     var gr = context.createLinearGradient(0, 0, 100, 0);
26 |     
27 |     // Add the color stops.
28 |     gr..addColorStop(0, 'rgb(255, 0, 0)')
29 |         ..addColorStop(0.5, 'rgb(0, 255, 0)')
30 |         ..addColorStop(1, 'rgb(255, 0, 0)');
31 |     
32 |     // Use the gradient for the fillStyle
33 |     context..fillStyle = gr
34 |         ..beginPath()
35 |         ..moveTo(0, 0)
36 |         ..lineTo(50, 0)
37 |         ..lineTo(100, 50)
38 |         ..lineTo(50, 100)
39 |         ..lineTo(0, 100)
40 |         ..lineTo(0, 0)
41 |         ..stroke() // Stroke to add the border
42 |         ..fill() // Fill the path with our gradient
43 |         ..closePath(); // End path.
44 |         
45 |   }
46 | }
47 | 
48 | void main() {
49 |   var canvasApp = new CanvasApp();
50 |   canvasApp.drawScreen();
51 | }


--------------------------------------------------------------------------------
/web/ch2/ch2ex18.dart:
--------------------------------------------------------------------------------
 1 | library ch2.ex18;
 2 | 
 3 | import 'dart:html';
 4 | 
 5 | // The dart print() command will automatically print to the console
 6 | // and shouldn't throw an exception so no need to worry about creating
 7 | // our own debugger. For more complicated logging the logger package exists.
 8 | 
 9 | // Since dart supports class inheritance and library namespaces
10 | // we don't need to keep our methods/properties in a local scope.
11 | class CanvasApp {
12 |   CanvasElement theCanvas;
13 |   CanvasRenderingContext2D context;
14 |   
15 |   CanvasApp() {
16 |     // Initialize the canvas and context
17 |     theCanvas = document.querySelector('#canvas');
18 |     context = theCanvas.getContext('2d');
19 |   }
20 |   
21 |   void drawScreen() {
22 |     // Content goes here.
23 |     
24 |     // Create a gradient that starts at 0,0 and extends along the x axis
25 |     var gr = context.createLinearGradient(0, 0, 0, 100);
26 |     
27 |     // Add the color stops.
28 |     gr..addColorStop(0, 'rgb(255, 0, 0)')
29 |         ..addColorStop(0.5, 'rgb(0, 255, 0)')
30 |         ..addColorStop(1, 'rgb(255, 0, 0)');
31 |     
32 |     // Use the gradient for the fillStyle
33 |     context..fillStyle = gr
34 |         ..beginPath()
35 |         ..moveTo(0, 0)
36 |         ..lineTo(50, 0)
37 |         ..lineTo(100, 50)
38 |         ..lineTo(50, 100)
39 |         ..lineTo(0, 100)
40 |         ..lineTo(0, 0)
41 |         ..stroke() // Stroke to add the border
42 |         ..fill() // Fill the path with our gradient
43 |         ..closePath(); // End path.
44 |         
45 |   }
46 | }
47 | 
48 | void main() {
49 |   var canvasApp = new CanvasApp();
50 |   canvasApp.drawScreen();
51 | }


--------------------------------------------------------------------------------
/web/ch1/ch1ex6.dart:
--------------------------------------------------------------------------------
 1 | library ch1.ex6;
 2 | 
 3 | import 'dart:html';
 4 | 
 5 | // The dart print() command will automatically print to the console
 6 | // and shouldn't throw an exception so no need to worry about creating
 7 | // our own debugger. For more complicated logging the logger package exists.
 8 | 
 9 | // Since dart supports class inheritance and library namespaces
10 | // we don't need to keep our methods/properties in a local scope.
11 | class CanvasApp {
12 |   CanvasElement theCanvas;
13 |   CanvasRenderingContext2D context;
14 |   
15 |   CanvasApp() {
16 |     // Initialize the canvas and context
17 |     theCanvas = document.querySelector('#canvasOne');
18 |     context = theCanvas.getContext('2d');
19 |   }
20 |   
21 |   void drawScreen() {
22 |     // Content goes here.
23 |     
24 |     // background
25 |     context..fillStyle = "#ffffaa"
26 |         ..fillRect(0, 0, 500, 300);
27 |     
28 |     // Text
29 |     context..fillStyle = '#000000'
30 |         ..font = '20px Sans-Serif'
31 |         ..textBaseline = 'top'
32 |         ..fillText('Hello World!', 195, 80);
33 |     
34 |     // image
35 |     // With dart we can pass the src directly in the constructor.
36 |     // Note the actual image provided in the samples differs from
37 |     // that shown in the book.
38 |     var helloWorldImage = new ImageElement(src: 'helloworld.gif');
39 |     helloWorldImage.onLoad.listen((_) { 
40 |       context.drawImage(helloWorldImage, 155, 110);
41 |     });
42 |     
43 |     // box
44 |     context..strokeStyle = '#000000'
45 |         ..strokeRect(5, 5, 490, 290);
46 |   }
47 | }
48 | 
49 | void main() {
50 |   var canvasApp = new CanvasApp();
51 |   canvasApp.drawScreen();
52 | }


--------------------------------------------------------------------------------
/web/ch2/ch2ex6.dart:
--------------------------------------------------------------------------------
 1 | library ch2.ex6;
 2 | 
 3 | import 'dart:html';
 4 | 
 5 | // The dart print() command will automatically print to the console
 6 | // and shouldn't throw an exception so no need to worry about creating
 7 | // our own debugger. For more complicated logging the logger package exists.
 8 | 
 9 | // Since dart supports class inheritance and library namespaces
10 | // we don't need to keep our methods/properties in a local scope.
11 | class CanvasApp {
12 |   CanvasElement theCanvas;
13 |   CanvasRenderingContext2D context;
14 |   
15 |   CanvasApp() {
16 |     // Initialize the canvas and context
17 |     theCanvas = document.querySelector('#canvas');
18 |     context = theCanvas.getContext('2d');
19 |   }
20 |   
21 |   void drawScreen() {
22 |     // Content goes here.
23 |     
24 |     // Draw a big box on the screen
25 |     context..fillStyle = 'black'
26 |         ..fillRect(10, 10, 200, 200);
27 |     
28 |     // Leave default global compiste operation as it is
29 |     // Draw a red square
30 |     context..fillStyle = 'red'
31 |         ..fillRect(1, 1, 50, 50);
32 |     
33 |     // Now set composite to source-over
34 |     context..globalCompositeOperation = 'source-over'
35 |         ..fillRect(60, 1, 50, 50);
36 |     
37 |     // Now destination-atop
38 |     // Comment this out because it breaks things otherwise
39 | //    context..globalCompositeOperation = 'destination-atop'
40 | //        ..fillRect(1, 60, 50, 50);
41 |     
42 |     // Set global Alpha and source-atop
43 |     context..globalAlpha = 0.5
44 |         ..globalCompositeOperation = 'source-atop'
45 |         ..fillRect(60, 60, 50, 50);
46 |   }
47 | }
48 | 
49 | void main() {
50 |   var canvasApp = new CanvasApp();
51 |   canvasApp.drawScreen();
52 | }


--------------------------------------------------------------------------------
/web/ch2/ch2ex20.dart:
--------------------------------------------------------------------------------
 1 | library ch2.ex20;
 2 | 
 3 | import 'dart:html';
 4 | 
 5 | // The dart print() command will automatically print to the console
 6 | // and shouldn't throw an exception so no need to worry about creating
 7 | // our own debugger. For more complicated logging the logger package exists.
 8 | 
 9 | // Since dart supports class inheritance and library namespaces
10 | // we don't need to keep our methods/properties in a local scope.
11 | class CanvasApp {
12 |   CanvasElement theCanvas;
13 |   CanvasRenderingContext2D context;
14 |   
15 |   CanvasApp() {
16 |     // Initialize the canvas and context
17 |     theCanvas = document.querySelector('#canvas');
18 |     context = theCanvas.getContext('2d');
19 |   }
20 |   
21 |   void drawScreen() {
22 |     // Content goes here.
23 |     
24 |     // Create a gradient that starts at 0,0 and extends along the x axis
25 |     var gr = context.createLinearGradient(0, 0, 100, 100);
26 |     
27 |     // Add the color stops.
28 |     gr..addColorStop(0, 'rgb(255, 0, 0)')
29 |         ..addColorStop(0.5, 'rgb(0, 255, 0)')
30 |         ..addColorStop(1, 'rgb(255, 0, 0)');
31 |     
32 |     // Use the gradient for the strokeStyle
33 |     context..fillStyle = gr
34 |         ..beginPath() // Not needed
35 |         ..moveTo(0, 0) // Not needed
36 |         ..fillRect(0, 0, 100, 100)
37 |         ..closePath(); // End path. Not needed
38 |     // The above 'not needed' commented lines are included in the original
39 |     // source examples but should not be required for drawing the simple
40 |     // rectangle since there are no paths being created or used.
41 |     // See ch2ex1.dart for more rectangle examples.
42 |         
43 |   }
44 | }
45 | 
46 | void main() {
47 |   var canvasApp = new CanvasApp();
48 |   canvasApp.drawScreen();
49 | }


--------------------------------------------------------------------------------
/web/ch2/ch2ex3.dart:
--------------------------------------------------------------------------------
 1 | library ch2.ex3;
 2 | 
 3 | import 'dart:html';
 4 | 
 5 | // The dart print() command will automatically print to the console
 6 | // and shouldn't throw an exception so no need to worry about creating
 7 | // our own debugger. For more complicated logging the logger package exists.
 8 | 
 9 | // Since dart supports class inheritance and library namespaces
10 | // we don't need to keep our methods/properties in a local scope.
11 | class CanvasApp {
12 |   CanvasElement theCanvas;
13 |   CanvasRenderingContext2D context;
14 |   
15 |   CanvasApp() {
16 |     // Initialize the canvas and context
17 |     theCanvas = document.querySelector('#canvas');
18 |     context = theCanvas.getContext('2d');
19 |   }
20 |   
21 |   void drawScreen() {
22 |     // Content goes here.
23 |     
24 |     // Round end. Bevel join, at top left of canvas
25 |     context..strokeStyle = 'black'
26 |         ..lineWidth = 10
27 |         ..lineJoin = 'bevel'
28 |         ..lineCap = 'round'
29 |         ..beginPath()
30 |         ..moveTo(0, 0)
31 |         ..lineTo(25, 0)
32 |         ..lineTo(25, 25)
33 |         ..stroke()
34 |         ..closePath();
35 |     
36 |     // Round end, Bevel join, not at top or left of canvas
37 |     context..beginPath()
38 |         ..moveTo(10, 50)
39 |         ..lineTo(35, 50)
40 |         ..lineTo(35, 75)
41 |         ..stroke()
42 |         ..closePath();
43 |     
44 |     // Flat end, Round Join, not at top or left of canvas
45 |     context..lineJoin = 'round'
46 |         ..lineCap = 'butt'
47 |         ..beginPath()
48 |         ..moveTo(10, 100)
49 |         ..lineTo(35, 100)
50 |         ..lineTo(35, 125)
51 |         ..stroke()
52 |         ..closePath();
53 |     
54 |   }
55 | }
56 | 
57 | void main() {
58 |   var canvasApp = new CanvasApp();
59 |   canvasApp.drawScreen();
60 | }


--------------------------------------------------------------------------------
/web/ch1/ch1ex3.dart:
--------------------------------------------------------------------------------
 1 | library ch1.ex3;
 2 | 
 3 | import 'dart:html';
 4 | 
 5 | // The dart print() command will automatically print to the console
 6 | // and shouldn't throw an exception so no need to worry about creating
 7 | // our own debugger. For more complicated logging the logger package exists.
 8 | 
 9 | // Since dart supports class inheritance and library namespaces
10 | // we don't need to keep our methods/properties in a local scope.
11 | class CanvasApp {
12 |   CanvasElement theCanvas;
13 |   CanvasRenderingContext2D context;
14 |   
15 |   CanvasApp() {
16 |     // Initialize the canvas and context
17 |     theCanvas = document.querySelector('#canvasOne');
18 |     context = theCanvas.getContext('2d');
19 |   }
20 |   
21 |   void drawScreen() {
22 |     // Content goes here.
23 |     
24 |     print('Drawing Canvas');
25 |     
26 |     // While we could use cascades for all the context calls
27 |     // We'll keep it grouped per area for clarity.
28 |     
29 |     // background
30 |     context..fillStyle = '#ffffaa'
31 |         ..fillRect(0, 0, 500, 300);
32 |     
33 |     // text
34 |     context..fillStyle = '#000000'
35 |         ..font = '20px Sans-Serif'
36 |         ..textBaseline = 'top'
37 |         ..fillText("Hello World", 195, 80);
38 |     
39 |     // image
40 |     // With dart we can pass the src directly in the constructor.
41 |     // Note the actual image provided in the samples differs from
42 |     // that shown in the book.
43 |     var helloWorldImage = new ImageElement(src: 'helloworld.gif');
44 |     helloWorldImage.onLoad.listen((_) { 
45 |       context.drawImage(helloWorldImage, 155, 110);
46 |     });
47 |     
48 |     // box
49 |     context..strokeStyle = '#000000'
50 |         ..strokeRect(5, 5, 490, 290);
51 |   }
52 | }
53 | 
54 | void main() {
55 |   var canvasApp = new CanvasApp();
56 |   canvasApp.drawScreen();
57 | }


--------------------------------------------------------------------------------
/web/ch2/ch2ex5.dart:
--------------------------------------------------------------------------------
 1 | library ch2.ex5;
 2 | 
 3 | import 'dart:html';
 4 | import 'dart:math' as math;
 5 | 
 6 | // The dart print() command will automatically print to the console
 7 | // and shouldn't throw an exception so no need to worry about creating
 8 | // our own debugger. For more complicated logging the logger package exists.
 9 | 
10 | // Since dart supports class inheritance and library namespaces
11 | // we don't need to keep our methods/properties in a local scope.
12 | class CanvasApp {
13 |   CanvasElement theCanvas;
14 |   CanvasRenderingContext2D context;
15 |   
16 |   CanvasApp() {
17 |     // Initialize the canvas and context
18 |     theCanvas = document.querySelector('#canvas');
19 |     context = theCanvas.getContext('2d');
20 |   }
21 |   
22 |   void drawScreen() {
23 |     // Content goes here.
24 |     
25 |     // Draw a big box on the screen
26 |     context..fillStyle = 'black'
27 |         ..fillRect(10, 10, 200, 200)
28 |         ..save(); // Save drawing style to stack to restore later.
29 |     
30 |     // Clip the cavnas to a 50x50 square starting at 0,0
31 |     context..beginPath()
32 |         ..rect(0, 0, 50, 50)
33 |         ..clip();
34 |     
35 |     // Create a red circle
36 |     context..beginPath()
37 |         ..strokeStyle = 'red'
38 |         ..lineWidth = 5
39 |         ..arc(100, 100, 100, (math.PI/180)*0, (math.PI/180)*360) //full circle
40 |         ..stroke()
41 |         ..closePath();
42 |     
43 |     // Reclip to entire canvas
44 |     context..restore() // restore our saved state
45 |         ..beginPath()
46 |         ..rect(0, 0, 500, 500)
47 |         ..clip();
48 |     
49 |     // Draw a blue line that is not clipped.
50 |     context..beginPath()
51 |         ..strokeStyle = 'blue'
52 |         ..lineWidth = 5
53 |         ..arc(100, 100, 50, (math.PI/180)*0, (math.PI/180)*360) //full circle
54 |         ..stroke()
55 |         ..closePath();
56 |   }
57 | }
58 | 
59 | void main() {
60 |   var canvasApp = new CanvasApp();
61 |   canvasApp.drawScreen();
62 | }


--------------------------------------------------------------------------------
/web/ch2/ch2ex27.dart:
--------------------------------------------------------------------------------
 1 | library ch2.ex27;
 2 | 
 3 | import 'dart:html';
 4 | import 'dart:math' show PI; // Only show PI from math library.
 5 | 
 6 | // The dart print() command will automatically print to the console
 7 | // and shouldn't throw an exception so no need to worry about creating
 8 | // our own debugger. For more complicated logging the logger package exists.
 9 | 
10 | // Since dart supports class inheritance and library namespaces
11 | // we don't need to keep our methods/properties in a local scope.
12 | class CanvasApp {
13 |   CanvasElement theCanvas;
14 |   CanvasRenderingContext2D context;
15 |   
16 |   CanvasApp() {
17 |     // Initialize the canvas and context
18 |     theCanvas = document.querySelector('#canvas');
19 |     context = theCanvas.getContext('2d');
20 |   }
21 |   
22 |   void drawScreen() {
23 |     // Content goes here.
24 |     
25 |     // The download javascript sample shows the content in the
26 |     // online for a gif which isn't used. The book shows correct
27 |     // content.
28 |     context.fillStyle = 'red';
29 |     
30 |     // Create a red square with a black shadow on the bottom right sides
31 |     // The book has an error showing this as -4 for offsetX and Y
32 |     // Download sample shows correct values.
33 |     context..shadowOffsetX = 4
34 |         ..shadowOffsetY = 4
35 |         ..shadowColor = 'black'
36 |         ..shadowBlur = 4
37 |         ..fillRect(10, 10, 100, 100);
38 |     
39 |     // Create a red square with a black shadow on the top left
40 |     context..shadowOffsetX = -4
41 |         ..shadowOffsetY = -4
42 |         ..shadowColor = 'black'
43 |         ..shadowBlur = 4
44 |         ..fillRect(150, 10, 100, 100);
45 |     
46 |     // Create a red circle with a light gray shadow to the lower right
47 |     context..shadowOffsetX = 10
48 |         ..shadowOffsetY = 10
49 |         ..shadowColor = 'rgb(100,100,100)'
50 |         ..shadowBlur = 8
51 |         ..arc(200, 300, 100, (PI/180) * 0, (PI/180) * 360)
52 |         ..fill();
53 |     
54 |   }
55 | }
56 | 
57 | void main() {
58 |   var canvasApp = new CanvasApp();
59 |   canvasApp.drawScreen();
60 | }


--------------------------------------------------------------------------------
/web/ch2/ch2ex4.dart:
--------------------------------------------------------------------------------
 1 | library ch2.ex4;
 2 | 
 3 | import 'dart:html';
 4 | 
 5 | import 'dart:math' as math; // Required for PI
 6 | 
 7 | // The dart print() command will automatically print to the console
 8 | // and shouldn't throw an exception so no need to worry about creating
 9 | // our own debugger. For more complicated logging the logger package exists.
10 | 
11 | // Since dart supports class inheritance and library namespaces
12 | // we don't need to keep our methods/properties in a local scope.
13 | class CanvasApp {
14 |   CanvasElement theCanvas;
15 |   CanvasRenderingContext2D context;
16 |   
17 |   CanvasApp() {
18 |     // Initialize the canvas and context
19 |     theCanvas = document.querySelector('#canvas');
20 |     context = theCanvas.getContext('2d');
21 |   }
22 |   
23 |   void drawScreen() {
24 |     // Content goes here.
25 |     
26 |     // Arc examples
27 |     context..strokeStyle = 'black'
28 |         ..lineWidth = 5
29 |         ..beginPath()
30 |         // Full circle. In Dart anticlockwise is optional (defaults to false)
31 |         ..arc(50, 100, 20, (math.PI/180) * 0, (math.PI/180) * 360)
32 |         ..stroke()
33 |         ..closePath()
34 |         // A quarter circle arc
35 |         ..beginPath()
36 |         ..arc(50, 200, 20, (math.PI/180) * 0, (math.PI/180) * 90)
37 |         ..stroke()
38 |         ..closePath()
39 |         // A Three-quarter circle by using anticlockwise
40 |         ..beginPath()
41 |         ..arc(50, 300, 20, (math.PI/180) * 0, (math.PI/180) * 90, true)
42 |         ..stroke()
43 |         ..closePath();
44 |     
45 |     // arcTo Examples
46 |     context..strokeStyle = 'red'
47 |         ..beginPath()
48 |         ..moveTo(100, 0)
49 |         ..lineTo(200, 200)
50 |         ..arcTo(450, 350, 300, 100, 20)
51 |         ..stroke()
52 |         ..closePath();
53 |     
54 |     // Quadratic Curves
55 |     context..strokeStyle = 'blue'
56 |         ..beginPath()
57 |         ..moveTo(300, 0)
58 |         ..quadraticCurveTo(400, 25, 300, 50)
59 |         ..stroke()
60 |         ..closePath();
61 |     
62 |     // Bezier Curves
63 |     context..beginPath()
64 |         ..moveTo(300, 100)
65 |         ..bezierCurveTo(150, 225, 450, 275, 300, 400)
66 |         ..stroke()
67 |         ..closePath();
68 |   }
69 | }
70 | 
71 | void main() {
72 |   var canvasApp = new CanvasApp();
73 |   canvasApp.drawScreen();
74 | }


--------------------------------------------------------------------------------
/web/ch2/ch2ex26.dart:
--------------------------------------------------------------------------------
 1 | library ch2.ex26;
 2 | 
 3 | import 'dart:html';
 4 | 
 5 | // The dart print() command will automatically print to the console
 6 | // and shouldn't throw an exception so no need to worry about creating
 7 | // our own debugger. For more complicated logging the logger package exists.
 8 | 
 9 | // Since dart supports class inheritance and library namespaces
10 | // we don't need to keep our methods/properties in a local scope.
11 | class CanvasApp {
12 |   CanvasElement theCanvas;
13 |   CanvasRenderingContext2D context;
14 |   
15 |   CanvasApp() {
16 |     // Initialize the canvas and context
17 |     theCanvas = document.querySelector('#canvas');
18 |     context = theCanvas.getContext('2d');
19 |   }
20 |   
21 |   void drawScreen() {
22 |     // Content goes here.
23 |     
24 |     var fillImg = new ImageElement(src: 'fill_20x20.gif');
25 |     fillImg.onLoad.listen((_) {
26 |       // Note Dart has 2 separate createPattern methods.
27 |       // The first, createPattern(canvas, repetitionType) expects to receive
28 |       // a canvas element to use for generating the pattern. To create a
29 |       // pattern with an image file we need the explicit: 
30 |       // createPatternFromImage(image, repetitionType) method.
31 |       var fillPattern1 = context.createPatternFromImage(fillImg, 'no-repeat');
32 |       var fillPattern2 = context.createPatternFromImage(fillImg, 'repeat-x');
33 |       var fillPattern3 = context.createPatternFromImage(fillImg, 'repeat-y');
34 |       
35 |       context.fillStyle = fillPattern1;
36 |       context.fillRect(0, 0, 100, 100);
37 |       
38 |       // note this is pattern 3.
39 |       context.fillStyle = fillPattern3;
40 |       context.fillRect(0, 220, 100, 100);
41 |       
42 |       // We need to translate the origin and draw from 0,0 to get repeat-x
43 |       // patern to work. Note this is pattern 2
44 |       // Also note that the screenshots in the book do not show the behaviour
45 |       // of the latest browser builds, though I could not find documentation
46 |       // that a consensus has been reached between browsers on how it should
47 |       // be displayed.
48 |       context.translate(0, 110);
49 |       context.fillStyle = fillPattern2;
50 |       context.fillRect(0, 0, 100, 100);
51 |     });
52 |     
53 |   }
54 | }
55 | 
56 | void main() {
57 |   var canvasApp = new CanvasApp();
58 |   canvasApp.drawScreen();
59 | }


--------------------------------------------------------------------------------
/web/ch2/ch2ex28.dart:
--------------------------------------------------------------------------------
 1 | library ch2.ex28;
 2 | 
 3 | import 'dart:html';
 4 | 
 5 | // The dart print() command will automatically print to the console
 6 | // and shouldn't throw an exception so no need to worry about creating
 7 | // our own debugger. For more complicated logging the logger package exists.
 8 | 
 9 | // Since dart supports class inheritance and library namespaces
10 | // we don't need to keep our methods/properties in a local scope.
11 | class CanvasApp {
12 |   CanvasElement theCanvas;
13 |   CanvasRenderingContext2D context;
14 |   
15 |   // How where to position the object each frame
16 |   num yOffset = 0;
17 |   
18 |   // since we're using AnimationFrame, we can use this to track the 
19 |   // difference in timings between gameLoop calls.
20 |   num lastFrame = null;
21 |   
22 |   CanvasApp() {
23 |     // Initialize the canvas and context
24 |     theCanvas = document.querySelector('#canvas');
25 |     context = theCanvas.getContext('2d');
26 |   }
27 |   
28 |   void drawScreen() {
29 |     // Content goes here.
30 |     
31 |     // Clear the canvas each time the gameloop occurs.
32 |     context.clearRect(0, 0, theCanvas.width, theCanvas.height);
33 |     
34 |     // The samples/book show this assigned to a value however beginPath
35 |     // does not have a return value.
36 |     context..beginPath()
37 |         ..strokeStyle = 'red'
38 |         ..lineWidth = 5
39 |         ..moveTo(0, 0 + yOffset)
40 |         ..lineTo(50, 0 + yOffset)
41 |         ..lineTo(50, 50 + yOffset)
42 |         ..stroke()
43 |         ..closePath();
44 |     
45 |   }
46 |   
47 |   // We're using rAF (or AnimationFrame specifically) so we don't use
48 |   // the Timeout method. Method signature would have no arguments if
49 |   // we wanted to use the timeout method. See chapter 1 example 5
50 |   // for more details.
51 |   void gameLoop(num totalElapsed) {
52 |     // this is the first frame
53 |     if(lastFrame == null) {
54 |       lastFrame = totalElapsed;
55 |     }
56 |     
57 |     drawScreen();
58 |     
59 |     // We calculate our yOffset here and keep the drawing logic only in
60 |     // our drawScreen method. Per the example we call drawScreen() before 
61 |     // we do our calculations not after.
62 |     
63 |     // Calculate how many ms since the last frame.
64 |     var frameElapsed = totalElapsed - lastFrame;
65 |     lastFrame = totalElapsed;
66 |     
67 |     // The sample shows that every 20ms the yOffset increases by 1
68 |     // This would mean it should increase by 0.05 every ms.
69 |     yOffset += (1 / 20) * frameElapsed;
70 |     
71 |     window.animationFrame.then(gameLoop);
72 |   }
73 |   
74 |   // Since we're using rAF and don't want to manually call the gameLoop
75 |   // we need a method to initially start the animationFrame.
76 |   void start() {
77 |     window.animationFrame.then(gameLoop);
78 |   }
79 | }
80 | 
81 | void main() {
82 |   var canvasApp = new CanvasApp();
83 |   canvasApp.start();
84 | }


--------------------------------------------------------------------------------
/web/ch2/ch2ex10.dart:
--------------------------------------------------------------------------------
 1 | library ch2.ex10;
 2 | 
 3 | import 'dart:html';
 4 | import 'dart:math' as math;
 5 | 
 6 | // The dart print() command will automatically print to the console
 7 | // and shouldn't throw an exception so no need to worry about creating
 8 | // our own debugger. For more complicated logging the logger package exists.
 9 | 
10 | // Since dart supports class inheritance and library namespaces
11 | // we don't need to keep our methods/properties in a local scope.
12 | class CanvasApp {
13 |   CanvasElement theCanvas;
14 |   CanvasRenderingContext2D context;
15 |   
16 |   CanvasApp() {
17 |     // Initialize the canvas and context
18 |     theCanvas = document.querySelector('#canvas');
19 |     context = theCanvas.getContext('2d');
20 |   }
21 |   
22 |   void drawScreen() {
23 |     // Content goes here.
24 |     
25 |     // Draw a red square and rotate it
26 |     var angleInRadians = 45 * (math.PI / 180);
27 |     var x = 50;
28 |     var y = 100;
29 |     var height = 40;
30 |     var width = 40;
31 |     
32 |     context..setTransform(1, 0, 0, 1, 0, 0) // Required before rotating
33 |       ..translate(x + (width/2), y + (height/2)) // Change our origin point.
34 |       ..rotate(angleInRadians)  // Rotate before drawing
35 |       ..fillStyle = 'red'
36 |       ..fillRect(-width/2, -height/2, width, height);
37 |     
38 |     // Set new values and draw it again.
39 |     angleInRadians = 75 * (math.PI / 180);
40 |     x = 100;
41 |     y = 100; // not strictly needed
42 |     height = 40; // not strictly needed
43 |     width = 40; // Not strictly needed
44 |     
45 |     context..setTransform(1, 0, 0, 1, 0, 0) // Required before rotating
46 |       ..translate(x + (width/2), y + (height/2)) // Change our origin point.
47 |       ..rotate(angleInRadians)  // Rotate before drawing
48 |       ..fillStyle = 'red'
49 |       ..fillRect(-width/2, -height/2, width, height);
50 |     
51 |     // Set new values and draw it again.
52 |     angleInRadians = 90 * (math.PI / 180);
53 |     x = 150;
54 |     y = 100; // not strictly needed
55 |     height = 40; // not strictly needed
56 |     width = 40; // Not strictly needed
57 |     
58 |     context..setTransform(1, 0, 0, 1, 0, 0) // Required before rotating
59 |       ..translate(x + (width/2), y + (height/2)) // Change our origin point.
60 |       ..rotate(angleInRadians)  // Rotate before drawing
61 |       ..fillStyle = 'red'
62 |       ..fillRect(-width/2, -height/2, width, height);
63 |     
64 |     // Set new values and draw it again.
65 |     angleInRadians = 120 * (math.PI / 180);
66 |     x = 200;
67 |     y = 100; // not strictly needed
68 |     height = 40; // not strictly needed
69 |     width = 40; // Not strictly needed
70 |     
71 |     context..setTransform(1, 0, 0, 1, 0, 0) // Required before rotating
72 |       ..translate(x + (width/2), y + (height/2)) // Change our origin point.
73 |       ..rotate(angleInRadians)  // Rotate before drawing
74 |       ..fillStyle = 'red'
75 |       ..fillRect(-width/2, -height/2, width, height);
76 |   }
77 | }
78 | 
79 | void main() {
80 |   var canvasApp = new CanvasApp();
81 |   canvasApp.drawScreen();
82 | }


--------------------------------------------------------------------------------
/web/ch3/ch3ex1.dart:
--------------------------------------------------------------------------------
 1 | library ch3.ex1;
 2 | 
 3 | import 'dart:html';
 4 | 
 5 | // The dart print() command will automatically print to the console
 6 | // and shouldn't throw an exception so no need to worry about creating
 7 | // our own debugger. For more complicated logging the logger package exists.
 8 | 
 9 | // Since dart supports class inheritance and library namespaces
10 | // we don't need to keep our methods/properties in a local scope.
11 | class CanvasApp {
12 |   CanvasElement theCanvas;
13 |   CanvasRenderingContext2D context;
14 |   
15 |   // DartDoc style comments provide tooltips in the editor so used for
16 |   // public class variables below.
17 |   /// Text box which will contain the message to display.
18 |   InputElement textBox;
19 |   /// Select box which indicates to fill/stroke or both the text.
20 |   SelectElement selectFillOrStroke;
21 |   /// Message to display.
22 |   String message = 'your text';
23 |   /// Text fill style (Stroke, fill or both)
24 |   String fillOrStroke = 'fill';
25 |   
26 |   
27 |   CanvasApp() {
28 |     // Initialize the canvas and context
29 |     theCanvas = document.querySelector('#canvas');
30 |     context = theCanvas.getContext('2d');
31 |     
32 |     // Initialize form elements and add event listeners.
33 |     textBox = document.querySelector('#textBox');
34 |     textBox.onKeyUp.listen(textBoxChanged);
35 |     selectFillOrStroke = document.querySelector('#fillOrStroke');
36 |     selectFillOrStroke.onChange.listen(fillOrStrokeChanged);
37 |   }
38 |   
39 |   void drawScreen() {
40 |     // Content goes here.
41 |     
42 |     // Background
43 |     context..fillStyle = '#ffffaa'
44 |         ..fillRect(0, 0, theCanvas.width, theCanvas.height)
45 |     // Box
46 |         ..strokeStyle = '#000000'
47 |         ..strokeRect(5, 5, theCanvas.width - 10, theCanvas.height - 10);
48 |     
49 |     // Text
50 |     // Make sure to set your fonts prior to measureText or you will
51 |     // not get back accurate values.
52 |     context.font = '50px serif';
53 |     
54 |     var metrics = context.measureText(message);
55 |     var textWidth = metrics.width;
56 |     var xPosition = (theCanvas.width / 2) - (textWidth / 2);
57 |     var yPosition = theCanvas.height / 2;
58 |     
59 |     switch(fillOrStroke) {
60 |       case 'fill': 
61 |         context..fillStyle = '#ff0000'
62 |             ..fillText(message, xPosition, yPosition);
63 |         break;
64 |       case 'stroke':
65 |         context..strokeStyle = '#ff0000'
66 |             ..strokeText(message, xPosition, yPosition);
67 |         break;
68 |       case 'both':
69 |         context..fillStyle = '#ff0000'
70 |             ..fillText(message, xPosition, yPosition)
71 |             ..strokeStyle = '#000000'
72 |             ..strokeText(message, xPosition, yPosition);
73 |         break;
74 |     }
75 |     
76 |   }
77 |   
78 |   void textBoxChanged(KeyboardEvent e) {
79 |     var target = e.target;
80 |     message = target.value;
81 |     drawScreen();
82 |   }
83 |   
84 |   void fillOrStrokeChanged(Event e) {
85 |     var target = e.target;
86 |     fillOrStroke = target.value;
87 |     drawScreen();
88 |   }
89 |   
90 | }
91 | 
92 | void main() {
93 |   var canvasApp = new CanvasApp();
94 |   canvasApp.drawScreen();
95 | }


--------------------------------------------------------------------------------
/web/ch3/ch3ex2.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | 
 3 | <html lang="en">
 4 |   <head>
 5 |     <meta charset="UTF-8">
 6 |     <title>CH3EX2: Text Arranger Version 2.0</title>
 7 |     <link rel="stylesheet" href="base.css">
 8 |     <!-- We don't include the modernizer because Dart only supports "The modern web" -->
 9 |   </head>
10 |  
11 |   <body>
12 |   <div id="container">
13 |     <canvas id="canvas" width="500" height="300">
14 |       Your browser does not support HTML 5 Canvas.
15 |     </canvas>
16 |     
17 |     <form>
18 |       Text: <input id="textBox" placeholder="your text" />
19 |       <br> 
20 |   
21 |       Fill Or Stroke : 
22 |       <select id="fillOrStroke">
23 |         <option value="fill">fill</option>
24 |         <option value="stroke">stroke</option>
25 |         <option value="both">both</option>
26 |       </select>
27 |       <br>
28 |       Text Font: <select id="textFont">
29 |         <option value="serif">serif</option>
30 |         <option value="sans-serif">sans-serif</option>
31 |         <option value="cursive">cursive</option>
32 |         <option value="fantasy">fantasy</option>
33 |         <option value="monospace">monospace</option>
34 |       </select>
35 |       <br>  
36 |       Text Size: <input type="range" id="textSize"
37 |         min="0"
38 |         max="200"
39 |         step="1"
40 |         value="50"/> 
41 |       <br>      
42 |       Text Color: <input type="color" 
43 |           class="color" 
44 |           id="textFillColor" 
45 |           value="FF0000"/> 
46 |       <br>
47 |       Font Weight:
48 |       <select id="fontWeight">
49 |         <option value="normal">normal</option>
50 |         <option value="bold">bold</option>
51 |         <option value="bolder">bolder</option>
52 |         <option value="lighter">lighter</option>
53 |       </select>
54 |       <br>
55 |       Font Style:
56 |       <select id="fontStyle">
57 |         <option value="normal">normal</option>
58 |         <option value="italic">italic</option>
59 |         <option value="oblique">oblique</option>
60 |       </select>
61 |       <br>
62 |       Text Baseline <select id="textBaseline">
63 |        <option value="middle">middle</option>
64 |        <option value="top">top</option>
65 |        <option value="hanging">hanging</option>
66 |        <option value="alphabetic">alphabetic</option>
67 |        <option value="ideographic">ideographic</option>
68 |        <option value="bottom">bottom</option>
69 |      </select>
70 |      <br>
71 |      Text Align <select id="textAlign">
72 |        <option value="center">center</option>
73 |        <option value="start">start</option>
74 |        <option value="end">end</option>
75 |        <option value="left">left</option>
76 |        <option value="right">right</option>
77 |  
78 |      </select>
79 |     </form>
80 |     
81 |   </div>
82 |   
83 |     <!-- 
84 |     Since dart VM usually runs after the page is initially rendered, we
85 |     keep our scripts just prior to the end of the body. This helps when
86 |     compiled to javascript for consistancy.
87 |      -->
88 |     <script type="application/dart" src="ch3ex2.dart"></script>
89 |     <!-- for this next line to work, your pubspec.yaml file must have a dependency on 'browser' -->
90 |     <script src="packages/browser/dart.js"></script>
91 |   </body>
92 | </html>
93 | 


--------------------------------------------------------------------------------
/web/ch1/ch1ex5.dart:
--------------------------------------------------------------------------------
  1 | library ch1.ex5;
  2 | 
  3 | import 'dart:html';
  4 | // We would use this if we wanted to use the Timer version of gameLoop.
  5 | //import 'dart:async';
  6 | 
  7 | // The dart print() command will automatically print to the console
  8 | // and shouldn't throw an exception so no need to worry about creating
  9 | // our own debugger. For more complicated logging the logger package exists.
 10 | 
 11 | // Since dart supports class inheritance and library namespaces
 12 | // we don't need to keep our methods/properties in a local scope.
 13 | class CanvasApp {
 14 |   CanvasElement theCanvas;
 15 |   CanvasRenderingContext2D context;
 16 |   
 17 |   // Our alpha transparency
 18 |   num alpha = 0;
 19 |   // The text we will display.
 20 |   String text = 'Hello World';
 21 |   // Background Image
 22 |   ImageElement helloWorldImage;
 23 |   // If we're fading in or out
 24 |   bool fadeIn = true;
 25 |   
 26 |   // Since we're using animationFrame, we use this to track the difference
 27 |   // in timings between gameLoop calls
 28 |   num lastFrame = null;
 29 |   
 30 |   CanvasApp() {
 31 |     // Initialize the canvas and context
 32 |     theCanvas = document.querySelector('#canvasOne');
 33 |     context = theCanvas.getContext('2d');
 34 |     helloWorldImage = new ImageElement(src: 'html5bg.jpg');
 35 |   }
 36 |   
 37 |   void drawScreen() {
 38 |     // Content goes here.
 39 |     
 40 |     // Background
 41 |     context..globalAlpha = 1
 42 |         ..fillStyle = '#000000'
 43 |         ..fillRect(0, 0, 640, 480);
 44 |     // Background Image
 45 |     context..globalAlpha = 0.25
 46 |         ..drawImage(helloWorldImage, 0, 0);
 47 |     // Text
 48 |     context..font = '72px Sans-Serif'
 49 |         ..textBaseline = 'top'
 50 |         ..globalAlpha = alpha
 51 |         ..fillStyle = '#ffffff'
 52 |         ..fillText(text, 150, 200);
 53 |     
 54 |   }
 55 | 
 56 |   // gameLoop would have this signature if we used the Timer/Future versions.  
 57 |   //void gameLoop() {
 58 |   void gameLoop(num totalElapsed) {
 59 |     // We calculate our alpha value here since we're using the animationFrame
 60 |     // The JS Sample increments alpha by 0.01 every 20ms. This would be
 61 |     // 0.0005 per ms.
 62 |     if(lastFrame == null) {
 63 |       // This is the first frame
 64 |       lastFrame = totalElapsed;
 65 |     }
 66 |     
 67 |     // animateFrame passes the total number of seconds since the page
 68 |     // originally loaded. We want the number since the last frame was
 69 |     // displayed.
 70 |     var frameElapsed = totalElapsed - lastFrame;
 71 |     lastFrame = totalElapsed;
 72 |     // Calculate how much alpha should have changed since the last frame.
 73 |     var alphaDelta = (0.01 / 20) * frameElapsed;
 74 |     
 75 |     if(fadeIn) {
 76 |       // fading in so add our alphaDelta to alpha value
 77 |       alpha += alphaDelta;
 78 |       if(alpha >= 1) {
 79 |         // We've reached full alpha so ensure it's just max value (not above)
 80 |         // and switch to fading out
 81 |         alpha = 1;
 82 |         fadeIn = false;
 83 |       }
 84 |     } else {
 85 |       // fading out so subtract our alpha delta
 86 |       alpha -= alphaDelta;
 87 |       if(alpha <= 0) {
 88 |         // Fully transparent, so flip again.
 89 |         alpha = 0;
 90 |         fadeIn = true;
 91 |       }
 92 |     }
 93 | 
 94 |     drawScreen();
 95 |   
 96 |     // Because Dart targets 'the modern web' I decided to use animationFrame
 97 |     // (the non-cancelable version of requestAnimationFrame) for our loop
 98 |     // rather than using a standard timer. I've included the equivalent Timer
 99 |     // version in the comments below.
100 |     window.animationFrame.then(gameLoop);
101 |     
102 |     // Non-cancelable version:
103 |     //new Future.delayed(new Duration(milliseconds: 20), gameLoop);
104 |     
105 |     // Cancelable version. As an alternative we could also use
106 |     // new Timer.repeating() from outside of the gameLoop
107 |     
108 |     //new Timer(new Duration(milliseconds: 20), gameLoop);
109 |   }
110 |   
111 |   // Since we don't want to manully call gameLoop with bad values for
112 |   // the time elapsed, we use a method to initially start the animation loop
113 |   void start() {
114 |     window.animationFrame.then(gameLoop);
115 |   }
116 | }
117 | 
118 | void main() {
119 |   var canvasApp = new CanvasApp();
120 |   canvasApp.start();
121 | }


--------------------------------------------------------------------------------
/web/ch3/ch3ex3.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | 
  3 | <html lang="en">
  4 |   <head>
  5 |     <meta charset="UTF-8">
  6 |     <title>CH3EX3: Text Arranger Version 3.0</title>
  7 |     <link rel="stylesheet" href="base.css">
  8 |     <!-- We don't include the modernizer because Dart only supports "The modern web" -->
  9 |   </head>
 10 |  
 11 |   <body>
 12 |   <div id="container">
 13 |     <canvas id="canvas" width="500" height="300">
 14 |       Your browser does not support HTML 5 Canvas.
 15 |     </canvas>
 16 |     
 17 |     <form>
 18 |       Text: <input id="textBox" placeholder="your text" />
 19 |       <br> 
 20 |       Text Font: 
 21 |       <select id="textFont">
 22 |         <option value="serif">serif</option>
 23 |         <option value="sans-serif">sans-serif</option>
 24 |         <option value="cursive">cursive</option>
 25 |         <option value="fantasy">fantasy</option>
 26 |         <option value="monospace">monospace</option>
 27 |       </select>
 28 |       <br>
 29 |       Font Weight:
 30 |       <select id="fontWeight">
 31 |         <option value="normal">normal</option>
 32 |         <option value="bold">bold</option>
 33 |         <option value="bolder">bolder</option>
 34 |         <option value="lighter">lighter</option>
 35 |       </select>
 36 |       <br>
 37 |       Font Style:
 38 |       <select id="fontStyle">
 39 |         <option value="normal">normal</option>
 40 |         <option value="italic">italic</option>
 41 |         <option value="oblique">oblique</option>
 42 |       </select>
 43 |       <br>
 44 |       Text Size: <input type="range" id="textSize"
 45 |         min="0"
 46 |         max="200"
 47 |         step="1"
 48 |         value="50"/> 
 49 |       <br>
 50 |       Fill Type:
 51 |       <select id="fillType">
 52 |         <option value="colorFill">Color Fill</option>
 53 |         <option value="linearGradient">Linear Gradient</option>
 54 |         <option value="radialGradient">Radial Gradient</option>
 55 |         <option value="pattern">Pattern</option>
 56 |       </select>
 57 |       <br>
 58 |       Text Color: <input type="color" class="color" id="textFillColor" value="#FF0000" />
 59 |       <br>
 60 |       Text Color 2: <input type="color" class="color" id="textFillColor2" value="#000000" />
 61 |       <br>
 62 |       Fill Or Stroke : 
 63 |       <select id="fillOrStroke">
 64 |         <option value="fill">fill</option>
 65 |         <option value="stroke">stroke</option>
 66 |         <option value="both">both</option>
 67 |       </select>
 68 |       <br>     
 69 |       Text Baseline <select id="textBaseline">
 70 |        <option value="middle">middle</option>
 71 |        <option value="top">top</option>
 72 |        <option value="hanging">hanging</option>
 73 |        <option value="alphabetic">alphabetic</option>
 74 |        <option value="ideographic">ideographic</option>
 75 |        <option value="bottom">bottom</option>
 76 |      </select>
 77 |      <br>
 78 |      Text Align <select id="textAlign">
 79 |        <option value="center">center</option>
 80 |        <option value="start">start</option>
 81 |        <option value="end">end</option>
 82 |        <option value="left">left</option>
 83 |        <option value="right">right</option>
 84 |      </select>
 85 |      <br>
 86 |      Alpha: <input type="range" id="textAlpha" min="0.0" max="1.0" step="0.1" value="1.0" />
 87 |      <br>
 88 |      Shadow X: <input type="range" id="shadowX" min="-100" max="100" step="1" value="1" />
 89 |      <br>
 90 |      Shadow Y: <input type="range" id="shadowY" min="-100" max="100" step="1" value="1" />
 91 |      <br>
 92 |      Shadow Blur: <input type="range" id="shadowBlur" min="1" max="100" step="1" value="1" />
 93 |      <br>
 94 |      Shadow Color: <input type="color" class="color" id="shadowColor" value="#707070" />
 95 |      <br>
 96 |      Canvas Width: <input type="range" id="canvasWidth" min="0" max="1000" step="1" value="500" />
 97 |      <br>
 98 |      Canvas Height: <input type="range" id="canvasHeight" min="0" max="1000" step="1" value="300" />
 99 |      <br>
100 |      Canvas Style Width: <input type="range" id="canvasStyleWidth" min="0" max="1000" step="1" value="500" />
101 |      <br>
102 |      Canvas Style Height: <input type="range" id="canvasStyleHeight" min="0" max="1000" step="1" value="300" />
103 |      <br>
104 |      <button id="createImageData">Create Image Data</button>
105 |      <br>
106 |      <br>
107 |      <textarea id="imageDataDisplay" rows="10" cols="30"></textarea>
108 |     </form>
109 |     
110 |   </div>
111 |   
112 |     <!-- 
113 |     Since dart VM usually runs after the page is initially rendered, we
114 |     keep our scripts just prior to the end of the body. This helps when
115 |     compiled to javascript for consistancy.
116 |      -->
117 |     <script type="application/dart" src="ch3ex3.dart"></script>
118 |     <!-- for this next line to work, your pubspec.yaml file must have a dependency on 'browser' -->
119 |     <script src="packages/browser/dart.js"></script>
120 |   </body>
121 | </html>
122 | 


--------------------------------------------------------------------------------
/web/ch1/ch1ex4.dart:
--------------------------------------------------------------------------------
  1 | library ch1.ex4;
  2 | 
  3 | // Required for accessing the DOM (getting our canvas)
  4 | import 'dart:html';
  5 | // Required to get Random class
  6 | import 'dart:math' show Random;
  7 | 
  8 | // The dart print() command will automatically print to the console
  9 | // and shouldn't throw an exception so no need to worry about creating
 10 | // our own debugger. For more complicated logging the logger package exists.
 11 | 
 12 | // Since dart supports class inheritance and library namespaces
 13 | // we don't need to keep our methods/properties in a local scope.
 14 | class CanvasApp {
 15 |   CanvasElement theCanvas;
 16 |   CanvasRenderingContext2D context;
 17 |   // Number of guesses that have been made.
 18 |   num guesses = 0;
 19 |   // String to display if guess should be higher or lower
 20 |   String higherOrLower = '';
 21 |   // Flag to see if the game is done.
 22 |   bool gameOver;
 23 |   // The letter we want to guess
 24 |   String letterToGuess;
 25 |   
 26 |   // Our message to display.
 27 |   final message = "Guess The Letter From a (lower) to z (higher)";
 28 |   // Possible choices to make.
 29 |   final letters = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l',
 30 |                    'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x',
 31 |                    'y', 'z'];
 32 |   // Letters we've already guessed.
 33 |   final lettersGuessed = [];
 34 |   // Today's date.
 35 |   final today;
 36 |   
 37 |   CanvasApp() : today = new DateTime.now() {
 38 |     // Initialize the canvas and context
 39 |     theCanvas = document.querySelector('#canvasOne');
 40 |     context = theCanvas.getContext('2d');
 41 |   }
 42 |   
 43 |   void initGame() {
 44 |     // Create an instance of Random
 45 |     var rand = new Random();
 46 |     // Random provides a handy way of getting an integer in the range
 47 |     // we need.
 48 |     var letterIndex = rand.nextInt(letters.length);
 49 |     letterToGuess = letters[letterIndex];
 50 |     // Initialize gameOver to be false.
 51 |     gameOver = false;
 52 |     
 53 |     // Setup our various event handlers.
 54 |     
 55 |     // This would preferably be a KeyboardEventStream however
 56 |     // it appears to be blocked by http://dartbug.com/14044
 57 |     // KeyboardEventStream.onKeyDown(document.body).listen(eventKeyPressed);
 58 |     document.body.onKeyDown.listen(eventKeyPressed);
 59 |     var buttonElement = document.querySelector('#createImageData');
 60 |     buttonElement.onClick.listen(createImageDataPressed);
 61 |     
 62 |     drawScreen();
 63 |   }
 64 |   
 65 |   // Our KeyDown handler
 66 |   void eventKeyPressed(KeyboardEvent e) {
 67 |     // Don't do anything if the game is already over.
 68 |     if(gameOver) return;
 69 |     
 70 |     print('keycode: ${e.keyCode}');
 71 |     var letterPressed = new String.fromCharCode(e.keyCode).toLowerCase();
 72 |     guesses++;
 73 |     lettersGuessed.add(letterPressed);
 74 |     
 75 |     if(letterPressed == letterToGuess) {
 76 |       gameOver = true;
 77 |     } else {
 78 |       var letterIndex = letters.indexOf(letterToGuess);
 79 |       var guessIndex = letters.indexOf(letterPressed);
 80 |       print('Guess Index: $guessIndex');
 81 |       if(guessIndex < 0) {
 82 |         higherOrLower = 'That is not a letter';
 83 |       } else if(guessIndex > letterIndex) {
 84 |         higherOrLower = 'Lower';
 85 |       } else {
 86 |         higherOrLower = 'Higher';
 87 |       }
 88 |     }
 89 |     
 90 |     drawScreen();
 91 |   }
 92 |   
 93 |   void drawScreen() {
 94 |     // Content goes here.
 95 |     
 96 |     // Background
 97 |     context..fillStyle = '#ffffaa'
 98 |         ..fillRect(0, 0, 500, 300);
 99 |     
100 |     // Box
101 |     context..strokeStyle = '#000000'
102 |         ..strokeRect(5, 5, 490, 290);
103 |     
104 |     // Date
105 |     context..textBaseline = 'top'
106 |         ..fillStyle = '#000000'
107 |         ..font = '10px Sans-Serif'
108 |         ..fillText(today.toString(), 150, 10);
109 |     
110 |     // Message
111 |     context..fillStyle = '#ff0000'
112 |         ..font = '14px Sans-Serif'
113 |         ..fillText(message, 125, 30);
114 | 
115 |     // Guesses
116 |     context..fillStyle = '#109910'
117 |         ..font = '16px Sans-Serif'
118 |         ..fillText('Guesses: $guesses', 215, 50);
119 |     
120 |     // Higher or Lower
121 |     context..fillStyle = '#000000'
122 |         ..font = '16px Sans-Serif'
123 |         ..fillText('Higher or Lower: $higherOrLower', 150, 125);
124 |     
125 |     // Letters Guessed
126 |     context..fillStyle = '#ff0000'
127 |         ..font = '16px Sans-Serif'
128 |         ..fillText('Letters Guessed: $lettersGuessed', 10, 260);
129 |     
130 |     if(gameOver) {
131 |       context..fillStyle = '#ff0000'
132 |           ..font = '40px Sans-Serif'
133 |           ..fillText('You Got it!', 150, 180);
134 |     }
135 |     
136 |   }
137 |   
138 |   // Our onClick handler.
139 |   void createImageDataPressed(Event e) {
140 |     window.open(theCanvas.toDataUrl(),
141 |         "canavsImage",
142 |         "left=0,top=0,width=${theCanvas.width},height=${theCanvas.height},toolbar=0,resizable=0");
143 |   }
144 | }
145 | 
146 | void main() {
147 |   var canvasApp = new CanvasApp();
148 |   canvasApp.initGame();
149 | }


--------------------------------------------------------------------------------
/web/ch3/ch3ex2.dart:
--------------------------------------------------------------------------------
  1 | library ch3.ex2;
  2 | 
  3 | import 'dart:html';
  4 | 
  5 | // The dart print() command will automatically print to the console
  6 | // and shouldn't throw an exception so no need to worry about creating
  7 | // our own debugger. For more complicated logging the logger package exists.
  8 | 
  9 | // Since dart supports class inheritance and library namespaces
 10 | // we don't need to keep our methods/properties in a local scope.
 11 | class CanvasApp {
 12 |   CanvasElement theCanvas;
 13 |   CanvasRenderingContext2D context;
 14 |   
 15 |   // DartDoc style comments provide tooltips in the editor so used for
 16 |   // public class variables below.
 17 |   
 18 |   /// Message to display.
 19 |   String message = 'your text';
 20 |   /// Text fill style (Stroke, fill or both)
 21 |   String fillOrStroke = 'fill';
 22 |   /// Font size to display.
 23 |   String textSize = '50';
 24 |   /// Font to use for message.
 25 |   String fontFace = 'serif';
 26 |   /// Color of the font to display
 27 |   String textFillColor = '#ff0000';
 28 |   /// Where to position the font's baseline.
 29 |   String textBaseline = 'middle';
 30 |   /// Alignment of the text
 31 |   String textAlign = 'center';
 32 |   /// Bolder or lighter values.
 33 |   String fontWeight = 'normal';
 34 |   /// Italic or oblique or normal.
 35 |   String fontStyle = 'normal';
 36 |   
 37 |   
 38 |   
 39 |   CanvasApp() {
 40 |     // Initialize the canvas and context
 41 |     theCanvas = document.querySelector('#canvas');
 42 |     context = theCanvas.getContext('2d');
 43 |     
 44 |     // Initialize form elements and add event listeners.
 45 |     querySelector('#textBox').onKeyUp.listen(textBoxChanged);
 46 |     querySelector('#fillOrStroke').onChange.listen(fillOrStrokeChanged);
 47 |     querySelector('#textSize').onChange.listen(textSizeChanged);
 48 |     querySelector('#textFillColor').onChange.listen(textFillColorChanged);
 49 |     querySelector('#textFont').onChange.listen(textFontChanged);
 50 |     querySelector('#textBaseline').onChange.listen(textBaselineChanged);
 51 |     querySelector('#textAlign').onChange.listen(textAlignChanged);
 52 |     querySelector('#fontWeight').onChange.listen(fontWeightChanged);
 53 |     querySelector('#fontStyle').onChange.listen(fontStyleChanged);
 54 |   }
 55 |   
 56 |   void drawScreen() {
 57 |     // Content goes here.
 58 |     
 59 |     // Background
 60 |     context..fillStyle = '#ffffaa'
 61 |         ..fillRect(0, 0, theCanvas.width, theCanvas.height)
 62 |     // Box
 63 |         ..strokeStyle = '#000000'
 64 |         ..strokeRect(5, 5, theCanvas.width - 10, theCanvas.height - 10);
 65 |     
 66 |     // Text
 67 |     context..textBaseline = textBaseline
 68 |         ..textAlign = textAlign;
 69 |     // Make sure to set your fonts prior to measureText or you will
 70 |     // not get back accurate values.
 71 |     // Here we use string interpolation instead of string concatentation.
 72 |     context.font = '$fontWeight $fontStyle ${textSize}px $fontFace';
 73 |     
 74 |     var metrics = context.measureText(message);
 75 |     var textWidth = metrics.width;
 76 |     var xPosition = (theCanvas.width / 2);
 77 |     var yPosition = theCanvas.height / 2;
 78 |     
 79 |     switch(fillOrStroke) {
 80 |       case 'fill': 
 81 |         context..fillStyle = textFillColor
 82 |             ..fillText(message, xPosition, yPosition);
 83 |         break;
 84 |       case 'stroke':
 85 |         context..strokeStyle = textFillColor
 86 |             ..strokeText(message, xPosition, yPosition);
 87 |         break;
 88 |       case 'both':
 89 |         context..fillStyle = textFillColor
 90 |             ..fillText(message, xPosition, yPosition)
 91 |             ..strokeStyle = '#000000'
 92 |             ..strokeText(message, xPosition, yPosition);
 93 |         break;
 94 |     }
 95 |     
 96 |   }
 97 |   
 98 |   void textBoxChanged(KeyboardEvent e) {
 99 |     var target = e.target;
100 |     message = target.value;
101 |     drawScreen();
102 |   }
103 |   
104 |   void fillOrStrokeChanged(Event e) {
105 |     var target = e.target;
106 |     fillOrStroke = target.value;
107 |     drawScreen();
108 |   }
109 |   
110 |   
111 |   void textSizeChanged(Event e) {
112 |     var target = e.target;
113 |     textSize = target.value;
114 |     drawScreen();
115 | 
116 |   }
117 |   
118 |   void textFillColorChanged(Event e) {
119 |     var target = e.target;
120 |     textFillColor = target.value;
121 |     // Check to make sure it starts with a hash sign.
122 |     if(!textFillColor.startsWith('#')) {
123 |       textFillColor = '#$textFillColor';
124 |     }
125 |     drawScreen();
126 |   }
127 |   
128 |   void textFontChanged(Event e) {
129 |     var target = e.target;
130 |     fontFace = target.value;
131 |     drawScreen();
132 |   }
133 |   
134 |   void textBaselineChanged(Event e) {
135 |     var target = e.target;
136 |     textBaseline = target.value;
137 |     drawScreen();
138 |   }
139 |   
140 |   void textAlignChanged(Event e) {
141 |     var target = e.target;
142 |     textAlign = target.value;
143 |     drawScreen();
144 |   }
145 |   
146 |   void fontWeightChanged(Event e) {
147 |     var target = e.target;
148 |     fontWeight = target.value;
149 |     drawScreen();
150 |   }
151 |   
152 |   void fontStyleChanged(Event e) {
153 |     var target = e.target;
154 |     fontStyle = target.value;
155 |     drawScreen();
156 |   }
157 | }
158 | 
159 | void main() {
160 |   var canvasApp = new CanvasApp();
161 |   canvasApp.drawScreen();
162 | }


--------------------------------------------------------------------------------
/web/ch3/ch3ex3.dart:
--------------------------------------------------------------------------------
  1 | library ch3.ex3;
  2 | import 'dart:html';
  3 | 
  4 | // The dart print() command will automatically print to the console
  5 | // and shouldn't throw an exception so no need to worry about creating
  6 | // our own debugger. For more complicated logging the logger package exists.
  7 | 
  8 | // Since dart supports class inheritance and library namespaces
  9 | // we don't need to keep our methods/properties in a local scope.
 10 | class CanvasApp {
 11 |   CanvasElement theCanvas;
 12 |   CanvasRenderingContext2D context;
 13 |   
 14 |   // DartDoc style comments provide tooltips in the editor so used for
 15 |   // public class variables below.
 16 |   
 17 |   /// Message to display.
 18 |   String message = 'your text';
 19 |   /// Font size to display.
 20 |   String fontSize = '50';
 21 |   /// Font to use for message.
 22 |   String fontFace = 'serif';
 23 |   /// Color of the font to display
 24 |   String textFillColor = '#ff0000';
 25 |   /// Alpha value of text (0.0 - 1.0)
 26 |   num textAlpha = 1.0;
 27 |   /// X-Position of the shadow
 28 |   num shadowX = 1;
 29 |   /// Y-Position of the shadow
 30 |   num shadowY = 1;
 31 |   /// Blur radius of the shadow.
 32 |   num shadowBlur = 1;
 33 |   /// Color of the shadow.
 34 |   String shadowColor = '#707070';
 35 |   /// Where to position the font's baseline.
 36 |   String textBaseline = 'middle';
 37 |   /// Alignment of the text
 38 |   String textAlign = 'center';
 39 |   /// Text fill style (Stroke, fill or both)
 40 |   String fillOrStroke = 'fill';
 41 |   /// Bolder or lighter values.
 42 |   String fontWeight = 'normal';
 43 |   /// Italic or oblique or normal.
 44 |   String fontStyle = 'normal';
 45 |   /// Fill type to use
 46 |   String fillType = 'colorFill';
 47 |   /// Second text color to use (in case of gradient fill)
 48 |   String textFillColor2 = '#000000';
 49 |   /// Placeholder for image data for a pattern fill
 50 |   ImageElement pattern = new ImageElement();
 51 |   
 52 |   CanvasApp() {
 53 |     // Initialize the canvas and context
 54 |     theCanvas = document.querySelector('#canvas');
 55 |     context = theCanvas.getContext('2d');
 56 |     
 57 |     // Initialize form elements and add event listeners.
 58 |     querySelector('#textBox').onKeyUp.listen(textBoxChanged);
 59 |     querySelector('#fillOrStroke').onChange.listen(fillOrStrokeChanged);
 60 |     querySelector('#textSize').onChange.listen(textSizeChanged);
 61 |     querySelector('#textFillColor').onChange.listen(textFillColorChanged);
 62 |     querySelector('#textFont').onChange.listen(textFontChanged);
 63 |     querySelector('#textBaseline').onChange.listen(textBaselineChanged);
 64 |     querySelector('#textAlign').onChange.listen(textAlignChanged);
 65 |     querySelector('#fontWeight').onChange.listen(fontWeightChanged);
 66 |     querySelector('#fontStyle').onChange.listen(fontStyleChanged);
 67 |     querySelector('#shadowX').onChange.listen(shadowXChanged);
 68 |     querySelector('#shadowY').onChange.listen(shadowYChanged);
 69 |     querySelector('#shadowBlur').onChange.listen(shadowBlurChanged);
 70 |     querySelector('#shadowColor').onChange.listen(shadowColorChanged);
 71 |     querySelector('#textAlpha').onChange.listen(textAlphaChanged);
 72 |     querySelector('#textFillColor2').onChange.listen(textFillColor2Changed);
 73 |     querySelector('#fillType').onChange.listen(fillTypeChanged);
 74 |     querySelector('#canvasWidth').onChange.listen(canvasWidthChanged);
 75 |     querySelector('#canvasHeight').onChange.listen(canvasHeightChanged);
 76 |     querySelector('#canvasStyleWidth').onChange.listen(canvasStyleSizeChanged);
 77 |     querySelector('#canvasStyleHeight').onChange.listen(canvasStyleSizeChanged);
 78 |     querySelector('#createImageData').onClick.listen(createImageDataPressed);
 79 |     
 80 |     pattern.src = 'texture.jpg';
 81 |   }
 82 |   
 83 |   void drawScreen() {
 84 |     // Content goes here.
 85 |     
 86 |     // Background
 87 |     context..globalAlpha = 1
 88 |         ..shadowColor = '#707070'
 89 |         ..shadowOffsetX = 0
 90 |         ..shadowOffsetY = 0
 91 |         ..shadowBlur = 0
 92 |         ..fillStyle = '#ffffaa'
 93 |         ..fillRect(0, 0, theCanvas.width, theCanvas.height)
 94 |     // Box
 95 |         ..strokeStyle = '#000000'
 96 |         ..strokeRect(5, 5, theCanvas.width - 10, theCanvas.height - 10);
 97 |     
 98 |     // Text
 99 |     context..textBaseline = textBaseline
100 |         ..textAlign = textAlign;
101 |     // Make sure to set your fonts prior to measureText or you will
102 |     // not get back accurate values.
103 |     // Here we use string interpolation instead of string concatentation.
104 |     context..font = '$fontWeight $fontStyle ${fontSize}px $fontFace'
105 |         ..shadowColor = shadowColor
106 |         ..shadowOffsetX = shadowX
107 |         ..shadowOffsetY = shadowY
108 |         ..shadowBlur = shadowBlur
109 |         ..globalAlpha = textAlpha;
110 |     
111 |     var xPosition = (theCanvas.width / 2);
112 |     var yPosition = theCanvas.height / 2;
113 |     
114 |     var metrics = context.measureText(message);
115 |     var textWidth = metrics.width;
116 |     
117 |     var tmpColor;
118 |     if(fillType == 'colorFill') {
119 |       tmpColor = textFillColor;
120 |     } else if(fillType == 'linearGradient') {
121 |       var gradient = context.createLinearGradient(xPosition - textWidth/2,
122 |           yPosition, textWidth, yPosition);
123 |       gradient..addColorStop(0, textFillColor)
124 |           ..addColorStop(0.6, textFillColor2);
125 |       tmpColor = gradient;
126 |     } else if(fillType == 'radialGradient') {
127 |       var gradient = context.createRadialGradient(xPosition, yPosition,
128 |           int.parse(fontSize), xPosition+textWidth, yPosition, 1);
129 |       gradient..addColorStop(0, textFillColor)
130 |           ..addColorStop(0.6, textFillColor2);
131 |       tmpColor = gradient;
132 |     } else if(fillType == 'pattern') {
133 |       tmpColor = context.createPatternFromImage(pattern, 'repeat');
134 |     } else {
135 |       tmpColor = textFillColor;
136 |     }
137 |     
138 |     switch(fillOrStroke) {
139 |       case 'fill': 
140 |         context..fillStyle = tmpColor
141 |             ..fillText(message, xPosition, yPosition);
142 |         break;
143 |       case 'stroke':
144 |         context..strokeStyle = tmpColor
145 |             ..strokeText(message, xPosition, yPosition);
146 |         break;
147 |       case 'both':
148 |         context..fillStyle = tmpColor
149 |             ..fillText(message, xPosition, yPosition)
150 |             ..strokeStyle = '#000000'
151 |             ..strokeText(message, xPosition, yPosition);
152 |         break;
153 |     }
154 |     
155 |   }
156 |   
157 |   void textBoxChanged(KeyboardEvent e) {
158 |     var target = e.target;
159 |     message = target.value;
160 |     drawScreen();
161 |   }
162 |   
163 |   void fillOrStrokeChanged(Event e) {
164 |     var target = e.target;
165 |     fillOrStroke = target.value;
166 |     drawScreen();
167 |   }
168 |   
169 |   
170 |   void textSizeChanged(Event e) {
171 |     var target = e.target;
172 |     fontSize = target.value;
173 |     drawScreen();
174 | 
175 |   }
176 |   
177 |   void textFillColorChanged(Event e) {
178 |     var target = e.target;
179 |     textFillColor = target.value;
180 |     // Check to make sure it starts with a hash sign.
181 |     if(!textFillColor.startsWith('#')) {
182 |       textFillColor = '#$textFillColor';
183 |     }
184 |     drawScreen();
185 |   }
186 |   
187 |   void textFontChanged(Event e) {
188 |     var target = e.target;
189 |     fontFace = target.value;
190 |     drawScreen();
191 |   }
192 |   
193 |   void textBaselineChanged(Event e) {
194 |     var target = e.target;
195 |     textBaseline = target.value;
196 |     drawScreen();
197 |   }
198 |   
199 |   void textAlignChanged(Event e) {
200 |     var target = e.target;
201 |     textAlign = target.value;
202 |     drawScreen();
203 |   }
204 |   
205 |   void fontWeightChanged(Event e) {
206 |     var target = e.target;
207 |     fontWeight = target.value;
208 |     drawScreen();
209 |   }
210 |   
211 |   void fontStyleChanged(Event e) {
212 |     var target = e.target;
213 |     fontStyle = target.value;
214 |     drawScreen();
215 |   }
216 |   
217 |   void shadowXChanged(Event e) {
218 |     var target = e.target;
219 |     shadowX = target.valueAsNumber;
220 |     drawScreen();
221 |   }
222 |   
223 |   void shadowYChanged(Event e) {
224 |     var target = e.target;
225 |     shadowY = target.valueAsNumber;
226 |     drawScreen();
227 |   }
228 |   
229 |   void shadowBlurChanged(Event e) {
230 |     var target = e.target;
231 |     shadowBlur = target.valueAsNumber;
232 |     drawScreen();
233 |   }
234 |   
235 |   void shadowColorChanged(Event e) {
236 |     var target = e.target;
237 |     shadowColor = target.value;
238 |     drawScreen();
239 |   }
240 |   
241 |   void textAlphaChanged(Event e) {
242 |     var target = e.target;
243 |     textAlpha = target.valueAsNumber;
244 |     drawScreen();
245 |   }
246 |   
247 |   void textFillColor2Changed(Event e) {
248 |     var target = e.target;
249 |     textFillColor2 = target.value;
250 |     // Check to make sure it starts with a hash sign.
251 |     if(!textFillColor2.startsWith('#')) {
252 |       textFillColor = '#$textFillColor2';
253 |     }
254 |     drawScreen();
255 |   }
256 |   
257 |   void fillTypeChanged(Event e) {
258 |     var target = e.target;
259 |     fillType = target.value;
260 |     drawScreen();
261 |   }
262 |   
263 |   void canvasWidthChanged(Event e) {
264 |     var target = e.target;
265 |     theCanvas.width = target.valueAsNumber.toInt();
266 |     drawScreen();
267 |   }
268 |   
269 |   void canvasHeightChanged(Event e) {
270 |     var target = e.target;
271 |     theCanvas.height = target.valueAsNumber.toInt();
272 |     drawScreen();
273 |   }
274 |   
275 |   void canvasStyleSizeChanged(Event e) {
276 |     var styleWidth = querySelector('#canvasStyleWidth');
277 |     var styleHeight = querySelector('#canvasStyleHeight');
278 |     theCanvas.style..width = '${styleWidth.value}px'
279 |         ..height = '${styleHeight.value}px';
280 |     drawScreen();
281 |   }
282 |   
283 |   void createImageDataPressed(Event e) {
284 |     e.preventDefault();
285 |     var imageDataDisplay = querySelector('#imageDataDisplay') as TextAreaElement;
286 |     imageDataDisplay.value = theCanvas.toDataUrl();
287 |     window.open(imageDataDisplay.value, 'canvasImage', 
288 |         'left=0,top=0,width=${theCanvas.width}, height=${theCanvas.height},'
289 |         'toolbar=0,resizable=0');
290 |   }
291 | }
292 | 
293 | void main() {
294 |   var canvasApp = new CanvasApp();
295 |   canvasApp.drawScreen();
296 | }


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | HTML5 Canvas
  2 | ============
  3 | 
  4 | A Dart port of the HTML5 Canvas (2nd Edition) Samples. The samples contained
  5 | here are all based entirely off of the works: HTML5 Canvas, Second Edition
  6 | by Steve Fulton and Jeff Fulton (O'Reilly). Copyright 2013 8bitrocket Studios
  7 | ISBN: 978-1-449-33498-7. The samples are reproduced under the MIT License
  8 | (See included LICENSE file) with permission from O’Reilly Media, Inc. 
  9 | Copyright 2013.
 10 | 
 11 | About The Port
 12 | --------------
 13 | 
 14 | The aim of this project is to provide Dart versions of the examples used in
 15 | the *HTML5 Canvas (2nd Edition)*. Where possible I've remained true to the
 16 | examples rather than implementing any optimizations. However I have tried to 
 17 | use common Dart idioms whenever I can. The original goal of the book is to
 18 | teach readers the HTML5 Canvas and related APIs, not game programming
 19 | optimizations.
 20 | (Also see Bob Nystrom's book in progress: [Game Programming Patterns](http://gameprogrammingpatterns.com/))
 21 | 
 22 | The examples are located in the web/ directory per Pub's 
 23 | [Package Layout Conventions](http://pub.dartlang.org/doc/package-layout.html).
 24 | Within that directory, each chapter is broken down into its own directory.
 25 | In chapter 1, I have omitted the first couple of samples as they do not 
 26 | pertain directly to Dart. I have included the base template used for many
 27 | of the samples.
 28 | 
 29 | I varied from the book samples by keeping the HTML, stylesheets and Dart code
 30 | in their own separate files to more clearly display the specific code.
 31 | Additionally I find this helps conceptionally when compiling to JavaScript.
 32 | 
 33 | While the source is heavily commented, I **highly** recommend that you read 
 34 | [HTML5 Canvas, 2nd Edition](http://shop.oreilly.com/product/0636920026266.do) while
 35 | following the samples. They have also generously made this book available for 
 36 | [reading online](http://chimera.labs.oreilly.com/books/1234000001654/index.html).
 37 | 
 38 | The Examples
 39 | ------------
 40 | * [Chapter 1](https://github.com/butlermatt/dart_HTML5_Canvas/tree/master/web/ch1)
 41 |     * Example 3 - Your First Canvas Application \[[.html](https://github.com/butlermatt/dart_HTML5_Canvas/blob/master/web/ch1/ch1ex3.html)\]
 42 | \[[.dart](https://github.com/butlermatt/dart_HTML5_Canvas/blob/master/web/ch1/ch1ex3.dart)\]
 43 |     * Example 4 - Guess The Letter Game \[[.html](https://github.com/butlermatt/dart_HTML5_Canvas/blob/master/web/ch1/ch1ex4.html)\]
 44 | \[[.dart](https://github.com/butlermatt/dart_HTML5_Canvas/blob/master/web/ch1/ch1ex4.dart)\]
 45 |     * Example 5 - Hello World Animated \[[.html](https://github.com/butlermatt/dart_HTML5_Canvas/blob/master/web/ch1/ch1ex5.html)\]
 46 | \[[.dart](https://github.com/butlermatt/dart_HTML5_Canvas/blob/master/web/ch1/ch1ex5.dart)\]
 47 |     * Example 6 - Canvas Sub DOM Example \[[.html](https://github.com/butlermatt/dart_HTML5_Canvas/blob/master/web/ch1/ch1ex6.html)\]
 48 | \[[.dart](https://github.com/butlermatt/dart_HTML5_Canvas/blob/master/web/ch1/ch1ex6.dart)\]
 49 | * [Chapter 2](https://github.com/butlermatt/dart_HTML5_Canvas/tree/master/web/ch2)
 50 |     * Example 1 - Basic Rectangles \[[.html](https://github.com/butlermatt/dart_HTML5_Canvas/blob/master/web/ch2/ch2ex1.html)\]
 51 | \[[.dart](https://github.com/butlermatt/dart_HTML5_Canvas/blob/master/web/ch2/ch2ex1.dart)\]
 52 |     * Example 2 - Basic Paths \[[.html](https://github.com/butlermatt/dart_HTML5_Canvas/blob/master/web/ch2/ch2ex2.html)\]
 53 | \[[.dart](https://github.com/butlermatt/dart_HTML5_Canvas/blob/master/web/ch2/ch2ex2.dart)\]
 54 |     * Example 3 - Basic Line Joins \[[.html](https://github.com/butlermatt/dart_HTML5_Canvas/blob/master/web/ch2/ch2ex3.html)\]
 55 | \[[.dart](https://github.com/butlermatt/dart_HTML5_Canvas/blob/master/web/ch2/ch2ex3.dart)\]
 56 |     * Example 4 - Arcs, Curves, and beziers \[[.html](https://github.com/butlermatt/dart_HTML5_Canvas/blob/master/web/ch2/ch2ex4.html)\]
 57 | \[[.dart](https://github.com/butlermatt/dart_HTML5_Canvas/blob/master/web/ch2/ch2ex4.dart)\]
 58 |     * Example 5 - Clipping Regions \[[.html](https://github.com/butlermatt/dart_HTML5_Canvas/blob/master/web/ch2/ch2ex5.html)\]
 59 | \[[.dart](https://github.com/butlermatt/dart_HTML5_Canvas/blob/master/web/ch2/ch2ex5.dart)\]
 60 |     * Example 6 - Compositing and Global Alpha \[[.html](https://github.com/butlermatt/dart_HTML5_Canvas/blob/master/web/ch2/ch2ex6.html)\]
 61 | \[[.dart](https://github.com/butlermatt/dart_HTML5_Canvas/blob/master/web/ch2/ch2ex6.dart)\]
 62 |     * Example 7 - Rotation Transformation #1 \[[.html](https://github.com/butlermatt/dart_HTML5_Canvas/blob/master/web/ch2/ch2ex7.html)\]
 63 | \[[.dart](https://github.com/butlermatt/dart_HTML5_Canvas/blob/master/web/ch2/ch2ex7.dart)\]
 64 |     * Example 8 - Rotation Transformation #2 \[[.html](https://github.com/butlermatt/dart_HTML5_Canvas/blob/master/web/ch2/ch2ex8.html)\]
 65 | \[[.dart](https://github.com/butlermatt/dart_HTML5_Canvas/blob/master/web/ch2/ch2ex8.dart)\]
 66 |     * Example 9 - Rotation Transformation #3 \[[.html](https://github.com/butlermatt/dart_HTML5_Canvas/blob/master/web/ch2/ch2ex9.html)\]
 67 | \[[.dart](https://github.com/butlermatt/dart_HTML5_Canvas/blob/master/web/ch2/ch2ex9.dart)\]
 68 |     * Example 10 - Rotation Transformation Multi Example \[[.html](https://github.com/butlermatt/dart_HTML5_Canvas/blob/master/web/ch2/ch2ex10.html)\]
 69 | \[[.dart](https://github.com/butlermatt/dart_HTML5_Canvas/blob/master/web/ch2/ch2ex10.dart)\]
 70 |     * Example 11 - Scale Transformation #1 \[[.html](https://github.com/butlermatt/dart_HTML5_Canvas/blob/master/web/ch2/ch2ex11.html)\]
 71 | \[[.dart](https://github.com/butlermatt/dart_HTML5_Canvas/blob/master/web/ch2/ch2ex11.dart)\]
 72 |     * Example 12 - Combined Scale and Rotation \[[.html](https://github.com/butlermatt/dart_HTML5_Canvas/blob/master/web/ch2/ch2ex12.html)\]
 73 | \[[.dart](https://github.com/butlermatt/dart_HTML5_Canvas/blob/master/web/ch2/ch2ex12.dart)\]
 74 |     * Example 13 - Combined Scale and Rotation #2 \[[.html](https://github.com/butlermatt/dart_HTML5_Canvas/blob/master/web/ch2/ch2ex13.html)\]
 75 | \[[.dart](https://github.com/butlermatt/dart_HTML5_Canvas/blob/master/web/ch2/ch2ex13.dart)\]
 76 |     * Example 14 - Simple Linear Gradients \[[.html](https://github.com/butlermatt/dart_HTML5_Canvas/blob/master/web/ch2/ch2ex14.html)\]
 77 | \[[.dart](https://github.com/butlermatt/dart_HTML5_Canvas/blob/master/web/ch2/ch2ex14.dart)\]
 78 |     * Example 15 - Simple Linear Gradients #2 \[[.html](https://github.com/butlermatt/dart_HTML5_Canvas/blob/master/web/ch2/ch2ex15.html)\]
 79 | \[[.dart](https://github.com/butlermatt/dart_HTML5_Canvas/blob/master/web/ch2/ch2ex15.dart)\]
 80 |     * Example 16 - Simple Linear Gradients #3 - Horizontal Stroke Rects \[[.html](https://github.com/butlermatt/dart_HTML5_Canvas/blob/master/web/ch2/ch2ex16.html)\]
 81 | \[[.dart](https://github.com/butlermatt/dart_HTML5_Canvas/blob/master/web/ch2/ch2ex16.dart)\]
 82 |     * Example 17 - Simple Linear Gradients #4 - Complex Shape \[[.html](https://github.com/butlermatt/dart_HTML5_Canvas/blob/master/web/ch2/ch2ex17.html)\]
 83 | \[[.dart](https://github.com/butlermatt/dart_HTML5_Canvas/blob/master/web/ch2/ch2ex17.dart)\]
 84 |     * Example 18 - Simple Linear Gradients #5 - Vertical Complex Shape \[[.html](https://github.com/butlermatt/dart_HTML5_Canvas/blob/master/web/ch2/ch2ex18.html)\]
 85 | \[[.dart](https://github.com/butlermatt/dart_HTML5_Canvas/blob/master/web/ch2/ch2ex18.dart)\]
 86 |     * Example 19 - Simple Linear Gradients #6 - Vertical Stroke Shape \[[.html](https://github.com/butlermatt/dart_HTML5_Canvas/blob/master/web/ch2/ch2ex19.html)\]
 87 | \[[.dart](https://github.com/butlermatt/dart_HTML5_Canvas/blob/master/web/ch2/ch2ex19.dart)\]
 88 |     * Example 20 - Simple Diagonal Gradient \[[.html](https://github.com/butlermatt/dart_HTML5_Canvas/blob/master/web/ch2/ch2ex20.html)\]
 89 | \[[.dart](https://github.com/butlermatt/dart_HTML5_Canvas/blob/master/web/ch2/ch2ex20.dart)\]
 90 |     * Example 21 - Simple Radial Gradient #1 \[[.html](https://github.com/butlermatt/dart_HTML5_Canvas/blob/master/web/ch2/ch2ex21.html)\]
 91 | \[[.dart](https://github.com/butlermatt/dart_HTML5_Canvas/blob/master/web/ch2/ch2ex21.dart)\]
 92 |     * Example 22 - Simple Radial Gradient #2 \[[.html](https://github.com/butlermatt/dart_HTML5_Canvas/blob/master/web/ch2/ch2ex22.html)\]
 93 | \[[.dart](https://github.com/butlermatt/dart_HTML5_Canvas/blob/master/web/ch2/ch2ex22.dart)\]
 94 |     * Example 23 - Simple Radial Gradient #3 - Arc \[[.html](https://github.com/butlermatt/dart_HTML5_Canvas/blob/master/web/ch2/ch2ex23.html)\]
 95 | \[[.dart](https://github.com/butlermatt/dart_HTML5_Canvas/blob/master/web/ch2/ch2ex23.dart)\]
 96 |     * Example 24 - Simple Radial Gradient #4 - Arc Stroke \[[.html](https://github.com/butlermatt/dart_HTML5_Canvas/blob/master/web/ch2/ch2ex24.html)\]
 97 | \[[.dart](https://github.com/butlermatt/dart_HTML5_Canvas/blob/master/web/ch2/ch2ex24.dart)\]
 98 |     * Example 25 - Fill Pattern Example #1 \[[.html](https://github.com/butlermatt/dart_HTML5_Canvas/blob/master/web/ch2/ch2ex25.html)\]
 99 | \[[.dart](https://github.com/butlermatt/dart_HTML5_Canvas/blob/master/web/ch2/ch2ex25.dart)\]
100 |     * Example 26 - Fill Pattern Example #2 \[[.html](https://github.com/butlermatt/dart_HTML5_Canvas/blob/master/web/ch2/ch2ex26.html)\]
101 | \[[.dart](https://github.com/butlermatt/dart_HTML5_Canvas/blob/master/web/ch2/ch2ex26.dart)\]
102 |     * Example 27 - Shadow Examples \[[.html](https://github.com/butlermatt/dart_HTML5_Canvas/blob/master/web/ch2/ch2ex27.html)\]
103 | \[[.dart](https://github.com/butlermatt/dart_HTML5_Canvas/blob/master/web/ch2/ch2ex27.dart)\]
104 |     * Example 28 - Animating a Path \[[.html](https://github.com/butlermatt/dart_HTML5_Canvas/blob/master/web/ch2/ch2ex28.html)\]
105 | \[[.dart](https://github.com/butlermatt/dart_HTML5_Canvas/blob/master/web/ch2/ch2ex28.dart)\]
106 | * [Chapter 3](https://github.com/butlermatt/dart_HTML5_Canvas/tree/master/web/ch3)
107 |     * Example 1 - Text Arranger Version 1.0 \[[.html](https://github.com/butlermatt/dart_HTML5_Canvas/blob/master/web/ch3/ch3ex1.html)\]
108 | \[[.dart](https://github.com/butlermatt/dart_HTML5_Canvas/blob/master/web/ch3/ch3ex1.dart)\]
109 |     * Example 2 - Text Arranger Version 2.0 \[[.html](https://github.com/butlermatt/dart_HTML5_Canvas/blob/master/web/ch3/ch3ex2.html)\]
110 | \[[.dart](https://github.com/butlermatt/dart_HTML5_Canvas/blob/master/web/ch3/ch3ex2.dart)\]
111 |     * Example 3 - Text Arranger Version 3.0 \[[.html](https://github.com/butlermatt/dart_HTML5_Canvas/blob/master/web/ch3/ch3ex3.html)\]
112 | \[[.dart](https://github.com/butlermatt/dart_HTML5_Canvas/blob/master/web/ch3/ch3ex3.dart)\]


--------------------------------------------------------------------------------