Scripting and Applications - Web Standards: Mastering HTML5, CSS3, and XML - page 199

In Listing 6-7, you can see how to draw a simple triangle on the HTML5 canvas. First, a custom-size canvas is
declared with alternate textual content for older browsers that do not support the HTML5 canvas. Second, a script
element specifies two variables to shorten the code, a two-dimensional canvas, an emerald fill color, the coordinates
of the three corners of a triangle, and the triangle with the fill color.
Listing 6-7. Drawing on the HTML5 Canvas
<canvas id="samplecanvas" width="200" height="200">
A triangle (requires HTML5 Canvas support)
</canvas>
<script>
var mycanvas = document.getElementById("samplecanvas"),
context2d = mycanvas.getContext("2d");
context2d.fillStyle = "#2ad3a8";
context2d.beginPath();
context2d.moveTo(100, 0);
context2d.lineTo(0, 55);
context2d.lineTo(165, 100);
context2d.fill();
</script>
The HTML5 canvas is supported by IE9+, Firefox 3.0+, Chrome 1.0+, Safari 3.0+, and Opera 9.5+.
The HTML5 File and DnD APIs
The HTML5 File API provides easy-to-use file control in web browsers. The File API is being standardized by the
World Wide Web Consortium [9]. The Drag & Drop (DnD) API specification defines an event-based mechanism that
adds additional markup for declaring elements to be draggable on web pages. The DnD API is being developed by the
Web Hypertext Application Technology Working Group [10].
The code in Listing 6-8 creates an interface to choose files either through browsing the directories on your
computer or by using drag and drop. The name, size, and MIME type of the selected files will be retrieved using the
HTML5 File API.
Listing 6-8. File API Demonstration
<h1>Choose file(s)</h1>
<p>
<input id="upload" type="file" multiple="multiple">
</p>
<div id="drop">
You can also drag and drop your files here
</div>
<h1>Retrieved file information</h1>
<ul id="fileList">
<li class="no-items">&lt;no files uploaded yet&gt;</li>
</ul>
<script>
(function () {
var filesUpload = document.getElementById("upload"),
dropArea = document.getElementById("drop"),
fileList = document.getElementById("fileList");
function fileTransfer (files) {