- 348 pages
- English
- ePUB (mobile friendly)
- Available on iOS & Android
eBook - ePub
HTML5 Canvas Cookbook
About this book
In Detail
The HTML5 canvas is revolutionizing graphics and visualizations on the Web. Powered by JavaScript, the HTML5 Canvas API enables web developers to create visualizations and animations right in the browser without Flash. Although the HTML5 Canvas is quickly becoming the standard for online graphics and interactivity, many developers fail to exercise all of the features that this powerful technology has to offer.
The HTML5 Canvas Cookbook begins by covering the basics of the HTML5 Canvas API and then progresses by providing advanced techniques for handling features not directly supported by the API such as animation and canvas interactivity. It winds up by providing detailed templates for a few of the most common HTML5 canvas applications-data visualization, game development, and 3D modeling. It will acquaint you with interesting topics such as fractals, animation, physics, color models, and matrix mathematics.
By the end of this book, you will have a solid understanding of the HTML5 Canvas API and a toolbox of techniques for creating any type of HTML5 Canvas application, limited only by the extent of your imagination.
Approach
Written in cookbook style, this book offers a wide array of techniques for building HTML5 Canvas applications. Each recipe contains step-by-step instructions followed by analysis of what was done in each task and other useful information. The book is designed so that you can read it chapter by chapter, or you can look at the list of recipes and refer to them in no particular order.
Who this book is for
This book is geared towards web developers who are familiar with HTML and JavaScript. It is written for both beginners and seasoned HTML5 developers with a good working knowledge of JavaScript.
Tools to learn more effectively
Saving Books
Keyword Search
Annotating Text
Listen to it instead
Information
HTML5 Canvas Cookbook
Table of Contents
HTML5 Canvas Cookbook
Credits
About the Author
About the Reviewers
www.PacktPub.com
Support files, eBooks, discount offers and more
Why Subscribe?
Free Access for Packt account holders
Preface
What this book covers
What you need for this book
Who this book is for
What is HTML5 Canvas
Conventions
Reader feedback
Customer support
Downloading the example code for this book
Errata
Piracy
Questions
1. Getting Started withPaths and Text
Introduction
Drawing a line
How to do it...
How it works...
There's more...
See also...
Drawing an arc
How to do it...
How it works...
There's more...
See also...
Drawing a Quadratic curve
How to do it...
How it works...
See also...
Drawing a Bezier curve
How to do it...
How it works...
See also...
Drawing a zigzag
How to do it...
How it works...
Line join styles
Drawing a spiral
How to do it...
How it works...
Working with text
How to do it...
How it works...
There's more...
See also...
Drawing 3D text with shadows
How to do it...
How it works...
Unlocking the power of fractals: Drawing a haunted tree
How to do it...
How it works...
There's more...
2. Shape Drawing and Composites
Introduction
Drawing a rectangle
How to do it...
How it works...
There's more...
The fillRect() method
The strokeRect() method
See also...
Drawing a circle
How to do it...
How it works...
See also...
Working with custom shapes and fill styles
How to do it...
How it works...
See also...
Fun with Bezier curves: drawing a cloud
How to do it...
How it works...
Drawing transparent shapes
How to do it...
How it works...
Working with the context state stack to save and restore styles
Getting ready...
How to do it...
How it works...
There's more...
See also...
Working with composite operations
Getting ready...
How to do it...
How it works...
Creating patterns with loops: drawing a gear
How to do it...
How it works...
See also...
Randomizing shape properties: drawing a field of flowers
How to do it...
How it works...
Creating custom shape functions: playing card suits
How to do it...
How it works...
Putting it all together: drawing a jet
How to do it...
How it works...
3. Working with Images and Videos
Introduction
Drawing an image
How to do it...
How it works...
There's more...
Cropping an image
How to do it...
How it works...
Copying and pasting sections of the canvas
How to do it...
How it works...
Working with video
Getting ready...
How to do it...
How it works...
Getting image data
Getting ready...
How to do it...
How it works...
Introduction to pixel manipulation: inverting image colors
How to do it...
How it works...
Inverting video colors
How to do it...
How it works...
Converting image colors to grayscale
How to do it...
How it works...
Converting a canvas drawing into a data URL
How to do it...
How it works...
Saving a canvas drawing as an image
How to do it...
How it works...
Loading the canvas with a data URL
How to do it...
How it works...
Creating a pixelated image focus
How to do it...
How it works...
4. Mastering Transformations
Introduction
Translating the canvas context
How to do it...
How it works...
Rotating the canvas context
How to do it...
How it works...
See also...
Scaling the canvas context
How to do it...
How it works...
See also...
Creating a mirror transform
How to do it...
How it works...
Creating a custom transform
How to do it...
How it works...
There's more...
Shearing the canvas context
How to do it...
How it works...
Handling multiple transforms with the state stack
How to do it...
How it works...
Transforming a circle into an oval
How to do it...
How it works...
See also...
Rotating an image
How to do it...
How it works...
There's more...
See also...
Drawing a simple logo and randomizing its position, rotation, and scale
How to do it...
How it works...
5. Bringing the Canvas to Life with Animation
Introduction
Creating an Animation class
Getting ready...
How to do it...
How it works...
Creating a linear motion
How to do it...
How it works...
See also...
Creating acceleration
How to do it...
How it works...
See also...
Creating oscillation
How to do it...
How it works...
See also...
Oscillating a bubble
How to do it...
How it works...
See also...
Swinging a pendulum
How to do it...
How it works...
See also...
Animating mechanical gears
How to do it...
How it works...
See also...
Animating a clock
How to do it...
How it works...
See also...
Simulating particle physics
How to do it...
How it works...
There's more...
See also...
Creating microscopic life forms
How to do it...
How it works...
See also...
Stressing the canvas and displaying the FPS
How to do it...
How it works...
There's more...
See also...
6. Interacting with the Canvas: Attaching Event Listeners to Shapes and Regions
Introduction
Creating an Events class
How to do it...
How it works...
Working with canvas mouse coordinates
How to do it...
How it works...
Attaching mouse event listeners to regions
How to do it...
How it works...
See also...
Attaching touch event listeners to regions on a mobile device
How to do it...
How it works...
See also...
Attaching event listeners to images
How to do it...
How it works...
See also...
Dragging-and-dropping shapes
How to do it...
How it works...
See also...
Dragging-and-dropping images
How to do it...
How it works...
See also...
Creating an image magnifier
How to do it...
How it works...
See also...
Creating a drawing application
How to do it...
How it works...
There's more...
See also... ...
Table of contents
- HTML5 Canvas Cookbook
Frequently asked questions
Yes, you can cancel anytime from the Subscription tab in your account settings on the Perlego website. Your subscription will stay active until the end of your current billing period. Learn how to cancel your subscription
No, books cannot be downloaded as external files, such as PDFs, for use outside of Perlego. However, you can download books within the Perlego app for offline reading on mobile or tablet. Learn how to download books offline
Perlego offers two plans: Essential and Complete
- Essential is ideal for learners and professionals who enjoy exploring a wide range of subjects. Access the Essential Library with 800,000+ trusted titles and best-sellers across business, personal growth, and the humanities. Includes unlimited reading time and Standard Read Aloud voice.
- Complete: Perfect for advanced learners and researchers needing full, unrestricted access. Unlock 1.4M+ books across hundreds of subjects, including academic and specialized titles. The Complete Plan also includes advanced features like Premium Read Aloud and Research Assistant.
We are an online textbook subscription service, where you can get access to an entire online library for less than the price of a single book per month. With over 1 million books across 990+ topics, we’ve got you covered! Learn about our mission
Look out for the read-aloud symbol on your next book to see if you can listen to it. The read-aloud tool reads text aloud for you, highlighting the text as it is being read. You can pause it, speed it up and slow it down. Learn more about Read Aloud
Yes! You can use the Perlego app on both iOS and Android devices to read anytime, anywhere — even offline. Perfect for commutes or when you’re on the go.
Please note we cannot support devices running on iOS 13 and Android 7 or earlier. Learn more about using the app
Please note we cannot support devices running on iOS 13 and Android 7 or earlier. Learn more about using the app
Yes, you can access HTML5 Canvas Cookbook by Eric Rowell in PDF and/or ePUB format, as well as other popular books in Computer Science & Computer Graphics. We have over one million books available in our catalogue for you to explore.