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.
  • Book Overview & Buying Canvas Cookbook
  • Table Of Contents Toc
  • Feedback & Rating feedback
Canvas Cookbook

Canvas Cookbook

By : Purushottam Joshi
Buy this Book
close
close
Canvas Cookbook

Canvas Cookbook

By: Purushottam Joshi
Buy this Book

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
close
close
Preface
Icon
Preface
Icon
What this book covers
Icon
What you need for this book
Icon
Who this book is for
Icon
Sections
Icon
Conventions
Icon
Reader feedback
Icon
Customer support
Free Chapter
1
1. Paths and Text
Icon
1. Paths and Text
Icon
Introduction
Icon
Drawing lines
Icon
Drawing horizontal, vertical, and assorted lines
Icon
Drawing joins
Icon
Drawing arc1
Icon
Drawing arc2
Icon
Drawing a quadratic curve
Icon
Drawing a rainbow
Icon
Drawing a Bezier curve
Icon
Drawing a flag
Icon
Drawing text
Icon
Drawing 3D text with shadows
Icon
Adding shadows to objects
Icon
Drawing a house
2
2. Shapes and Composites
Icon
2. Shapes and Composites
Icon
Introduction
Icon
Drawing rectangles
Icon
Drawing triangles
Icon
Drawing circles
Icon
Drawing gradients
Icon
Working with custom shapes and styles
Icon
Demonstrating translation, rotation, and scaling
Icon
Drawing an ellipse
Icon
Saving and restoring canvas state
Icon
Demonstrating composites
Icon
Drawing a mouse
3
3. Animation
chevron up
Icon
3. Animation
Icon
Introduction
Icon
Creating an animation class
Icon
Demonstrating acceleration
Icon
Demonstrating gravity
Icon
Animating a line
Icon
Animating text
Icon
Animating a clock
Icon
Animating a solar system
Icon
Animating particles
Icon
Animating a particle fountain
Icon
Animating a rain effect
Icon
Animating a snow effect
4
4. Images and Videos
Icon
4. Images and Videos
Icon
Introduction
Icon
Drawing and cropping an image
Icon
Rendering effects to images
Icon
Drawing a mirror image
Icon
Clipping a path
Icon
Animated clipping
Icon
Converting canvas to image and back to canvas
Icon
Working with videos
Icon
Rendering effects to videos
Icon
Creating a pixelated image focus
5
5. Interactivity through Events
Icon
5. Interactivity through Events
Icon
Introduction
Icon
Working with mouse coordinates
Icon
Making a face smile
Icon
Detecting a point in a path
Icon
Simulating car movements
Icon
Dragging and dropping
Icon
Combining events and animation
Icon
Demonstrating a touch event
6
6. Creating Graphs and Charts
Icon
6. Creating Graphs and Charts
Icon
Introduction
Icon
Drawing the axes
Icon
Drawing a simple equation
Icon
Drawing a sinusoidal wave
Icon
Drawing a line graph
Icon
Drawing a bar graph
Icon
Drawing a pie chart
7
7. 3D Modeling
Icon
7. 3D Modeling
Icon
Introduction
Icon
Rendering 3D objects
Icon
Drawing 3D cubes
Icon
Drawing a 3D cylinder and a cone
Icon
Drawing a 3D sphere and a torus
Icon
Drawing 3D text decorated by particles
Icon
Drawing a panorama
Icon
Drawing a snowman
8
8. Game Development
Icon
8. Game Development
Icon
Introduction
Icon
Understanding the gaming states
Icon
Drawing on canvas
Icon
Playing some music
Icon
Using sprites from the sprite sheet
Icon
Demonstrating animation
Icon
Demonstrating collision
Icon
Demonstrating physics
Icon
Game 1 – Fruit Basket
Icon
Game 2 – Catapult
9
9. Interoperability and Deployment
Icon
9. Interoperability and Deployment
Icon
Introduction
Icon
Understanding interoperability
Icon
Styling text and background using CSS
Icon
Deploying a game on Android mobile
10
Index
Icon
Index

Animating a line

This animated line recipe shows a very basic animation, in which the line moves to and fro. The output of the recipe is shown here:

Animating a line

How to do it…

The actual output is a single canvas with the animated line. The previous image tries to help you visualize the frames in different stages of the animation. You need to try this example to get a feel. The code is given as follows:

The HTML code:

<html>
<head>
<title>A simple line animation</title>
<script src="LineAnimation.js"></script>
</head>
<body onload="init();">
<canvas id="MyCanvasArea" width="300" height="200" style="border:2px solid blue;" >
   your browser does not support canvas
</canvas>
<h1>An animated line</h1>
</body>
</html>

The JavaScript file, as mentioned in the <script> tag in the previous code:

var x =  0;
var y = 80;
var xEnd=200;
var goRight=true;
var canvas...

Unlock full access

Continue reading for free

A Packt free trial gives you instant online access to our library of over 7000 practical eBooks and videos, constantly updated with the latest in tech
Start a 7-day FREE trial
End of Section 6
Next Section

Create a Note

Modal Close icon
You need to login to use this feature.
notes
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

Delete Note

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

Edit Note

Modal Close icon
Write a note (max 255 characters)
Cancel
Update Note

Confirmation

Modal Close icon
claim successful
Order Page Read Now

Buy this book with your credits?

Modal Close icon
Are you sure you want to buy this book with one of your credits?
Close
YES, BUY