HTML and CSS Reference
In-Depth Information
Figure 7-3.
Showing the user's current position on Google Maps
Drawing with Canvas
HTML5 Canvas allows you to draw vector-based shapes using JavaScript. The
HTML5 Canvas element doesn't provide much inherent functionality, but it does
provide a base for you to begin drawing objects upon. Think of it as a
whiteboard for your device. This next exercise will take you through how to
create a canvas, how to begin drawing basic shapes using JavaScript, and how
to animate them.
First, create a new folder within this chapter folder called
canvas
. Create a
js
folder containing a new JavaScript file called
canvas.js
and an
index.html
file in
the
canvas
folder directory root with the following contents.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width; initial-scale=1.0;
maximum-scale=1.0; user-scalable=0; target-densitydpi=device-dpi;"/>
<title>Canvas</title>
<style type="text/css" media="screen">
body, html {
margin: 0;
height: 100%;
width: 100%;
}
