Sign In Start Free Trial
Account

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
10
Index

Animating a clock


An animated clock can be visualized easily. The output of this recipe is:

How to do it…

The recipe for the clock is as follows:

The HTML code:

<html>
<head>
<title>Animated Clock</title>
<script src="AnalogClock.js"></script>
</head>
<body onload="animate();">
<canvas id="MyCanvasArea" width="550" height="400" style="border:2px solid blue;" >
   your browser does not support canvas
</canvas>
<h1>An Elegant Analog Clock</h1>
</body>
</html>

The JavaScript code:

  function animate()
  {
    reqAnimFrame = window.mozRequestAnimationFrame    ||
                window.webkitRequestAnimationFrame ||
                window.msRequestAnimationFrame     ||
                window.oRequestAnimationFrame
                ; 
   
    showClock();
    reqAnimFrame(animate); 
  }
        function showClock() {

            // DEFINE CANVAS AND ITS CONTEXT.
            var can = document.getElementById('MyCanvasArea...

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
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