Book Image

PhoneGap By Example

Book Image

PhoneGap By Example

Overview of this book

Table of Contents (17 chapters)
PhoneGap By Example
Credits
About the Author
About the Reviewers
www.PacktPub.com
Preface
Index

What is HTML5 Canvas?


Canvas is the same HTML tag as the others. However, to work with all the possibilities of canvas, we need to use JavaScript. We need to place the <canvas> tag on the page in the body section. We then need to access its context with JavaScript and do some drawings on it, almost like painting a real picture.

There is a difference between the canvas element and the canvas context. Context is an object that provides methods to draw on the canvas. Canvas can have two types of context: 2D or WebGL (3D).

Let's look onto one example of the HTML5 Canvas usage:

<!DOCTYPE HTML>
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
    </style>
  </head> 
  <body>
    <canvas id="gameCanvas" width="578" height="200"></canvas>
    <script>
      var canvas = document.getElementById('gameCanvas');
      var context = canvas.getContext('2d');
      context.font = '30pt Calibri';
 ...