source: Dev/branches/Cartis/Tiles preview/js/RGraph/docs/what-is-html5-canvas.html @ 283

Last change on this file since 283 was 283, checked in by tjcschipper, 13 years ago

Cartis Mockup werkt!

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