O'Reilly logo

PhoneGap by Andrew Lunny

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Time for action: Dinner dashboard

We're going to set up a small dashboard next to the list of foods that will display circles to indicate how many foods are in th list—a red circle for five foods, a yellow circle for one:

  1. The first thing we're going to do is add an empty canvas to our page. The canvas itself is just an HTML element, so we can style it through CSS but, to ensure things work as expected, we need to specify the width and height as attributes of the element. Here's where our tag fits in:
    <div id="noVideo"></div>
    <canvas id="myCanvas" width="50" height="400"></canvas><h1>List Some Food</h1>

    And here's how we'll style it with CSS:

    #myCanvas {
        position: absolute;
        z-index: 0;
        left: 280px;
        opacity: 0.8;
        background: #ccf;
    }

    Take a quick look ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required