Browse Library
Sign In Start Free Trial
Close icon Search icon
Account
Browse Library Advanced Search Sign In Start Free Trial

Add to playlist

Create a Playlist

Modal Close icon
You need to login to use this feature.
  • Canvas Cookbook
  • Toc
  • feedback
Canvas Cookbook

Canvas Cookbook

By : Purushottam Joshi
close
Canvas Cookbook

Canvas Cookbook

By: Purushottam Joshi

Overview of this book

With the growing popularity of HTML5 Canvas, this book offers tailored recipes to help you develop portable applications, presentations, and games. The recipes are simple yet creative and build on each other. At every step, the book inspires the reader to develop his/her own recipe. From basic to advanced, every aspect of Canvas API has been covered to guide readers to develop their own application, presentation, or game.
Table of Contents (11 chapters)
close
Preface
Preface
What this book covers
What you need for this book
Who this book is for
Sections
Conventions
Reader feedback
Customer support
Free Chapter
1
1. Paths and Text
chevron up
1. Paths and Text
Introduction
Drawing lines
Drawing horizontal, vertical, and assorted lines
Drawing joins
Drawing arc1
Drawing arc2
Drawing a quadratic curve
Drawing a rainbow
Drawing a Bezier curve
Drawing a flag
Drawing text
Drawing 3D text with shadows
Adding shadows to objects
Drawing a house
2
2. Shapes and Composites
2. Shapes and Composites
Introduction
Drawing rectangles
Drawing triangles
Drawing circles
Drawing gradients
Working with custom shapes and styles
Demonstrating translation, rotation, and scaling
Drawing an ellipse
Saving and restoring canvas state
Demonstrating composites
Drawing a mouse
3
3. Animation
3. Animation
Introduction
Creating an animation class
Demonstrating acceleration
Demonstrating gravity
Animating a line
Animating text
Animating a clock
Animating a solar system
Animating particles
Animating a particle fountain
Animating a rain effect
Animating a snow effect
4
4. Images and Videos
4. Images and Videos
Introduction
Drawing and cropping an image
Rendering effects to images
Drawing a mirror image
Clipping a path
Animated clipping
Converting canvas to image and back to canvas
Working with videos
Rendering effects to videos
Creating a pixelated image focus
5
5. Interactivity through Events
5. Interactivity through Events
Introduction
Working with mouse coordinates
Making a face smile
Detecting a point in a path
Simulating car movements
Dragging and dropping
Combining events and animation
Demonstrating a touch event
6
6. Creating Graphs and Charts
6. Creating Graphs and Charts
Introduction
Drawing the axes
Drawing a simple equation
Drawing a sinusoidal wave
Drawing a line graph
Drawing a bar graph
Drawing a pie chart
7
7. 3D Modeling
7. 3D Modeling
Introduction
Rendering 3D objects
Drawing 3D cubes
Drawing a 3D cylinder and a cone
Drawing a 3D sphere and a torus
Drawing 3D text decorated by particles
Drawing a panorama
Drawing a snowman
8
8. Game Development
8. Game Development
Introduction
Understanding the gaming states
Drawing on canvas
Playing some music
Using sprites from the sprite sheet
Demonstrating animation
Demonstrating collision
Demonstrating physics
Game 1 – Fruit Basket
Game 2 – Catapult
9
9. Interoperability and Deployment
9. Interoperability and Deployment
Introduction
Understanding interoperability
Styling text and background using CSS
Deploying a game on Android mobile
10
Index
Index

Chapter 1. Paths and Text

HTML5 Canvas is an element that provides the user with a workspace of a desired size for drawing. The Canvas API contains a rich set of drawing functions that can be accessed through JavaScript. The canvas element can be styled using CSS (Cascaded Style Sheet). CSS styling can improve performance and add interesting effects.

Thus, HTML5 Canvas programming can be done with the support of JavaScript and CSS.

Why HTML5 Canvas?

  • HTML5 Canvas is fully interactive.
  • Every object drawn on canvas can be animated.
  • Canvas is flexible enough to let you draw dynamic graphics. Also it allows adding audio and video.
  • All major browsers support canvas. However, the support and implementation differs from browser to browser.
  • It is a standard open technology.
  • Canvas is portable. Once created, an HTML5 Canvas application can run on almost all devices.
  • To develop Canvas programs you just need a code editor and a browser. You can use sublime (available on www, Text, or HTMLPad), and you can test your code on Google Chrome or Firefox. You can find sublime text at http://www.sublimetext.com/ and HTMLPad at http://www.htmlpad.net/. However, for the recipes in this book I have used Notepad.
  • HTML5 Canvas can be used for gaming, advertising, data representation, education and training, and art and decoration.
End of Section 1
Next Section
bookmark search playlist font-size

Change the font size

margin-width

Change margin width

day-mode

Change background colour

Close icon Search
Country selected
Close icon Your notes and bookmarks

Delete Bookmark

Modal Close icon
Are you sure you want to delete it?
Cancel
Yes, Delete