Skip to content

Commit 3e8c394

Browse files
author
Simon Mackie
committed
Initial commit
0 parents  commit 3e8c394

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

94 files changed

+4417
-0
lines changed

‎.htaccess

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
AddType text/cache-manifest .manifest

‎README.txt

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
A sample HTML5 and CSS3 website created for SitePoint's book "HTML5 and CSS3 for the Real World," by Alexis Goldstein, Louis Lazaris, and Estelle Weyl.

‎canvas.html

+78
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
<!doctype html>
2+
<html class="no-js" lang="en" manifest="herald.appcache">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>The HTML5 Herald</title>
6+
<link rel="stylesheet" href="css/style.css?v=1.0">
7+
8+
<script src="js/modernizr.min.js"></script>
9+
</head>
10+
<body>
11+
<header>
12+
<h1><span>The </span><a href="index.html">HTML5 <img src="images/logo.png" alt=""> Herald</a></h1>
13+
<h2>Produced with That Good ol' Timey HTML5 &amp; CSS3</h2>
14+
<nav>
15+
<ul>
16+
<li><a href="index.html">Home</a></li>
17+
<li><a href="register.html">Sign Up</a></li>
18+
<li><a href="canvas.html">Canvas Demos</a></li>
19+
</ul>
20+
</nav>
21+
<p id="volume">Vol. MMXI</p>
22+
<p id="issue"><time datetime="1904-06-04" pubdate>June 4, 1904</time></p>
23+
</header>
24+
<div class="main">
25+
<h2>Demo 1: Drawing a rectangle</h2>
26+
<canvas width="200" height="200" id="demo1" class="myCanvas">
27+
Sorry! Your browser doesn't support Canvas.
28+
</canvas>
29+
<h2>Demo 2: Filling the canvas with a pattern</h2>
30+
<canvas width="200" height="200" id="demo2" class="myCanvas">
31+
Sorry! Your browser doesn't support Canvas.
32+
</canvas>
33+
34+
<h2>Demo 3: Creating a gradient on the canvas</h2>
35+
<canvas width="200" height="200" id="demo3" class="myCanvas">
36+
Sorry! Your browser doesn't support Canvas.
37+
</canvas>
38+
39+
<h2>Demo 4: Drawing a circle</h2>
40+
<canvas width="200" height="200" id="demo4" class="myCanvas">
41+
Sorry! Your browser doesn't support Canvas.
42+
</canvas>
43+
44+
<h2>Demo 5: Saving canvas drawings</h2>
45+
<canvas width="200" height="200" id="demo5" class="myCanvas">
46+
Sorry! Your browser doesn't support Canvas.
47+
</canvas>
48+
49+
<button name="saveButton" id="saveButton">Save Drawing</button>
50+
51+
52+
<h2>Demo 6: Drawing an image to the canvas</h2>
53+
<canvas width="200" height="200" id="demo6" class="myCanvas">
54+
Sorry! Your browser doesn't support Canvas.
55+
</canvas>
56+
57+
<img src="images/html5-logo.png" id="myImageElem">
58+
59+
60+
<h2>Demo 7: Converting an image from color to black and white</h2>
61+
<canvas width="200" height="200" id="demo7" class="myCanvas">
62+
Sorry! Your browser doesn't support Canvas.
63+
</canvas>
64+
65+
<img src="images/html5-logo.png" id="secondImage">
66+
67+
</div><!-- #main -->
68+
69+
<footer>
70+
<small>&copy; SitePoint </small>
71+
<p><a href="http://www.sitepoint.com"><img src="images/logo-sp.gif" alt="SitePoint" width="74" height="20"></a></p>
72+
</footer>
73+
<script src="js/raphael-min.js"></script>
74+
<script src="js/canvas.js"></script>
75+
76+
77+
</body>
78+
</html>

‎css/canvas.css

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
#myCanvas
2+
{
3+
border-width: 2px;
4+
border-style: dotted;
5+
border-color: black;
6+
margin: 0 20px;
7+
}

0 commit comments

Comments
 (0)