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">
<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;"/>
<style type="text/css" media="screen">
body, html {
margin: 0;
height: 100%;
width: 100%;
Search WWH ::

Custom Search