Creating acceleration

Now that we have a handle on the basics of animation, let's try something a little bit more complex by accelerating a box downwards due to the force of gravity.

startAnimation() methodCreating acceleration

How to do it...

Follow these steps to draw a box at the top of the canvas which falls downward due to the force of gravity:

  1. Link to the Animation class:
    <head>
    <script src="animation.js">
    </script>
  2. Instantiate an Animation object and get the canvas context:
        <script>
        window.onload = function(){
            var anim = new Animation("myCanvas");
            var canvas = anim.getCanvas();
            var context = anim.getContext();
  3. Define gravity and create a box object that contains the box's position, x and ...

Get HTML5 Canvas Cookbook now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial