├── ch11 ├── example-11.1 │ ├── example.js │ └── example.html ├── example-11.3 │ ├── icon-ipad.png │ ├── startup-iphone.png │ ├── startup-iphone4.png │ ├── startup-iPad-portrait.png │ └── startup-iPad-landscape.png └── example-11.5 │ ├── icon-ipad.png │ ├── startup-iPad-portrait.png │ └── startup-iPad-landscape.png ├── shared └── images │ ├── sky.png │ ├── arch.png │ ├── bomb.png │ ├── camp.png │ ├── grass.png │ ├── tree.png │ ├── bucket.png │ ├── canyon.png │ ├── grass2.png │ ├── smalltree.png │ ├── waterfall.png │ ├── countrypath.jpg │ ├── curved-road.png │ ├── grand-canyon.png │ ├── log-crossing.png │ ├── lonelybeach.png │ ├── tree-twotrunks.png │ └── running-sprite-sheet.png ├── ch03 ├── example-3.2 │ ├── cloth.png │ ├── redball.png │ └── example.html ├── example-3.7 │ └── example.html ├── example-3.9 │ └── example.html ├── example-3.5 │ └── example.html ├── example-3.8 │ └── example.html ├── example-3.3 │ └── example.html ├── example-3.4 │ └── example.html ├── example-3.12 │ └── text.js └── example-3.1 │ └── example.html ├── ch09 ├── ungame │ ├── sounds │ │ ├── pop.mp3 │ │ ├── pop.ogg │ │ ├── whoosh.mp3 │ │ └── whoosh.ogg │ └── images │ │ ├── image1.png │ │ ├── image10.png │ │ ├── image11.png │ │ ├── image12.png │ │ ├── image2.png │ │ ├── image3.png │ │ ├── image4.png │ │ ├── image5.png │ │ ├── image6.png │ │ ├── image7.png │ │ ├── image8.png │ │ └── image9.png └── pinball │ ├── images │ ├── ball.png │ ├── tryAgain.png │ ├── actuator-0.png │ ├── actuator-1.png │ ├── actuator-2.png │ ├── actuator-3.png │ ├── actuator-4.png │ ├── actuator-5.png │ ├── actuator-6.png │ ├── actuator-7.png │ ├── background.png │ ├── leftFlipper.png │ ├── rightFlipper.png │ ├── fiftyBumperBright.png │ ├── pinball-withballs.png │ ├── fiveXBumperLeftBright.png │ ├── fiveXBumperRightBright.png │ ├── oneHundredBumperBright.png │ ├── oneXBumperLeftBright.png │ ├── oneXBumperRightBright.png │ ├── pinball-with-flippers.png │ ├── twoXBumperLeftBright.png │ ├── twoXBumperRightBright.png │ └── fiveHundredBumperBright.png │ └── sounds │ ├── bumper.ogg │ ├── flipper.ogg │ ├── jingle.mp3 │ ├── jingle.ogg │ ├── pinball.ogg │ └── ballRolling.ogg ├── ch02 ├── example-2.5 │ ├── redball.png │ └── example.html ├── example-2.12 │ ├── example.js │ └── example.html ├── example-2.1 │ ├── example.js │ └── example.html ├── example-2.3 │ ├── example.html │ └── example.js ├── example-2.2 │ ├── example.html │ └── example.js ├── example-2.4 │ ├── example.html │ └── example.js ├── example-2.20 │ └── example.html ├── example-2.17 │ ├── example.html │ └── example.js ├── example-2.22 │ ├── example.js │ └── example.html ├── section-2.13.2.3 │ └── example.html ├── example-2.18 │ └── example.html ├── example-2.13 │ ├── example.html │ └── example.js ├── example-2.14 │ └── example.html ├── example-2.24 │ └── example.html ├── example-2.9 │ └── example.html ├── example-2.21 │ └── example.html ├── example-2.35 │ └── example.html ├── example-2.11 │ └── example.html ├── example-2.23 │ └── example.html └── example-2.10 │ └── example.html ├── ch06 ├── example-6.10 │ ├── fuse-00.png │ ├── fuse-01.png │ ├── fuse-02.png │ ├── fuse-03.png │ ├── fuse-04.png │ ├── fuse-05.png │ ├── fuse-06.png │ ├── fuse-07.png │ ├── fuse-08.png │ ├── bomb-no-fuse.png │ ├── explosion-00.png │ ├── explosion-01.png │ ├── explosion-02.png │ ├── explosion-03.png │ ├── explosion-04.png │ ├── explosion-05.png │ ├── explosion-06.png │ ├── explosion-07.png │ └── explosion-08.png ├── example-6.5 │ ├── example.js │ └── example.html ├── example-6.1 │ └── example.html ├── example-6.9 │ └── example.html ├── example-6.2 │ └── example.html └── example-6.7 │ └── example.html ├── ch04 ├── example-4.1 │ ├── countrypath.jpg │ ├── example.js │ └── example.html ├── example-4.23 │ ├── README.txt │ ├── example.js │ └── example.html ├── example-4.25 │ └── README.txt ├── example-4.16 │ ├── sunglassFilter.js │ └── example.html ├── example-4.18 │ ├── sunglassFilter.js │ └── example.html ├── example-4.13 │ ├── example.js │ └── example.html ├── example-4.2 │ ├── example.html │ └── example.js ├── example-4.12 │ └── example.html ├── example-4.9 │ └── example.html ├── example-4.14 │ └── example.html ├── example-4.15 │ └── example.html ├── example-4.19 │ └── example.html └── example-4.20 │ └── example.html ├── ch08 ├── section-8.4.1.6 │ ├── golfball.png │ ├── tennis-ball.png │ └── example.html ├── example-8.8 │ └── example.html ├── example-8.19 │ └── example.html ├── example-8.1 │ └── example.html ├── example-8.10 │ └── example.html └── example-8.20 │ └── example.html ├── ch10 ├── example-10.10 │ └── pencilsAndBrush.jpg ├── example-10.4 │ └── example.js └── example-10.1 │ └── example.js ├── LICENSE.txt ├── ch01 ├── example-1.3 │ ├── example.js │ └── example.html ├── example-1.1 │ ├── example.js │ └── example.html ├── example-1.4 │ └── example.html ├── example-1.13 │ └── example.html ├── example-1.5 │ └── example.html └── example-1.11 │ └── example.html ├── ch07 └── example-7.5 │ └── example.html └── ch05 ├── example-5.12 └── example.html ├── example-5.17 └── example.html ├── example-5.15 └── example.html ├── example-5.11 └── example.html └── example-5.9 └── example.html /ch11/example-11.1/example.js: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /shared/images/sky.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/corehtml5canvas/code/HEAD/shared/images/sky.png -------------------------------------------------------------------------------- /shared/images/arch.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/corehtml5canvas/code/HEAD/shared/images/arch.png -------------------------------------------------------------------------------- /shared/images/bomb.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/corehtml5canvas/code/HEAD/shared/images/bomb.png -------------------------------------------------------------------------------- /shared/images/camp.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/corehtml5canvas/code/HEAD/shared/images/camp.png -------------------------------------------------------------------------------- /shared/images/grass.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/corehtml5canvas/code/HEAD/shared/images/grass.png -------------------------------------------------------------------------------- /shared/images/tree.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/corehtml5canvas/code/HEAD/shared/images/tree.png -------------------------------------------------------------------------------- /ch03/example-3.2/cloth.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/corehtml5canvas/code/HEAD/ch03/example-3.2/cloth.png -------------------------------------------------------------------------------- /ch09/ungame/sounds/pop.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/corehtml5canvas/code/HEAD/ch09/ungame/sounds/pop.mp3 -------------------------------------------------------------------------------- /ch09/ungame/sounds/pop.ogg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/corehtml5canvas/code/HEAD/ch09/ungame/sounds/pop.ogg -------------------------------------------------------------------------------- /shared/images/bucket.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/corehtml5canvas/code/HEAD/shared/images/bucket.png -------------------------------------------------------------------------------- /shared/images/canyon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/corehtml5canvas/code/HEAD/shared/images/canyon.png -------------------------------------------------------------------------------- /shared/images/grass2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/corehtml5canvas/code/HEAD/shared/images/grass2.png -------------------------------------------------------------------------------- /ch02/example-2.5/redball.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/corehtml5canvas/code/HEAD/ch02/example-2.5/redball.png -------------------------------------------------------------------------------- /ch03/example-3.2/redball.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/corehtml5canvas/code/HEAD/ch03/example-3.2/redball.png -------------------------------------------------------------------------------- /ch09/pinball/images/ball.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/corehtml5canvas/code/HEAD/ch09/pinball/images/ball.png -------------------------------------------------------------------------------- /shared/images/smalltree.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/corehtml5canvas/code/HEAD/shared/images/smalltree.png -------------------------------------------------------------------------------- /shared/images/waterfall.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/corehtml5canvas/code/HEAD/shared/images/waterfall.png -------------------------------------------------------------------------------- /ch06/example-6.10/fuse-00.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/corehtml5canvas/code/HEAD/ch06/example-6.10/fuse-00.png -------------------------------------------------------------------------------- /ch06/example-6.10/fuse-01.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/corehtml5canvas/code/HEAD/ch06/example-6.10/fuse-01.png -------------------------------------------------------------------------------- /ch06/example-6.10/fuse-02.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/corehtml5canvas/code/HEAD/ch06/example-6.10/fuse-02.png -------------------------------------------------------------------------------- /ch06/example-6.10/fuse-03.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/corehtml5canvas/code/HEAD/ch06/example-6.10/fuse-03.png -------------------------------------------------------------------------------- /ch06/example-6.10/fuse-04.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/corehtml5canvas/code/HEAD/ch06/example-6.10/fuse-04.png -------------------------------------------------------------------------------- /ch06/example-6.10/fuse-05.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/corehtml5canvas/code/HEAD/ch06/example-6.10/fuse-05.png -------------------------------------------------------------------------------- /ch06/example-6.10/fuse-06.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/corehtml5canvas/code/HEAD/ch06/example-6.10/fuse-06.png -------------------------------------------------------------------------------- /ch06/example-6.10/fuse-07.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/corehtml5canvas/code/HEAD/ch06/example-6.10/fuse-07.png -------------------------------------------------------------------------------- /ch06/example-6.10/fuse-08.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/corehtml5canvas/code/HEAD/ch06/example-6.10/fuse-08.png -------------------------------------------------------------------------------- /ch09/pinball/sounds/bumper.ogg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/corehtml5canvas/code/HEAD/ch09/pinball/sounds/bumper.ogg -------------------------------------------------------------------------------- /ch09/pinball/sounds/flipper.ogg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/corehtml5canvas/code/HEAD/ch09/pinball/sounds/flipper.ogg -------------------------------------------------------------------------------- /ch09/pinball/sounds/jingle.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/corehtml5canvas/code/HEAD/ch09/pinball/sounds/jingle.mp3 -------------------------------------------------------------------------------- /ch09/pinball/sounds/jingle.ogg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/corehtml5canvas/code/HEAD/ch09/pinball/sounds/jingle.ogg -------------------------------------------------------------------------------- /ch09/pinball/sounds/pinball.ogg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/corehtml5canvas/code/HEAD/ch09/pinball/sounds/pinball.ogg -------------------------------------------------------------------------------- /ch09/ungame/images/image1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/corehtml5canvas/code/HEAD/ch09/ungame/images/image1.png -------------------------------------------------------------------------------- /ch09/ungame/images/image10.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/corehtml5canvas/code/HEAD/ch09/ungame/images/image10.png -------------------------------------------------------------------------------- /ch09/ungame/images/image11.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/corehtml5canvas/code/HEAD/ch09/ungame/images/image11.png -------------------------------------------------------------------------------- /ch09/ungame/images/image12.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/corehtml5canvas/code/HEAD/ch09/ungame/images/image12.png -------------------------------------------------------------------------------- /ch09/ungame/images/image2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/corehtml5canvas/code/HEAD/ch09/ungame/images/image2.png -------------------------------------------------------------------------------- /ch09/ungame/images/image3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/corehtml5canvas/code/HEAD/ch09/ungame/images/image3.png -------------------------------------------------------------------------------- /ch09/ungame/images/image4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/corehtml5canvas/code/HEAD/ch09/ungame/images/image4.png -------------------------------------------------------------------------------- /ch09/ungame/images/image5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/corehtml5canvas/code/HEAD/ch09/ungame/images/image5.png -------------------------------------------------------------------------------- /ch09/ungame/images/image6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/corehtml5canvas/code/HEAD/ch09/ungame/images/image6.png -------------------------------------------------------------------------------- /ch09/ungame/images/image7.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/corehtml5canvas/code/HEAD/ch09/ungame/images/image7.png -------------------------------------------------------------------------------- /ch09/ungame/images/image8.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/corehtml5canvas/code/HEAD/ch09/ungame/images/image8.png -------------------------------------------------------------------------------- /ch09/ungame/images/image9.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/corehtml5canvas/code/HEAD/ch09/ungame/images/image9.png -------------------------------------------------------------------------------- /ch09/ungame/sounds/whoosh.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/corehtml5canvas/code/HEAD/ch09/ungame/sounds/whoosh.mp3 -------------------------------------------------------------------------------- /ch09/ungame/sounds/whoosh.ogg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/corehtml5canvas/code/HEAD/ch09/ungame/sounds/whoosh.ogg -------------------------------------------------------------------------------- /ch11/example-11.3/icon-ipad.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/corehtml5canvas/code/HEAD/ch11/example-11.3/icon-ipad.png -------------------------------------------------------------------------------- /ch11/example-11.5/icon-ipad.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/corehtml5canvas/code/HEAD/ch11/example-11.5/icon-ipad.png -------------------------------------------------------------------------------- /shared/images/countrypath.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/corehtml5canvas/code/HEAD/shared/images/countrypath.jpg -------------------------------------------------------------------------------- /shared/images/curved-road.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/corehtml5canvas/code/HEAD/shared/images/curved-road.png -------------------------------------------------------------------------------- /shared/images/grand-canyon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/corehtml5canvas/code/HEAD/shared/images/grand-canyon.png -------------------------------------------------------------------------------- /shared/images/log-crossing.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/corehtml5canvas/code/HEAD/shared/images/log-crossing.png -------------------------------------------------------------------------------- /shared/images/lonelybeach.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/corehtml5canvas/code/HEAD/shared/images/lonelybeach.png -------------------------------------------------------------------------------- /ch04/example-4.1/countrypath.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/corehtml5canvas/code/HEAD/ch04/example-4.1/countrypath.jpg -------------------------------------------------------------------------------- /ch08/section-8.4.1.6/golfball.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/corehtml5canvas/code/HEAD/ch08/section-8.4.1.6/golfball.png -------------------------------------------------------------------------------- /ch09/pinball/images/tryAgain.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/corehtml5canvas/code/HEAD/ch09/pinball/images/tryAgain.png -------------------------------------------------------------------------------- /shared/images/tree-twotrunks.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/corehtml5canvas/code/HEAD/shared/images/tree-twotrunks.png -------------------------------------------------------------------------------- /ch06/example-6.10/bomb-no-fuse.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/corehtml5canvas/code/HEAD/ch06/example-6.10/bomb-no-fuse.png -------------------------------------------------------------------------------- /ch06/example-6.10/explosion-00.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/corehtml5canvas/code/HEAD/ch06/example-6.10/explosion-00.png -------------------------------------------------------------------------------- /ch06/example-6.10/explosion-01.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/corehtml5canvas/code/HEAD/ch06/example-6.10/explosion-01.png -------------------------------------------------------------------------------- /ch06/example-6.10/explosion-02.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/corehtml5canvas/code/HEAD/ch06/example-6.10/explosion-02.png -------------------------------------------------------------------------------- /ch06/example-6.10/explosion-03.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/corehtml5canvas/code/HEAD/ch06/example-6.10/explosion-03.png -------------------------------------------------------------------------------- /ch06/example-6.10/explosion-04.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/corehtml5canvas/code/HEAD/ch06/example-6.10/explosion-04.png -------------------------------------------------------------------------------- /ch06/example-6.10/explosion-05.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/corehtml5canvas/code/HEAD/ch06/example-6.10/explosion-05.png -------------------------------------------------------------------------------- /ch06/example-6.10/explosion-06.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/corehtml5canvas/code/HEAD/ch06/example-6.10/explosion-06.png -------------------------------------------------------------------------------- /ch06/example-6.10/explosion-07.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/corehtml5canvas/code/HEAD/ch06/example-6.10/explosion-07.png -------------------------------------------------------------------------------- /ch06/example-6.10/explosion-08.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/corehtml5canvas/code/HEAD/ch06/example-6.10/explosion-08.png -------------------------------------------------------------------------------- /ch08/section-8.4.1.6/tennis-ball.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/corehtml5canvas/code/HEAD/ch08/section-8.4.1.6/tennis-ball.png -------------------------------------------------------------------------------- /ch09/pinball/images/actuator-0.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/corehtml5canvas/code/HEAD/ch09/pinball/images/actuator-0.png -------------------------------------------------------------------------------- /ch09/pinball/images/actuator-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/corehtml5canvas/code/HEAD/ch09/pinball/images/actuator-1.png -------------------------------------------------------------------------------- /ch09/pinball/images/actuator-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/corehtml5canvas/code/HEAD/ch09/pinball/images/actuator-2.png -------------------------------------------------------------------------------- /ch09/pinball/images/actuator-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/corehtml5canvas/code/HEAD/ch09/pinball/images/actuator-3.png -------------------------------------------------------------------------------- /ch09/pinball/images/actuator-4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/corehtml5canvas/code/HEAD/ch09/pinball/images/actuator-4.png -------------------------------------------------------------------------------- /ch09/pinball/images/actuator-5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/corehtml5canvas/code/HEAD/ch09/pinball/images/actuator-5.png -------------------------------------------------------------------------------- /ch09/pinball/images/actuator-6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/corehtml5canvas/code/HEAD/ch09/pinball/images/actuator-6.png -------------------------------------------------------------------------------- /ch09/pinball/images/actuator-7.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/corehtml5canvas/code/HEAD/ch09/pinball/images/actuator-7.png -------------------------------------------------------------------------------- /ch09/pinball/images/background.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/corehtml5canvas/code/HEAD/ch09/pinball/images/background.png -------------------------------------------------------------------------------- /ch09/pinball/images/leftFlipper.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/corehtml5canvas/code/HEAD/ch09/pinball/images/leftFlipper.png -------------------------------------------------------------------------------- /ch09/pinball/images/rightFlipper.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/corehtml5canvas/code/HEAD/ch09/pinball/images/rightFlipper.png -------------------------------------------------------------------------------- /ch09/pinball/sounds/ballRolling.ogg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/corehtml5canvas/code/HEAD/ch09/pinball/sounds/ballRolling.ogg -------------------------------------------------------------------------------- /ch11/example-11.3/startup-iphone.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/corehtml5canvas/code/HEAD/ch11/example-11.3/startup-iphone.png -------------------------------------------------------------------------------- /ch10/example-10.10/pencilsAndBrush.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/corehtml5canvas/code/HEAD/ch10/example-10.10/pencilsAndBrush.jpg -------------------------------------------------------------------------------- /ch11/example-11.3/startup-iphone4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/corehtml5canvas/code/HEAD/ch11/example-11.3/startup-iphone4.png -------------------------------------------------------------------------------- /shared/images/running-sprite-sheet.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/corehtml5canvas/code/HEAD/shared/images/running-sprite-sheet.png -------------------------------------------------------------------------------- /ch09/pinball/images/fiftyBumperBright.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/corehtml5canvas/code/HEAD/ch09/pinball/images/fiftyBumperBright.png -------------------------------------------------------------------------------- /ch09/pinball/images/pinball-withballs.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/corehtml5canvas/code/HEAD/ch09/pinball/images/pinball-withballs.png -------------------------------------------------------------------------------- /ch11/example-11.3/startup-iPad-portrait.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/corehtml5canvas/code/HEAD/ch11/example-11.3/startup-iPad-portrait.png -------------------------------------------------------------------------------- /ch11/example-11.5/startup-iPad-portrait.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/corehtml5canvas/code/HEAD/ch11/example-11.5/startup-iPad-portrait.png -------------------------------------------------------------------------------- /ch09/pinball/images/fiveXBumperLeftBright.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/corehtml5canvas/code/HEAD/ch09/pinball/images/fiveXBumperLeftBright.png -------------------------------------------------------------------------------- /ch09/pinball/images/fiveXBumperRightBright.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/corehtml5canvas/code/HEAD/ch09/pinball/images/fiveXBumperRightBright.png -------------------------------------------------------------------------------- /ch09/pinball/images/oneHundredBumperBright.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/corehtml5canvas/code/HEAD/ch09/pinball/images/oneHundredBumperBright.png -------------------------------------------------------------------------------- /ch09/pinball/images/oneXBumperLeftBright.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/corehtml5canvas/code/HEAD/ch09/pinball/images/oneXBumperLeftBright.png -------------------------------------------------------------------------------- /ch09/pinball/images/oneXBumperRightBright.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/corehtml5canvas/code/HEAD/ch09/pinball/images/oneXBumperRightBright.png -------------------------------------------------------------------------------- /ch09/pinball/images/pinball-with-flippers.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/corehtml5canvas/code/HEAD/ch09/pinball/images/pinball-with-flippers.png -------------------------------------------------------------------------------- /ch09/pinball/images/twoXBumperLeftBright.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/corehtml5canvas/code/HEAD/ch09/pinball/images/twoXBumperLeftBright.png -------------------------------------------------------------------------------- /ch09/pinball/images/twoXBumperRightBright.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/corehtml5canvas/code/HEAD/ch09/pinball/images/twoXBumperRightBright.png -------------------------------------------------------------------------------- /ch11/example-11.3/startup-iPad-landscape.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/corehtml5canvas/code/HEAD/ch11/example-11.3/startup-iPad-landscape.png -------------------------------------------------------------------------------- /ch11/example-11.5/startup-iPad-landscape.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/corehtml5canvas/code/HEAD/ch11/example-11.5/startup-iPad-landscape.png -------------------------------------------------------------------------------- /ch09/pinball/images/fiveHundredBumperBright.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/corehtml5canvas/code/HEAD/ch09/pinball/images/fiveHundredBumperBright.png -------------------------------------------------------------------------------- /ch04/example-4.23/README.txt: -------------------------------------------------------------------------------- 1 | Due to copyright restrictions, you need to put your own video file in this directory, and reference it in example.html for this example to work. 2 | -------------------------------------------------------------------------------- /ch04/example-4.25/README.txt: -------------------------------------------------------------------------------- 1 | Due to copyright restrictions, you need to put your own video file in this directory, and reference it in example.html for this example to work. 2 | -------------------------------------------------------------------------------- /LICENSE.txt: -------------------------------------------------------------------------------- 1 | Copyright (C) 2012 David Geary. 2 | 3 | This code is from the book Core HTML5 Canvas, published by Prentice-Hall in 2012. 4 | 5 | License: 6 | 7 | Permission is hereby granted, free of charge, to any person 8 | obtaining a copy of this software and associated documentation files 9 | (the "Software"), to deal in the Software without restriction, 10 | including without limitation the rights to use, copy, modify, merge, 11 | publish, distribute, sublicense, and/or sell copies of the Software, 12 | and to permit persons to whom the Software is furnished to do so, 13 | subject to the following conditions: 14 | 15 | The above copyright notice and this permission notice shall be 16 | included in all copies or substantial portions of the Software. 17 | 18 | The Software may not be used to create training material of any sort, 19 | including courses, books, instructional videos, presentations, etc. 20 | without the express written consent of David Geary. 21 | 22 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 23 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES 24 | OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND 25 | NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT 26 | HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, 27 | WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING 28 | FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR 29 | OTHER DEALINGS IN THE SOFTWARE. 30 | 31 | -------------------------------------------------------------------------------- /ch04/example-4.1/example.js: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright (C) 2012 David Geary. This code is from the book 3 | * Core HTML5 Canvas, published by Prentice-Hall in 2012. 4 | * 5 | * License: 6 | * 7 | * Permission is hereby granted, free of charge, to any person 8 | * obtaining a copy of this software and associated documentation files 9 | * (the "Software"), to deal in the Software without restriction, 10 | * including without limitation the rights to use, copy, modify, merge, 11 | * publish, distribute, sublicense, and/or sell copies of the Software, 12 | * and to permit persons to whom the Software is furnished to do so, 13 | * subject to the following conditions: 14 | * 15 | * The above copyright notice and this permission notice shall be 16 | * included in all copies or substantial portions of the Software. 17 | * 18 | * The Software may not be used to create training material of any sort, 19 | * including courses, books, instructional videos, presentations, etc. 20 | * without the express written consent of David Geary. 21 | * 22 | * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 23 | * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES 24 | * OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND 25 | * NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT 26 | * HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, 27 | * WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING 28 | * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR 29 | * OTHER DEALINGS IN THE SOFTWARE. 30 | */ 31 | 32 | var canvas = document.getElementById('canvas'), 33 | context = canvas.getContext('2d'), 34 | image = new Image(); 35 | 36 | image.src = '../../shared/images/countrypath.jpg'; 37 | image.onload = function(e) { 38 | context.drawImage(image, 0, 0); 39 | }; 40 | -------------------------------------------------------------------------------- /ch02/example-2.12/example.js: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright (C) 2012 David Geary. This code is from the book 3 | * Core HTML5 Canvas, published by Prentice-Hall in 2012. 4 | * 5 | * License: 6 | * 7 | * Permission is hereby granted, free of charge, to any person 8 | * obtaining a copy of this software and associated documentation files 9 | * (the "Software"), to deal in the Software without restriction, 10 | * including without limitation the rights to use, copy, modify, merge, 11 | * publish, distribute, sublicense, and/or sell copies of the Software, 12 | * and to permit persons to whom the Software is furnished to do so, 13 | * subject to the following conditions: 14 | * 15 | * The above copyright notice and this permission notice shall be 16 | * included in all copies or substantial portions of the Software. 17 | * 18 | * The Software may not be used to create training material of any sort, 19 | * including courses, books, instructional videos, presentations, etc. 20 | * without the express written consent of David Geary. 21 | * 22 | * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 23 | * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES 24 | * OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND 25 | * NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT 26 | * HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, 27 | * WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING 28 | * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR 29 | * OTHER DEALINGS IN THE SOFTWARE. 30 | */ 31 | 32 | var context = document.getElementById('canvas').getContext('2d'); 33 | 34 | context.lineWidth = 1; 35 | context.beginPath(); 36 | context.moveTo(50, 10); 37 | context.lineTo(450, 10); 38 | context.stroke(); 39 | 40 | context.beginPath(); 41 | context.moveTo(50.5, 50.5); 42 | context.lineTo(450.5, 50.5); 43 | context.stroke(); 44 | -------------------------------------------------------------------------------- /ch02/example-2.1/example.js: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright (C) 2012 David Geary. This code is from the book 3 | * Core HTML5 Canvas, published by Prentice-Hall in 2012. 4 | * 5 | * License: 6 | * 7 | * Permission is hereby granted, free of charge, to any person 8 | * obtaining a copy of this software and associated documentation files 9 | * (the "Software"), to deal in the Software without restriction, 10 | * including without limitation the rights to use, copy, modify, merge, 11 | * publish, distribute, sublicense, and/or sell copies of the Software, 12 | * and to permit persons to whom the Software is furnished to do so, 13 | * subject to the following conditions: 14 | * 15 | * The above copyright notice and this permission notice shall be 16 | * included in all copies or substantial portions of the Software. 17 | * 18 | * The Software may not be used to create training material of any sort, 19 | * including courses, books, instructional videos, presentations, etc. 20 | * without the express written consent of David Geary. 21 | * 22 | * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 23 | * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES 24 | * OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND 25 | * NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT 26 | * HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, 27 | * WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING 28 | * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR 29 | * OTHER DEALINGS IN THE SOFTWARE. 30 | */ 31 | 32 | var canvas = document.getElementById('canvas'), 33 | context = canvas.getContext('2d'); 34 | 35 | context.lineWidth = 30; 36 | 37 | context.font = '24px Helvetica'; 38 | context.fillText('Click anywhere to erase', 175, 40); 39 | 40 | context.strokeRect(75, 100, 200, 200); 41 | context.fillRect(325, 100, 200, 200); 42 | 43 | context.canvas.onmousedown = function (e) { 44 | context.clearRect(0, 0, canvas.width, canvas.height); 45 | }; 46 | -------------------------------------------------------------------------------- /ch02/example-2.3/example.html: -------------------------------------------------------------------------------- 1 | 2 | 32 | 33 | 34 | Linear Gradients 35 | 36 | 42 | 43 | 44 | 45 | 46 | Canvas not supported 47 | 48 | 49 | 50 | 51 | 52 | -------------------------------------------------------------------------------- /ch01/example-1.3/example.js: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright (C) 2012 David Geary. This code is from the book 3 | * Core HTML5 Canvas, published by Prentice-Hall in 2012. 4 | * 5 | * License: 6 | * 7 | * Permission is hereby granted, free of charge, to any person 8 | * obtaining a copy of this software and associated documentation files 9 | * (the "Software"), to deal in the Software without restriction, 10 | * including without limitation the rights to use, copy, modify, merge, 11 | * publish, distribute, sublicense, and/or sell copies of the Software, 12 | * and to permit persons to whom the Software is furnished to do so, 13 | * subject to the following conditions: 14 | * 15 | * The above copyright notice and this permission notice shall be 16 | * included in all copies or substantial portions of the Software. 17 | * 18 | * The Software may not be used to create training material of any sort, 19 | * including courses, books, instructional videos, presentations, etc. 20 | * without the express written consent of David Geary. 21 | * 22 | * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 23 | * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES 24 | * OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND 25 | * NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT 26 | * HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, 27 | * WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING 28 | * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR 29 | * OTHER DEALINGS IN THE SOFTWARE. 30 | */ 31 | 32 | var canvas = document.getElementById('canvas'), 33 | context = canvas.getContext('2d'); 34 | 35 | context.font = '38pt Arial'; 36 | context.fillStyle = 'cornflowerblue'; 37 | context.strokeStyle = 'blue'; 38 | 39 | context.fillText("Hello Canvas", canvas.width/2 - 150, 40 | canvas.height/2 + 15); 41 | 42 | context.strokeText("Hello Canvas", canvas.width/2 - 150, 43 | canvas.height/2 + 15); 44 | -------------------------------------------------------------------------------- /ch01/example-1.1/example.js: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright (C) 2012 David Geary. This code is from the book 3 | * Core HTML5 Canvas, published by Prentice-Hall in 2012. 4 | * 5 | * License: 6 | * 7 | * Permission is hereby granted, free of charge, to any person 8 | * obtaining a copy of this software and associated documentation files 9 | * (the "Software"), to deal in the Software without restriction, 10 | * including without limitation the rights to use, copy, modify, merge, 11 | * publish, distribute, sublicense, and/or sell copies of the Software, 12 | * and to permit persons to whom the Software is furnished to do so, 13 | * subject to the following conditions: 14 | * 15 | * The above copyright notice and this permission notice shall be 16 | * included in all copies or substantial portions of the Software. 17 | * 18 | * The Software may not be used to create training material of any sort, 19 | * including courses, books, instructional videos, presentations, etc. 20 | * without the express written consent of David Geary. 21 | * 22 | * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 23 | * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES 24 | * OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND 25 | * NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT 26 | * HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, 27 | * WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING 28 | * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR 29 | * OTHER DEALINGS IN THE SOFTWARE. 30 | */ 31 | 32 | var canvas = document.getElementById('canvas'), 33 | context = canvas.getContext('2d'); 34 | 35 | context.font = '38pt Arial'; 36 | context.fillStyle = 'cornflowerblue'; 37 | context.strokeStyle = 'blue'; 38 | 39 | context.fillText("Hello Canvas", canvas.width/2 - 150, 40 | canvas.height/2 + 15); 41 | 42 | context.strokeText("Hello Canvas", canvas.width/2 - 150, 43 | canvas.height/2 + 15 ); 44 | -------------------------------------------------------------------------------- /ch02/example-2.1/example.html: -------------------------------------------------------------------------------- 1 | 2 | 32 | 33 | 34 | Rectangles 35 | 36 | 46 | 47 | 48 | 49 | 50 | Canvas not supported 51 | 52 | 53 | 54 | 55 | 56 | -------------------------------------------------------------------------------- /ch02/example-2.3/example.js: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright (C) 2012 David Geary. This code is from the book 3 | * Core HTML5 Canvas, published by Prentice-Hall in 2012. 4 | * 5 | * License: 6 | * 7 | * Permission is hereby granted, free of charge, to any person 8 | * obtaining a copy of this software and associated documentation files 9 | * (the "Software"), to deal in the Software without restriction, 10 | * including without limitation the rights to use, copy, modify, merge, 11 | * publish, distribute, sublicense, and/or sell copies of the Software, 12 | * and to permit persons to whom the Software is furnished to do so, 13 | * subject to the following conditions: 14 | * 15 | * The above copyright notice and this permission notice shall be 16 | * included in all copies or substantial portions of the Software. 17 | * 18 | * The Software may not be used to create training material of any sort, 19 | * including courses, books, instructional videos, presentations, etc. 20 | * without the express written consent of David Geary. 21 | * 22 | * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 23 | * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES 24 | * OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND 25 | * NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT 26 | * HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, 27 | * WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING 28 | * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR 29 | * OTHER DEALINGS IN THE SOFTWARE. 30 | */ 31 | 32 | var canvas = document.getElementById('canvas'), 33 | context = canvas.getContext('2d'), 34 | gradient = context.createLinearGradient( 35 | 0, 0, 0, canvas.height/2); 36 | 37 | gradient.addColorStop(0, 'blue'); 38 | gradient.addColorStop(0.25, 'white'); 39 | gradient.addColorStop(0.5, 'purple'); 40 | gradient.addColorStop(0.75, 'red'); 41 | gradient.addColorStop(1, 'yellow'); 42 | 43 | context.fillStyle = gradient; 44 | context.rect(0, 0, canvas.width, canvas.height); 45 | context.fill(); 46 | -------------------------------------------------------------------------------- /ch02/example-2.2/example.html: -------------------------------------------------------------------------------- 1 | 2 | 32 | 33 | 34 | Colors and Transparency 35 | 36 | 46 | 47 | 48 | 49 | 50 | Canvas not supported 51 | 52 | 53 | 54 | 55 | 56 | -------------------------------------------------------------------------------- /ch02/example-2.4/example.html: -------------------------------------------------------------------------------- 1 | 2 | 32 | 33 | 34 | Radial Gradients 35 | 36 | 42 | 43 | 44 | 45 |
46 | 47 | Canvas not supported 48 | 49 | 50 | 51 |
52 | 53 | 54 | -------------------------------------------------------------------------------- /ch02/example-2.2/example.js: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright (C) 2012 David Geary. This code is from the book 3 | * Core HTML5 Canvas, published by Prentice-Hall in 2012. 4 | * 5 | * License: 6 | * 7 | * Permission is hereby granted, free of charge, to any person 8 | * obtaining a copy of this software and associated documentation files 9 | * (the "Software"), to deal in the Software without restriction, 10 | * including without limitation the rights to use, copy, modify, merge, 11 | * publish, distribute, sublicense, and/or sell copies of the Software, 12 | * and to permit persons to whom the Software is furnished to do so, 13 | * subject to the following conditions: 14 | * 15 | * The above copyright notice and this permission notice shall be 16 | * included in all copies or substantial portions of the Software. 17 | * 18 | * The Software may not be used to create training material of any sort, 19 | * including courses, books, instructional videos, presentations, etc. 20 | * without the express written consent of David Geary. 21 | * 22 | * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 23 | * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES 24 | * OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND 25 | * NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT 26 | * HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, 27 | * WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING 28 | * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR 29 | * OTHER DEALINGS IN THE SOFTWARE. 30 | */ 31 | 32 | var canvas = document.getElementById('canvas'), 33 | context = canvas.getContext('2d'); 34 | 35 | context.lineJoin = 'round'; 36 | context.lineWidth = 30; 37 | 38 | context.font = '24px Helvetica'; 39 | context.fillText('Click anywhere to erase', 175, 200); 40 | 41 | context.strokeStyle = 'goldenrod'; 42 | context.fillStyle = 'rgba(0, 0, 255, 0.5)'; 43 | 44 | context.strokeRect(75, 100, 200, 200); 45 | context.fillRect(325, 100, 200, 200); 46 | 47 | context.canvas.onmousedown = function (e) { 48 | context.clearRect(0, 0, canvas.width, canvas.height); 49 | }; 50 | -------------------------------------------------------------------------------- /ch02/example-2.4/example.js: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright (C) 2012 David Geary. This code is from the book 3 | * Core HTML5 Canvas, published by Prentice-Hall in 2012. 4 | * 5 | * License: 6 | * 7 | * Permission is hereby granted, free of charge, to any person 8 | * obtaining a copy of this software and associated documentation files 9 | * (the "Software"), to deal in the Software without restriction, 10 | * including without limitation the rights to use, copy, modify, merge, 11 | * publish, distribute, sublicense, and/or sell copies of the Software, 12 | * and to permit persons to whom the Software is furnished to do so, 13 | * subject to the following conditions: 14 | * 15 | * The above copyright notice and this permission notice shall be 16 | * included in all copies or substantial portions of the Software. 17 | * 18 | * The Software may not be used to create training material of any sort, 19 | * including courses, books, instructional videos, presentations, etc. 20 | * without the express written consent of David Geary. 21 | * 22 | * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 23 | * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES 24 | * OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND 25 | * NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT 26 | * HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, 27 | * WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING 28 | * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR 29 | * OTHER DEALINGS IN THE SOFTWARE. 30 | */ 31 | 32 | var canvas = document.getElementById('canvas'), 33 | context = canvas.getContext('2d'), 34 | gradient = context.createRadialGradient( 35 | canvas.width/2, canvas.height, 10, 36 | canvas.width/2, 0, 100); 37 | 38 | gradient.addColorStop(0, 'blue'); 39 | gradient.addColorStop(0.25, 'white'); 40 | gradient.addColorStop(0.5, 'purple'); 41 | gradient.addColorStop(0.75, 'red'); 42 | gradient.addColorStop(1, 'yellow'); 43 | 44 | context.fillStyle = gradient; 45 | context.rect(0, 0, canvas.width, canvas.height); 46 | context.fill(); 47 | -------------------------------------------------------------------------------- /ch02/example-2.20/example.html: -------------------------------------------------------------------------------- 1 | 2 | 32 | 33 | 34 | 35 | Rounded Rectangles 36 | 37 | 45 | 46 | 47 | 48 | 49 | Canvas not supported 50 | 51 | 52 | 53 | 54 | 55 | -------------------------------------------------------------------------------- /ch11/example-11.1/example.html: -------------------------------------------------------------------------------- 1 | 2 | 32 | 33 | 34 | 35 | The Mobile Viewport: Element is 500px wide by 50px high 36 | 37 | 38 | 53 | 54 | 55 | 56 |
Viewport width: 500
57 | 58 | 59 | -------------------------------------------------------------------------------- /ch01/example-1.4/example.html: -------------------------------------------------------------------------------- 1 | 2 | 32 | 33 | 34 | 35 | Clock 36 | 37 | 51 | 52 | 53 | 54 | 55 | Canvas not supported 56 | 57 | 58 | 59 | 60 | 61 | -------------------------------------------------------------------------------- /ch02/example-2.12/example.html: -------------------------------------------------------------------------------- 1 | 2 | 32 | 33 | 34 | Drawing Lines 35 | 36 | 50 | 51 | 52 | 53 | 54 | Canvas not supported 55 | 56 | 57 | 58 | 59 | 60 | -------------------------------------------------------------------------------- /ch02/example-2.17/example.html: -------------------------------------------------------------------------------- 1 | 2 | 32 | 33 | 34 | Dashed lines 35 | 36 | 50 | 51 | 52 | 53 | 54 | Canvas not supported 55 | 56 | 57 | 58 | 59 | 60 | -------------------------------------------------------------------------------- /ch02/example-2.22/example.js: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright (C) 2012 David Geary. This code is from the book 3 | * Core HTML5 Canvas, published by Prentice-Hall in 2012. 4 | * 5 | * License: 6 | * 7 | * Permission is hereby granted, free of charge, to any person 8 | * obtaining a copy of this software and associated documentation files 9 | * (the "Software"), to deal in the Software without restriction, 10 | * including without limitation the rights to use, copy, modify, merge, 11 | * publish, distribute, sublicense, and/or sell copies of the Software, 12 | * and to permit persons to whom the Software is furnished to do so, 13 | * subject to the following conditions: 14 | * 15 | * The above copyright notice and this permission notice shall be 16 | * included in all copies or substantial portions of the Software. 17 | * 18 | * The Software may not be used to create training material of any sort, 19 | * including courses, books, instructional videos, presentations, etc. 20 | * without the express written consent of David Geary. 21 | * 22 | * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 23 | * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES 24 | * OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND 25 | * NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT 26 | * HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, 27 | * WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING 28 | * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR 29 | * OTHER DEALINGS IN THE SOFTWARE. 30 | */ 31 | 32 | var context = document.getElementById('canvas').getContext('2d'); 33 | 34 | context.fillStyle = 'cornflowerblue'; 35 | context.strokeStyle = 'yellow'; 36 | 37 | context.shadowColor = 'rgba(50, 50, 50, 1.0)'; 38 | context.shadowOffsetX = 2; 39 | context.shadowOffsetY = 2; 40 | context.shadowBlur = 4; 41 | 42 | context.lineWidth = 20; 43 | context.lineCap = 'round'; 44 | 45 | context.beginPath(); 46 | context.moveTo(120.5, 130); 47 | context.quadraticCurveTo(150.8, 130, 160.6, 150.5); 48 | context.quadraticCurveTo(190, 250.0, 210.5, 160.5); 49 | context.quadraticCurveTo(240, 100.5, 290, 70.5); 50 | context.stroke(); 51 | 52 | -------------------------------------------------------------------------------- /ch01/example-1.1/example.html: -------------------------------------------------------------------------------- 1 | 2 | 32 | 33 | 34 | 35 | Canvas element size: 600 x 300, Canvas drawing surface size: 600 x 300 36 | 37 | 49 | 50 | 51 | 52 | 53 | Canvas not supported 54 | 55 | 56 | 57 | 58 | 59 | -------------------------------------------------------------------------------- /ch02/section-2.13.2.3/example.html: -------------------------------------------------------------------------------- 1 | 2 | 32 | 33 | 34 | Translating, Scaling, and Rotating 35 | 44 | 45 | 46 | 47 | 48 | Canvas not supported 49 | 50 | 51 | 52 | 53 | 54 | -------------------------------------------------------------------------------- /ch02/example-2.18/example.html: -------------------------------------------------------------------------------- 1 | 2 | 32 | 33 | 34 | Extending CanvasRenderingContext2D to Draw Dashed lines 35 | 36 | 50 | 51 | 52 | 53 | 54 | Canvas not supported 55 | 56 | 57 | 58 | 59 | 60 | -------------------------------------------------------------------------------- /ch04/example-4.16/sunglassFilter.js: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright (C) 2012 David Geary. This code is from the book 3 | * Core HTML5 Canvas, published by Prentice-Hall in 2012. 4 | * 5 | * License: 6 | * 7 | * Permission is hereby granted, free of charge, to any person 8 | * obtaining a copy of this software and associated documentation files 9 | * (the "Software"), to deal in the Software without restriction, 10 | * including without limitation the rights to use, copy, modify, merge, 11 | * publish, distribute, sublicense, and/or sell copies of the Software, 12 | * and to permit persons to whom the Software is furnished to do so, 13 | * subject to the following conditions: 14 | * 15 | * The above copyright notice and this permission notice shall be 16 | * included in all copies or substantial portions of the Software. 17 | * 18 | * The Software may not be used to create training material of any sort, 19 | * including courses, books, instructional videos, presentations, etc. 20 | * without the express written consent of David Geary. 21 | * 22 | * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 23 | * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES 24 | * OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND 25 | * NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT 26 | * HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, 27 | * WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING 28 | * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR 29 | * OTHER DEALINGS IN THE SOFTWARE. 30 | */ 31 | 32 | onmessage = function (event) { 33 | var imagedata = event.data, 34 | data = imagedata.data, 35 | length = data.length, 36 | width = imagedata.width; 37 | 38 | for (i=0; i < length; ++i) { 39 | if ((i+1) % 4 != 0) { 40 | if ((i+4) % (width*4) == 0) { // last pixel in a row 41 | data[i] = data[i-4]; 42 | data[i+1] = data[i-3]; 43 | data[i+2] = data[i-2]; 44 | data[i+3] = data[i-1]; 45 | i+=4; 46 | } 47 | else { 48 | data[i] = 2*data[i] - data[i+4] - 0.5*data[i+4]; 49 | } 50 | } 51 | } 52 | 53 | postMessage(imagedata); 54 | }; 55 | -------------------------------------------------------------------------------- /ch08/example-8.8/example.html: -------------------------------------------------------------------------------- 1 | 2 | 32 | 33 | 34 | 35 | Polygon Collision Detection using SAT 36 | 37 | 46 | 47 | 48 | 49 | 50 | Canvas not supported 51 | 52 | 53 | 54 | 55 | 56 | 57 | -------------------------------------------------------------------------------- /ch04/example-4.18/sunglassFilter.js: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright (C) 2012 David Geary. This code is from the book 3 | * Core HTML5 Canvas, published by Prentice-Hall in 2012. 4 | * 5 | * License: 6 | * 7 | * Permission is hereby granted, free of charge, to any person 8 | * obtaining a copy of this software and associated documentation files 9 | * (the "Software"), to deal in the Software without restriction, 10 | * including without limitation the rights to use, copy, modify, merge, 11 | * publish, distribute, sublicense, and/or sell copies of the Software, 12 | * and to permit persons to whom the Software is furnished to do so, 13 | * subject to the following conditions: 14 | * 15 | * The above copyright notice and this permission notice shall be 16 | * included in all copies or substantial portions of the Software. 17 | * 18 | * The Software may not be used to create training material of any sort, 19 | * including courses, books, instructional videos, presentations, etc. 20 | * without the express written consent of David Geary. 21 | * 22 | * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 23 | * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES 24 | * OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND 25 | * NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT 26 | * HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, 27 | * WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING 28 | * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR 29 | * OTHER DEALINGS IN THE SOFTWARE. 30 | */ 31 | 32 | onmessage = function emboss(event) { 33 | var imagedata = event.data, 34 | data = imagedata.data, 35 | length = data.length, 36 | width = imagedata.width; 37 | 38 | for (i=0; i < length; ++i) { 39 | if ((i+1) % 4 != 0) { 40 | if ((i+4) % (width*4) == 0) { // last pixel in a row 41 | data[i] = data[i-4]; 42 | data[i+1] = data[i-3]; 43 | data[i+2] = data[i-2]; 44 | data[i+3] = data[i-1]; 45 | i+=4; 46 | } 47 | else { 48 | data[i] = 2*data[i] - data[i+4] - 0.5*data[i+4]; 49 | } 50 | } 51 | } 52 | 53 | postMessage(imagedata); 54 | }; 55 | -------------------------------------------------------------------------------- /ch06/example-6.5/example.js: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright (C) 2012 David Geary. This code is from the book 3 | * Core HTML5 Canvas, published by Prentice-Hall in 2012. 4 | * 5 | * License: 6 | * 7 | * Permission is hereby granted, free of charge, to any person 8 | * obtaining a copy of this software and associated documentation files 9 | * (the "Software"), to deal in the Software without restriction, 10 | * including without limitation the rights to use, copy, modify, merge, 11 | * publish, distribute, sublicense, and/or sell copies of the Software, 12 | * and to permit persons to whom the Software is furnished to do so, 13 | * subject to the following conditions: 14 | * 15 | * The above copyright notice and this permission notice shall be 16 | * included in all copies or substantial portions of the Software. 17 | * 18 | * The Software may not be used to create training material of any sort, 19 | * including courses, books, instructional videos, presentations, etc. 20 | * without the express written consent of David Geary. 21 | * 22 | * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 23 | * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES 24 | * OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND 25 | * NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT 26 | * HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, 27 | * WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING 28 | * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR 29 | * OTHER DEALINGS IN THE SOFTWARE. 30 | */ 31 | 32 | var canvas = document.getElementById('canvas'), 33 | context = canvas.getContext('2d'), 34 | bomb = new Sprite('bomb', new ImagePainter('../../shared/images/bomb.png')), 35 | 36 | BOMB_LEFT = 220, 37 | BOMB_TOP = 80, 38 | BOMB_WIDTH = 180, 39 | BOMB_HEIGHT = 130; 40 | 41 | function paint() { 42 | bomb.paint(context); 43 | } 44 | 45 | function animate(now) { 46 | context.clearRect(0,0,canvas.width,canvas.height); 47 | paint(); 48 | window.requestNextAnimationFrame(animate); 49 | } 50 | 51 | bomb.left = BOMB_LEFT; 52 | bomb.top = BOMB_TOP; 53 | bomb.width = BOMB_WIDTH; 54 | bomb.height = BOMB_HEIGHT; 55 | 56 | window.requestNextAnimationFrame(animate); 57 | -------------------------------------------------------------------------------- /ch01/example-1.13/example.html: -------------------------------------------------------------------------------- 1 | 2 | 32 | 33 | 34 | Image Clock 35 | 36 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | Canvas not supported 59 | 60 | 61 | 62 | 63 | 64 | -------------------------------------------------------------------------------- /ch04/example-4.1/example.html: -------------------------------------------------------------------------------- 1 | 2 | 32 | 33 | 34 | 35 | Drawing Images into a Canvas 36 | 37 | 52 | 53 | 54 | 55 | 56 | Canvas not supported 57 | 58 | 59 | 60 | 61 | -------------------------------------------------------------------------------- /ch02/example-2.13/example.html: -------------------------------------------------------------------------------- 1 | 2 | 32 | 33 | 34 | 35 | Drawing a Grid 36 | 37 | 52 | 53 | 54 | 55 | 56 | Canvas not supported 57 | 58 | 59 | 60 | 61 | 62 | -------------------------------------------------------------------------------- /ch02/example-2.14/example.html: -------------------------------------------------------------------------------- 1 | 2 | 32 | 33 | 34 | 35 | Drawing Axes 36 | 37 | 52 | 53 | 54 | 55 | 56 | Canvas not supported 57 | 58 | 59 | 60 | 61 | 62 | -------------------------------------------------------------------------------- /ch02/example-2.24/example.html: -------------------------------------------------------------------------------- 1 | 2 | 32 | 33 | 34 | 35 | Bezier Curves 36 | 37 | 52 | 53 | 54 | 55 | 56 | Canvas not supported 57 | 58 | 59 | 60 | 61 | 62 | -------------------------------------------------------------------------------- /ch02/example-2.9/example.html: -------------------------------------------------------------------------------- 1 | 2 | 32 | 33 | 34 | Stroke and Fill 35 | 36 | 56 | 57 | 58 | 59 | 60 | Canvas not supported 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | -------------------------------------------------------------------------------- /ch03/example-3.7/example.html: -------------------------------------------------------------------------------- 1 | 2 | 32 | 33 | 34 | 35 | Drawing Axis Labels 36 | 37 | 52 | 53 | 54 | 55 | 56 | Canvas not supported 57 | 58 | 59 | 60 | 61 | 62 | -------------------------------------------------------------------------------- /ch04/example-4.23/example.js: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright (C) 2012 David Geary. This code is from the book 3 | * Core HTML5 Canvas, published by Prentice-Hall in 2012. 4 | * 5 | * License: 6 | * 7 | * Permission is hereby granted, free of charge, to any person 8 | * obtaining a copy of this software and associated documentation files 9 | * (the "Software"), to deal in the Software without restriction, 10 | * including without limitation the rights to use, copy, modify, merge, 11 | * publish, distribute, sublicense, and/or sell copies of the Software, 12 | * and to permit persons to whom the Software is furnished to do so, 13 | * subject to the following conditions: 14 | * 15 | * The above copyright notice and this permission notice shall be 16 | * included in all copies or substantial portions of the Software. 17 | * 18 | * The Software may not be used to create training material of any sort, 19 | * including courses, books, instructional videos, presentations, etc. 20 | * without the express written consent of David Geary. 21 | * 22 | * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 23 | * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES 24 | * OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND 25 | * NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT 26 | * HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, 27 | * WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING 28 | * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR 29 | * OTHER DEALINGS IN THE SOFTWARE. 30 | */ 31 | 32 | var canvas = document.getElementById('canvas'), 33 | context = canvas.getContext('2d'), 34 | video = document.getElementById('video'); 35 | 36 | function animate() { 37 | if (!video.ended) { 38 | context.drawImage(video, 0, 0, canvas.width, canvas.height); 39 | window.requestNextAnimationFrame(animate); 40 | } 41 | } 42 | 43 | video.onload = function (e) { 44 | video.play(); 45 | window.requestNextAnimationFrame(animate); 46 | }; 47 | 48 | alert('This example plays a video, but due to copyright restrictions and size limitations, the video is not included in the code for this example. To make this example work, download a video, and replace the two source elements in example.html to refer to your video.'); 49 | -------------------------------------------------------------------------------- /ch06/example-6.1/example.html: -------------------------------------------------------------------------------- 1 | 2 | 32 | 33 | 34 | 35 | A simple sprite 36 | 37 | 48 | 49 | 50 | 51 | 52 | Canvas not supported 53 | 54 | 55 | 56 | 57 | 58 | 59 | -------------------------------------------------------------------------------- /ch08/example-8.19/example.html: -------------------------------------------------------------------------------- 1 | 2 | 32 | 33 | 34 | 35 | Sticking using SAT and MTV 36 | 37 | 46 | 47 | 48 | 49 | 50 | Canvas not supported 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | -------------------------------------------------------------------------------- /ch03/example-3.9/example.html: -------------------------------------------------------------------------------- 1 | 2 | 32 | 33 | 34 | 35 | Drawing Circular Text 36 | 37 | 53 | 54 | 55 | 56 | 57 | Canvas not supported 58 | 59 | 60 | 61 | 62 | 63 | -------------------------------------------------------------------------------- /ch08/example-8.1/example.html: -------------------------------------------------------------------------------- 1 | 2 | 32 | 33 | 34 | 35 | Bouncing off the walls 36 | 37 | 46 | 47 | 48 | 49 | 50 | Canvas not supported 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | -------------------------------------------------------------------------------- /ch01/example-1.3/example.html: -------------------------------------------------------------------------------- 1 | 2 | 32 | 33 | 34 | Canvas element size: 600 x 300, Canvas drawing surface size: 300 x 150 35 | 36 | 50 | 51 | 52 | 53 | 54 | Canvas not supported 55 | 56 | 57 | 58 | 59 | 60 | -------------------------------------------------------------------------------- /ch08/example-8.10/example.html: -------------------------------------------------------------------------------- 1 | 2 | 32 | 33 | 34 | 35 | Polygon and Circle Collision Detection using SAT 36 | 37 | 46 | 47 | 48 | 49 | 50 | Canvas not supported 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | -------------------------------------------------------------------------------- /ch02/example-2.21/example.html: -------------------------------------------------------------------------------- 1 | 2 | 32 | 33 | 34 | 35 | A Dial Showing the Degrees of a Circle 36 | 37 | 53 | 54 | 55 | 56 | 57 | Canvas not supported 58 | 59 | 60 | 61 | 62 | 63 | -------------------------------------------------------------------------------- /ch03/example-3.5/example.html: -------------------------------------------------------------------------------- 1 | 2 | 32 | 33 | 34 | Positioning Text 35 | 51 | 52 | 53 | 54 | 55 | Canvas not supported 56 | 57 | 58 | 59 | 60 | 61 | -------------------------------------------------------------------------------- /ch03/example-3.8/example.html: -------------------------------------------------------------------------------- 1 | 2 | 32 | 33 | 34 | 35 | A Dial Showing the Degrees of a Circle 36 | 37 | 53 | 54 | 55 | 56 | 57 | Canvas not supported 58 | 59 | 60 | 61 | 62 | 63 | -------------------------------------------------------------------------------- /ch06/example-6.9/example.html: -------------------------------------------------------------------------------- 1 | 2 | 32 | 33 | 34 | 35 | Combining sprite behaviors 36 | 37 | 51 | 52 | 53 | 54 | 55 | Canvas not supported 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | -------------------------------------------------------------------------------- /ch02/example-2.35/example.html: -------------------------------------------------------------------------------- 1 | 2 | 32 | 33 | 34 | 35 | Telescoping with the Canvas clip region 36 | 48 | 49 | 50 | 51 | 52 | Canvas not supported 53 | 54 | 55 | 56 | 57 | 58 | -------------------------------------------------------------------------------- /ch07/example-7.5/example.html: -------------------------------------------------------------------------------- 1 | 2 | 32 | 33 | 34 | 35 | Pendulum 36 | 37 | 48 | 49 | 50 | 51 | 52 | Canvas not supported 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | -------------------------------------------------------------------------------- /ch08/section-8.4.1.6/example.html: -------------------------------------------------------------------------------- 1 | 2 | 32 | 33 | 34 | 35 | Using SAT with Images and Sprites 36 | 37 | 46 | 47 | 48 | 49 | 50 | Canvas not supported 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | -------------------------------------------------------------------------------- /ch02/example-2.22/example.html: -------------------------------------------------------------------------------- 1 | 2 | 32 | 33 | 34 | Bezier Curves: Quadratic 35 | 36 | 59 | 60 | 61 | 62 | 63 | Canvas not supported 64 | 65 | 66 | 67 | 68 | 69 | -------------------------------------------------------------------------------- /ch04/example-4.23/example.html: -------------------------------------------------------------------------------- 1 | 2 | 32 | 33 | 34 | Video 35 | 36 | 50 | 51 | 52 | 53 | 57 | 58 | 59 | Canvas not supported 60 | 61 | 62 | 63 | 64 | 65 | 66 | -------------------------------------------------------------------------------- /ch08/example-8.20/example.html: -------------------------------------------------------------------------------- 1 | 2 | 32 | 33 | 34 | 35 | Bouncing using SAT and MTV 36 | 37 | 49 | 50 | 51 | 52 | 53 | Canvas not supported 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | -------------------------------------------------------------------------------- /ch02/example-2.11/example.html: -------------------------------------------------------------------------------- 1 | 2 | 32 | 33 | 34 | 35 | Various Cutout Shapes 36 | 37 | 59 | 60 | 61 | 62 | 63 | Canvas not supported 64 | 65 | 66 | 67 | 68 | 69 | -------------------------------------------------------------------------------- /ch04/example-4.13/example.js: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright (C) 2012 David Geary. This code is from the book 3 | * Core HTML5 Canvas, published by Prentice-Hall in 2012. 4 | * 5 | * License: 6 | * 7 | * Permission is hereby granted, free of charge, to any person 8 | * obtaining a copy of this software and associated documentation files 9 | * (the "Software"), to deal in the Software without restriction, 10 | * including without limitation the rights to use, copy, modify, merge, 11 | * publish, distribute, sublicense, and/or sell copies of the Software, 12 | * and to permit persons to whom the Software is furnished to do so, 13 | * subject to the following conditions: 14 | * 15 | * The above copyright notice and this permission notice shall be 16 | * included in all copies or substantial portions of the Software. 17 | * 18 | * The Software may not be used to create training material of any sort, 19 | * including courses, books, instructional videos, presentations, etc. 20 | * without the express written consent of David Geary. 21 | * 22 | * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 23 | * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES 24 | * OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND 25 | * NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT 26 | * HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, 27 | * WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING 28 | * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR 29 | * OTHER DEALINGS IN THE SOFTWARE. 30 | */ 31 | 32 | var image = new Image(), 33 | canvas = document.getElementById('canvas'), 34 | context = canvas.getContext('2d'), 35 | negativeButton = document.getElementById('negativeButton'); 36 | 37 | negativeButton.onclick = function() { 38 | var imagedata = context.getImageData(0, 0, canvas.width, canvas.height), 39 | data = imagedata.data; 40 | 41 | for(i=0; i <= data.length - 4; i+=4) { 42 | data[i] = 255 - data[i] 43 | data[i+1] = 255 - data[i+1]; 44 | data[i+2] = 255 - data[i+2]; 45 | } 46 | context.putImageData(imagedata, 0, 0); 47 | }; 48 | 49 | image.src = '../../shared/images/curved-road.png'; 50 | image.onload = function() { 51 | context.drawImage(image, 0, 0, 52 | image.width, image.height, 0, 0, 53 | context.canvas.width, context.canvas.height); 54 | }; 55 | -------------------------------------------------------------------------------- /ch03/example-3.3/example.html: -------------------------------------------------------------------------------- 1 | 2 | 32 | 33 | 34 | Specifying Fonts 35 | 54 | 55 | 56 | 57 | 58 | Canvas not supported 59 | 60 | 61 | 62 | 63 | 64 | -------------------------------------------------------------------------------- /ch03/example-3.2/example.html: -------------------------------------------------------------------------------- 1 | 2 | 32 | 33 | 34 | Filling Text with Gradients and Patterns 35 | 54 | 55 | 56 | 57 | 58 | Canvas not supported 59 | 60 | 61 | 62 | 63 | 64 | -------------------------------------------------------------------------------- /ch10/example-10.4/example.js: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright (C) 2012 David Geary. This code is from the book 3 | * Core HTML5 Canvas, published by Prentice-Hall in 2012. 4 | * 5 | * License: 6 | * 7 | * Permission is hereby granted, free of charge, to any person 8 | * obtaining a copy of this software and associated documentation files 9 | * (the "Software"), to deal in the Software without restriction, 10 | * including without limitation the rights to use, copy, modify, merge, 11 | * publish, distribute, sublicense, and/or sell copies of the Software, 12 | * and to permit persons to whom the Software is furnished to do so, 13 | * subject to the following conditions: 14 | * 15 | * The above copyright notice and this permission notice shall be 16 | * included in all copies or substantial portions of the Software. 17 | * 18 | * The Software may not be used to create training material of any sort, 19 | * including courses, books, instructional videos, presentations, etc. 20 | * without the express written consent of David Geary. 21 | * 22 | * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 23 | * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES 24 | * OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND 25 | * NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT 26 | * HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, 27 | * WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING 28 | * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR 29 | * OTHER DEALINGS IN THE SOFTWARE. 30 | */ 31 | 32 | var startButton = document.getElementById('startButton'), 33 | loadingSpan = document.getElementById('loadingSpan'), 34 | progressbar = new COREHTML5.Progressbar( 35 | 'rgba(0, 0, 0, 0.2)', 'teal', 90, 70), 36 | percentComplete = 0; 37 | 38 | progressbar.appendTo(document.getElementById('progressbarDiv')); 39 | 40 | startButton.onclick = function (e) { 41 | loadingSpan.style.display = 'inline'; 42 | startButton.style.display = 'none'; 43 | 44 | percentComplete += 1.0; 45 | 46 | if (percentComplete > 100) { 47 | percentComplete = 0; 48 | loadingSpan.style.display = 'none'; 49 | startButton.style.display = 'inline'; 50 | } 51 | else { 52 | progressbar.erase(); 53 | progressbar.draw(percentComplete); 54 | requestNextAnimationFrame(startButton.onclick); 55 | } 56 | }; 57 | -------------------------------------------------------------------------------- /ch02/example-2.13/example.js: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright (C) 2012 David Geary. This code is from the book 3 | * Core HTML5 Canvas, published by Prentice-Hall in 2012. 4 | * 5 | * License: 6 | * 7 | * Permission is hereby granted, free of charge, to any person 8 | * obtaining a copy of this software and associated documentation files 9 | * (the "Software"), to deal in the Software without restriction, 10 | * including without limitation the rights to use, copy, modify, merge, 11 | * publish, distribute, sublicense, and/or sell copies of the Software, 12 | * and to permit persons to whom the Software is furnished to do so, 13 | * subject to the following conditions: 14 | * 15 | * The above copyright notice and this permission notice shall be 16 | * included in all copies or substantial portions of the Software. 17 | * 18 | * The Software may not be used to create training material of any sort, 19 | * including courses, books, instructional videos, presentations, etc. 20 | * without the express written consent of David Geary. 21 | * 22 | * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 23 | * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES 24 | * OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND 25 | * NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT 26 | * HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, 27 | * WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING 28 | * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR 29 | * OTHER DEALINGS IN THE SOFTWARE. 30 | */ 31 | 32 | var context = document.getElementById('canvas').getContext('2d'); 33 | 34 | // Functions..................................................... 35 | 36 | function drawGrid(context, color, stepx, stepy) { 37 | context.strokeStyle = color; 38 | context.lineWidth = 0.5; 39 | 40 | for (var i = stepx + 0.5; i < context.canvas.width; i += stepx) { 41 | context.beginPath(); 42 | context.moveTo(i, 0); 43 | context.lineTo(i, context.canvas.height); 44 | context.stroke(); 45 | } 46 | 47 | for (var i = stepy + 0.5; i < context.canvas.height; i += stepy) { 48 | context.beginPath(); 49 | context.moveTo(0, i); 50 | context.lineTo(context.canvas.width, i); 51 | context.stroke(); 52 | } 53 | } 54 | 55 | // Initialization................................................ 56 | 57 | drawGrid(context, 'lightgray', 10, 10); 58 | -------------------------------------------------------------------------------- /ch01/example-1.5/example.html: -------------------------------------------------------------------------------- 1 | 2 | 32 | 33 | 34 | Sprite sheets 35 | 36 | 57 | 58 | 59 | 60 |
61 | 62 | 63 | Canvas not supported 64 | 65 | 66 | 68 | 69 | 70 | -------------------------------------------------------------------------------- /ch06/example-6.2/example.html: -------------------------------------------------------------------------------- 1 | 2 | 32 | 33 | 34 | 35 | Sprite Clock 36 | 37 | 50 | 51 | 52 | 53 | 54 | Canvas not supported 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | -------------------------------------------------------------------------------- /ch03/example-3.4/example.html: -------------------------------------------------------------------------------- 1 | 2 | 32 | 33 | 34 | Positioning Text: textAlign/textBaseline 35 | 54 | 55 | 56 | 57 | 58 | Canvas not supported 59 | 60 | 61 | 62 | 63 | 64 | -------------------------------------------------------------------------------- /ch04/example-4.2/example.html: -------------------------------------------------------------------------------- 1 | 2 | 32 | 33 | 34 | 35 | Scaling Images 36 | 37 | 55 | 56 | 57 | 58 |
59 | 60 | Scale image to canvas 61 |
62 | 63 | 64 | Canvas not supported 65 | 66 | 67 | 68 | 69 | -------------------------------------------------------------------------------- /ch05/example-5.12/example.html: -------------------------------------------------------------------------------- 1 | 2 | 32 | 33 | 34 | Scheduling Tasks 35 | 36 | 55 | 56 | 57 | 58 |
59 | 60 |
61 | 62 | 63 | Canvas not supported 64 | 65 | 66 | 68 | 69 | 70 | -------------------------------------------------------------------------------- /ch02/example-2.5/example.html: -------------------------------------------------------------------------------- 1 | 2 | 32 | 33 | 34 | Patterns 35 | 36 | 46 | 47 | 48 | 49 |
50 | repeat 51 | repeat-x 52 | repeat-y 53 | no repeat 54 |
55 | 56 | 57 | Canvas not supported 58 | 59 | 60 | 61 | 62 | 63 | -------------------------------------------------------------------------------- /ch10/example-10.1/example.js: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright (C) 2012 David Geary. This code is from the book 3 | * Core HTML5 Canvas, published by Prentice-Hall in 2012. 4 | * 5 | * License: 6 | * 7 | * Permission is hereby granted, free of charge, to any person 8 | * obtaining a copy of this software and associated documentation files 9 | * (the "Software"), to deal in the Software without restriction, 10 | * including without limitation the rights to use, copy, modify, merge, 11 | * publish, distribute, sublicense, and/or sell copies of the Software, 12 | * and to permit persons to whom the Software is furnished to do so, 13 | * subject to the following conditions: 14 | * 15 | * The above copyright notice and this permission notice shall be 16 | * included in all copies or substantial portions of the Software. 17 | * 18 | * The Software may not be used to create training material of any sort, 19 | * including courses, books, instructional videos, presentations, etc. 20 | * without the express written consent of David Geary. 21 | * 22 | * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 23 | * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES 24 | * OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND 25 | * NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT 26 | * HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, 27 | * WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING 28 | * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR 29 | * OTHER DEALINGS IN THE SOFTWARE. 30 | */ 31 | 32 | var widthRange = document.getElementById('widthRange'), 33 | heightRange = document.getElementById('heightRange'), 34 | roundedRectangle = new COREHTML5.RoundedRectangle( 35 | 'rgba(0, 0, 0, 0.2)', 'darkgoldenrod', 36 | widthRange.value, heightRange.value); 37 | 38 | function resize() { 39 | roundedRectangle.horizontalSizePercent = widthRange.value/100; 40 | roundedRectangle.verticalSizePercent = heightRange.value/100; 41 | 42 | roundedRectangle.resize(roundedRectangle.domElement.offsetWidth, 43 | roundedRectangle.domElement.offsetHeight); 44 | 45 | roundedRectangle.erase(); 46 | roundedRectangle.draw(); 47 | } 48 | 49 | widthRange.onchange = resize; 50 | heightRange.onchange = resize; 51 | 52 | roundedRectangle.appendTo(document.getElementById('roundedRectangleDiv')); 53 | roundedRectangle.draw(); 54 | -------------------------------------------------------------------------------- /ch04/example-4.2/example.js: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright (C) 2012 David Geary. This code is from the book 3 | * Core HTML5 Canvas, published by Prentice-Hall in 2012. 4 | * 5 | * License: 6 | * 7 | * Permission is hereby granted, free of charge, to any person 8 | * obtaining a copy of this software and associated documentation files 9 | * (the "Software"), to deal in the Software without restriction, 10 | * including without limitation the rights to use, copy, modify, merge, 11 | * publish, distribute, sublicense, and/or sell copies of the Software, 12 | * and to permit persons to whom the Software is furnished to do so, 13 | * subject to the following conditions: 14 | * 15 | * The above copyright notice and this permission notice shall be 16 | * included in all copies or substantial portions of the Software. 17 | * 18 | * The Software may not be used to create training material of any sort, 19 | * including courses, books, instructional videos, presentations, etc. 20 | * without the express written consent of David Geary. 21 | * 22 | * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 23 | * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES 24 | * OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND 25 | * NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT 26 | * HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, 27 | * WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING 28 | * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR 29 | * OTHER DEALINGS IN THE SOFTWARE. 30 | */ 31 | 32 | var canvas = document.getElementById('canvas'), 33 | context = canvas.getContext('2d'), 34 | image = new Image(), 35 | scaleCheckbox = document.getElementById('scaleCheckbox'); 36 | 37 | // Functions..................................................... 38 | 39 | function drawImage() { 40 | context.clearRect(0,0,canvas.width,canvas.height); 41 | 42 | if (scaleCheckbox.checked) { 43 | context.drawImage(image, 0, 0, canvas.width, canvas.height); 44 | } 45 | else { 46 | context.drawImage(image, 0, 0); 47 | } 48 | context.restore(); 49 | } 50 | 51 | // Event Handlers................................................ 52 | 53 | scaleCheckbox.onchange = function(e) { 54 | drawImage(); 55 | } 56 | 57 | // Initialization................................................ 58 | 59 | image.src = '../../shared/images/waterfall.png'; 60 | image.onload = function(e) { 61 | drawImage(); 62 | }; 63 | -------------------------------------------------------------------------------- /ch04/example-4.12/example.html: -------------------------------------------------------------------------------- 1 | 2 | 32 | 33 | 34 | 35 | 36 | Rubberbands with getImageData() and putImageData() 37 | 38 | 39 | 57 | 58 | 59 | 60 |
61 | 62 |
63 | 64 | 65 | Canvas not supported 66 | 67 | 68 | 69 | 70 | -------------------------------------------------------------------------------- /ch02/example-2.23/example.html: -------------------------------------------------------------------------------- 1 | 2 | 32 | 33 | 34 | Quadratic Curves 35 | 36 | 58 | 59 | 60 | 61 | 62 | canvas not supported 63 | 64 | 65 | 66 | 67 | 68 | -------------------------------------------------------------------------------- /ch04/example-4.9/example.html: -------------------------------------------------------------------------------- 1 | 2 | 32 | 33 | 34 | 35 | 36 | Rubberbands with getImageData() and putImageData() 37 | 38 | 39 | 58 | 59 | 60 | 61 |
62 | 63 |
64 | 65 | 66 | Canvas not supported 67 | 68 | 69 | 70 | 71 | -------------------------------------------------------------------------------- /ch03/example-3.12/text.js: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright (C) 2012 David Geary. This code is from the book 3 | * Core HTML5 Canvas, published by Prentice-Hall in 2012. 4 | * 5 | * License: 6 | * 7 | * Permission is hereby granted, free of charge, to any person 8 | * obtaining a copy of this software and associated documentation files 9 | * (the "Software"), to deal in the Software without restriction, 10 | * including without limitation the rights to use, copy, modify, merge, 11 | * publish, distribute, sublicense, and/or sell copies of the Software, 12 | * and to permit persons to whom the Software is furnished to do so, 13 | * subject to the following conditions: 14 | * 15 | * The above copyright notice and this permission notice shall be 16 | * included in all copies or substantial portions of the Software. 17 | * 18 | * The Software may not be used to create training material of any sort, 19 | * including courses, books, instructional videos, presentations, etc. 20 | * without the express written consent of David Geary. 21 | * 22 | * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 23 | * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES 24 | * OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND 25 | * NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT 26 | * HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, 27 | * WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING 28 | * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR 29 | * OTHER DEALINGS IN THE SOFTWARE. 30 | */ 31 | 32 | // Cursor......................................................... 33 | 34 | TextCursor = function (width, fillStyle) { 35 | this.fillStyle = fillStyle || 'rgba(0, 0, 0, 0.5)'; 36 | this.width = width || 2; 37 | this.left = 0; 38 | this.top = 0; 39 | }; 40 | 41 | TextCursor.prototype = { 42 | getHeight: function (context) { 43 | return context.measureText('W').width; 44 | }, 45 | 46 | createPath: function (context) { 47 | context.beginPath(); 48 | context.rect(this.left, this.top, 49 | this.width, this.getHeight(context)); 50 | }, 51 | 52 | draw: function (context, left, bottom) { 53 | context.save(); 54 | 55 | this.left = left; 56 | this.top = bottom - this.getHeight(context); 57 | 58 | this.createPath(context); 59 | 60 | context.fillStyle = this.fillStyle; 61 | context.fill(); 62 | 63 | context.restore(); 64 | }, 65 | }; 66 | -------------------------------------------------------------------------------- /ch06/example-6.5/example.html: -------------------------------------------------------------------------------- 1 | 2 | 32 | 33 | 34 | Image Painters 35 | 36 | 53 | 54 | 55 | 56 | 57 | Canvas not supported 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | -------------------------------------------------------------------------------- /ch01/example-1.11/example.html: -------------------------------------------------------------------------------- 1 | 2 | 32 | 33 | 34 | Clock 35 | 36 | 57 | 58 | 59 | 60 |
61 | 62 |
63 | 64 | 65 | 66 | 67 | Canvas not supported 68 | 69 | 70 | 71 | 72 | 73 | -------------------------------------------------------------------------------- /ch05/example-5.17/example.html: -------------------------------------------------------------------------------- 1 | 2 | 32 | 33 | 34 | Parallax 35 | 36 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | Canvas not supported 65 | 66 | 67 | 68 | 69 | 70 | 71 | -------------------------------------------------------------------------------- /ch02/example-2.17/example.js: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright (C) 2012 David Geary. This code is from the book 3 | * Core HTML5 Canvas, published by Prentice-Hall in 2012. 4 | * 5 | * License: 6 | * 7 | * Permission is hereby granted, free of charge, to any person 8 | * obtaining a copy of this software and associated documentation files 9 | * (the "Software"), to deal in the Software without restriction, 10 | * including without limitation the rights to use, copy, modify, merge, 11 | * publish, distribute, sublicense, and/or sell copies of the Software, 12 | * and to permit persons to whom the Software is furnished to do so, 13 | * subject to the following conditions: 14 | * 15 | * The above copyright notice and this permission notice shall be 16 | * included in all copies or substantial portions of the Software. 17 | * 18 | * The Software may not be used to create training material of any sort, 19 | * including courses, books, instructional videos, presentations, etc. 20 | * without the express written consent of David Geary. 21 | * 22 | * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 23 | * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES 24 | * OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND 25 | * NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT 26 | * HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, 27 | * WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING 28 | * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR 29 | * OTHER DEALINGS IN THE SOFTWARE. 30 | */ 31 | 32 | var context = document.querySelector('#canvas').getContext('2d'); 33 | 34 | function drawDashedLine(context, x1, y1, x2, y2, dashLength) { 35 | dashLength = dashLength === undefined ? 5 : dashLength; 36 | 37 | var deltaX = x2 - x1; 38 | var deltaY = y2 - y1; 39 | var numDashes = Math.floor( 40 | Math.sqrt(deltaX * deltaX + deltaY * deltaY) / dashLength); 41 | 42 | for (var i=0; i < numDashes; ++i) { 43 | context[ i % 2 === 0 ? 'moveTo' : 'lineTo' ] 44 | (x1 + (deltaX / numDashes) * i, y1 + (deltaY / numDashes) * i); 45 | } 46 | 47 | context.stroke(); 48 | }; 49 | 50 | context.lineWidth = 3; 51 | context.strokeStyle = 'blue'; 52 | 53 | drawDashedLine(context, 20, 20, context.canvas.width-20, 20); 54 | drawDashedLine(context, context.canvas.width-20, 20, context.canvas.width-20, context.canvas.height-20, 10); 55 | drawDashedLine(context, context.canvas.width-20, context.canvas.height-20, 20, context.canvas.height-20, 15); 56 | drawDashedLine(context, 20, context.canvas.height-20, 20, 20, 2); 57 | -------------------------------------------------------------------------------- /ch05/example-5.15/example.html: -------------------------------------------------------------------------------- 1 | 2 | 32 | 33 | 34 | Scrolling Backgrounds 35 | 36 | 59 | 60 | 61 | 62 | 63 | Canvas not supported 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | -------------------------------------------------------------------------------- /ch06/example-6.7/example.html: -------------------------------------------------------------------------------- 1 | 2 | 32 | 33 | 34 | 35 | Animating with sprite sheets 36 | 37 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | Canvas not supported 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | -------------------------------------------------------------------------------- /ch04/example-4.18/example.html: -------------------------------------------------------------------------------- 1 | 2 | 32 | 33 | 34 | 35 | Sunglasses 36 | 37 | 60 | 61 | 62 | 63 |
64 | 66 |
67 | 68 | 69 | Canvas not supported 70 | 71 | 72 | 73 | 74 | -------------------------------------------------------------------------------- /ch04/example-4.14/example.html: -------------------------------------------------------------------------------- 1 | 2 | 32 | 33 | 34 | 35 | A black and white image filter 36 | 37 | 61 | 62 | 63 | 64 |
65 | 67 | Color 68 |
69 | 70 | 71 | Canvas not supported 72 | 73 | 74 | 75 | 76 | 77 | -------------------------------------------------------------------------------- /ch04/example-4.15/example.html: -------------------------------------------------------------------------------- 1 | 2 | 32 | 33 | 34 | 35 | Embossing Filter 36 | 37 | 61 | 62 | 63 | 64 |
65 | 66 |
67 | 68 | 69 | Canvas not supported 70 | 71 | 72 | 73 | 74 | -------------------------------------------------------------------------------- /ch04/example-4.13/example.html: -------------------------------------------------------------------------------- 1 | 2 | 32 | 33 | 34 | 35 | A negative image filter 36 | 37 | 60 | 61 | 62 | 63 |
64 | 66 |
67 | 68 | 69 | Canvas not supported 70 | 71 | 72 | 73 | 74 | -------------------------------------------------------------------------------- /ch04/example-4.19/example.html: -------------------------------------------------------------------------------- 1 | 2 | 32 | 33 | 34 | 35 | Animation: Fade Out 36 | 37 | 61 | 62 | 63 | 64 |
65 | 66 |
67 | 68 | 69 | Canvas not supported 70 | 71 | 72 | 73 | 74 | -------------------------------------------------------------------------------- /ch04/example-4.20/example.html: -------------------------------------------------------------------------------- 1 | 2 | 32 | 33 | 34 | 35 | Animation: Fade In 36 | 37 | 61 | 62 | 63 | 64 |
65 | 66 |
67 | 68 | 69 | Canvas not supported 70 | 71 | 72 | 73 | 74 | -------------------------------------------------------------------------------- /ch04/example-4.16/example.html: -------------------------------------------------------------------------------- 1 | 2 | 32 | 33 | 34 | 35 | A sunglass image filter with Workers 36 | 37 | 60 | 61 | 62 | 63 |
64 | 66 |
67 | 68 | 69 | Canvas not supported 70 | 71 | 72 | 73 | 74 | -------------------------------------------------------------------------------- /ch05/example-5.11/example.html: -------------------------------------------------------------------------------- 1 | 2 | 32 | 33 | 34 | Calculating Frames/Second 35 | 36 | 56 | 57 | 58 | 59 |
60 | 61 |
62 | 63 | 64 | Canvas not supported 65 | 66 | 67 | 68 | 69 | 70 | 71 | -------------------------------------------------------------------------------- /ch02/example-2.10/example.html: -------------------------------------------------------------------------------- 1 | 2 | 32 | 33 | 34 | 35 | Cutouts with the nonzero winding rule 36 | 37 | 59 | 60 | 61 | 62 |
63 | Same direction
64 | Annotations
65 |
66 | 67 | 68 | Canvas not supported 69 | 70 | 71 | 72 | 73 | 74 | -------------------------------------------------------------------------------- /ch05/example-5.9/example.html: -------------------------------------------------------------------------------- 1 | 2 | 32 | 33 | 34 | Using requestAnimationFrame() 35 | 36 | 56 | 57 | 58 | 59 |
60 | 61 |
62 | 63 | 64 | Canvas not supported 65 | 66 | 67 | 68 | 69 | 70 | 71 | -------------------------------------------------------------------------------- /ch03/example-3.1/example.html: -------------------------------------------------------------------------------- 1 | 2 | 32 | 33 | 34 | Stroking and Filling Text 35 | 53 | 54 | 55 | 56 |
57 | Stroke 58 | Fill 59 | Shadow 60 |
61 | 62 | 63 | Canvas not supported 64 | 65 | 66 | 67 | 68 | 69 | --------------------------------------------------------------------------------