1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
|
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<!--
/**
* o------------------------------------------------------------------------------o
* | This file is part of the RGraph package - you can learn more at: |
* | |
* | http://www.rgraph.net |
* | |
* | This package is licensed under the RGraph license. For all kinds of business |
* | purposes there is a small one-time licensing fee to pay and for non |
* | commercial purposes it is free to use. You can read the full license here: |
* | |
* | http://www.rgraph.net/LICENSE.txt |
* o------------------------------------------------------------------------------o
*/
-->
<title>RGraph: What is HTML5 canvas?</title>
<meta name="keywords" content="rgraph html5 canvas charts what " />
<meta name="description" content="RGraph: What is HTML5 canvas?" />
<meta property="og:title" content="RGraph: What is HTML5 canvas?" />
<meta property="og:description" content="A brief description and a few examples of HTML5 canvas " />
<meta property="og:image" content="http://www.rgraph.net/images/logo.png"/>
<link rel="stylesheet" href="../css/website.css" type="text/css" media="screen" />
<link rel="icon" type="image/png" href="../images/favicon.png">
<!-- Place this tag in your head or just before your close body tag -->
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<script src="../libraries/RGraph.common.core.js" ></script>
<script src="../libraries/RGraph.common.tooltips.js" ></script>
<script src="../libraries/RGraph.bar.js" ></script>
<script>
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-54706-2']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</head>
<body>
<!-- Social networking buttons -->
<div id="social_icons" class="warning" style="border-radius: 10px; top: 1px; position: fixed; width: 120px; height: 20px">
<!-- <a title="Bookmark with delicious" href="http://delicious.com/save?jump=close&v=4&noui&jump=close&url=http://www.rgraph.net¬es=RGraph%20is%20a%20HTML5%20based%20javascript%20charts%20library%20supporting%20a%20wide%20range%20of%20different%20chart%20types&title=RGraph:%20Javascript%20charts%20%26%20graph%20library" target="_blank"><img src="../images/delicious.png" alt="Bookmark with delicious" width="22" height="22" border="0" style="position: relative; top: 1px" /></a> -->
<a href="http://twitter.com/home/?status=RGraph%3A%20Javascript+charts+library+http%3A%2F%2Fwww.rgraph.net+%23rgraph+%23html5+%23canvas+%23javascript+%23charts+@_rgraph" target="_blank" title="Mention RGraph on Twitter"><img src="../images/twitter.png" alt="Mention RGraph on Twitter"/></a>
<iframe src="http://www.facebook.com/plugins/like.php?app_id=253862424642173&href=http%3A%2F%2Fwww.rgraph.net&send=false&layout=button_count&width=450&show_faces=false&action=like&colorscheme=light&font=arial&height=21" scrolling="no" frameborder="0" style="width: 80px; height:21px; position: relative; top: 1px"></iframe>
</div>
<script>
// Opera fix
if (navigator.userAgent.indexOf('Opera') == -1) {
document.getElementById("social_icons").style.position = 'fixed';
}
</script>
<div id="google_plusone">
<!-- Place this tag where you want the +1 button to render -->
<g:plusone href="http://www.rgraph.net"></g:plusone>
</div>
<!-- Social networking buttons -->
<div id="breadcrumb">
<a href="../index.html">RGraph: HTML5 Javascript charts library</a>
>
<a href="index.html">Documentation</a>
>
What is HTML5 canvas?
</div>
<h1>RGraph: <span>HTML5 Javascript charts library</span> - What is HTML5 canvas?</h1>
<script>
if (RGraph.isIE8()) {
document.write('<div style="background-color: #fee; border: 2px dashed red; padding: 5px"><b>Important</b><br /><br /> Internet Explorer 8 does not natively support the HTML5 canvas tag, so if you want to see the charts, you can either:<ul><li>Install <a href="http://code.google.com/chrome/chromeframe/">Google Chrome Frame</a></li><li>Use ExCanvas. This is provided in the RGraph Archive.</li><li>Use another browser entirely. Your choices are Firefox 3.5+, Chrome 2+, Safari 4+ or Opera 10.5+. </li></ul> <b>Note:</b> Internet Explorer 9 fully supports the canvas tag.</div>');
}
</script>
<ul>
<li><a href="#introduction">Introduction</a></li>
<li><a href="#history">History</a></li>
<li><a href="#example">Example</a></li>
<li><a href="#compare">Canvas compared to SVG</a></li>
<li><a href="#support">Browser support for HTML5 canvas</a></li>
</ul>
<a name="introduction"></a>
<h2>Introduction</h2>
<p>
HTML5 canvas is a new HTML tag (<i><canvas></i>) which is part of the forthcoming HTML5 standard. It allows bitmap
drawing which is controlled using Javascript, and is what the RGraph libraries use to draw the charts. You could
liken it to a piece of paper which is part of your HTML page, on to which you can draw. Because you use Javascript to
draw on the canvas it becomes part of your page and allows interaction very easily.
</p>
<p>
Canvas uses a "fire and forget" drawing methodology - there is no DOM that is maintained, so if you want to alter something
you will probably have to redraw the entire canvas. The lack of a DOM means that canvas is fast to draw on and very
responsive - important when you're providing iteractive charts to your users.
</p>
<a name="history"></a>
<h2>History</h2>
<p>
HTML5 canvas was originally introduced by Apple for use in WebKit (which is used in their Safari browser and Google Chrome).
It is now part of the HTML5 specification and supported by the majority (if not all) of modern web browsers.
</p>
<a name="example"></a>
<h2>Example</h2>
<canvas id="cvs" width="350" height="250" style="border: 1px dashed gray; float: right">[No canvas support]</canvas>
<script>
canvas = document.getElementById("cvs");
context = canvas.getContext('2d');
// Draw the red triangle
context.beginPath();
context.strokeStyle = 'black';
context.fillStyle = 'red';
context.moveTo(100, 25);
context.lineTo(150, 100);
context.lineTo(50, 100);
context.lineTo(100, 25);
context.stroke();
context.fill();
// Draw the blue square
context.beginPath();
context.fillStyle = 'rgba(0,0,255,0.5)';
context.strokeRect(100, 75, 100,100);
context.fillRect(100, 75, 100,100);
context.stroke();
context.fill();
// Draw the yellow circle
context.beginPath();
context.globalAlpha = 0.5;
context.fillStyle = 'yellow';
context.arc(200,175,50,0,2 * Math.PI, 0);
context.stroke();
context.fill();
</script>
<p>
The example to the right is a very simple case of drawing a few primitives on the canvas. The dotted border is
provided by CSS to illustrate the drawing area.
</p>
<p>
The <canvas> tag itself is defined with just a width/height/id attribute. The one here also has a style attribute
to make it more evident in the page. The HTML used is shown below:
</p>
<br clear="all" />
<pre class="code">
<canvas id="cvs" width="375" height="250">[No canvas support]<canvas>
</pre>
The content in between the tags is not shown if the browser supports canvas, and is if the browser doesn't. This provides
for fallback content if the users browser doesn't support canvas.
<a name="compare"></a>
<h2>HTML5 Canvas compared to SVG</h2>
<p>
HTML5 canvas can be compared (a bit) to SVG - which is a vector based alternative for drawing in HTML pages. SVG is
at a more abstract level than canvas and maintains a record of everything drawn, using a DOM. This is then converted
to a bitmap when shown. In the above example, if the blue squares coordinates are changed (eg in an animation),
then the whole canvas needs to be cleared and redrawn for each frame.
</p>
<p>
As a result of not having to maintain a DOM <canvas> is fast to draw on and display to the browser.
</p>
<a name="support"></a>
<h2>Browser support for HTML5 canvas</h2>
<p>
The majority of current browsers support canvas, including IE9. Earlier versions of MSIE have some support through
compatibility layers provided by Google and Mozilla. One such library - ExCanvas - is provided in the RGraph archive
allowing IE8 to display the graphs, albeit without many of the dynamic features. You can read more on this
<a href="msie.html">here</a>.
</p>
<p align="right">
<b>
<a href="index.html">Full documentation »</a>
</b>
</p>
</body>
</html>
|
