Final Tutorial: Samantha Taggart

For my tutorial, I chose to explore something that I wanted to incorporate into my Sustainability Site, but it just didn't work out. I got intimidated by all the code and ended up making graphics, but after I took the time to learn about it, I found out its really not that complicated. It is now my favorite part of HTML5. Welcome to the fabulous world of HTML5's canvas element. What is the canvas element? I'll quote the W3C's official spec:

"The canvas element provides scripts with a resolution-dependent bitmap canvas, which can be used for rendering graphs, game graphics, or other visual images on the fly."

There are only 2 methods to use it:
• width
• height
Yup, that's it! Easy enough.

There are also 2 methods to use it:
• getContext (string contextId)
• toData URL ([string type], arg1, arg2...)
The first one takes an id and returns a reference to a context of the element. The second one returns a URL to an image in a canvas.

There are several attributes to use with the getContext (string contextId) that requires JavaScript. The following are for creating a bar graph, but consult this cheat sheet for more attributes. The attributes for the bar graph example are the following:
• beginPath() - resets current path
• closePath() - marks current sub path as closed and starts a new sub path that points to the same start and end of the path that just closed
• fill() - fills sub paths w/ current fill style
• stroke() - draws a stroke on the current stroke style
• moveTo(float x, float y) - creates a new sub path w/ given x y coordinates
• lineTo(float x, float y) - adds point indicated by x y coordinates to the sub path and connects it to previous sub path w/ a straight line
• rect(float x, float y, float w, float h) - adds new closed sub path to path that represents a rectangle using given values
• fillText(string text, float x, float y, [float maxWidth]) - fills given text in given position

Now, let's get started on making our bar graph:

1. Define the canvas in your HTML5 document.


2. Add in the JavaScript. It ensures that the element is actually within the DOM and checks if the browser supports it. It also obtains a context to the element.


3. Contain the bar chart data within an array. Inside each element is the name of the data. The data's value is separated by a comma. Add a call to drawBar Chart(). This takes the data and draws a bar chart.


4. Add two more functions: drawLine() and drawRectangle().


5. Canvas isn't supported by IE, so use this JavaScript from explorecanvas.



Here is my example.

References:
http://dev.w3.org/html5/canvas-api/canvas-2d-api.html
http://blog.nihilogic.dk/2009/02/html5-canvas-cheat-sheet.html
http://code.google.com/p/explorercanvas/
http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html
http://diveintohtml5.org/canvas.html#divingin
http://www.rgraph.net/
http://html5doctor.com/an-introduction-to-the-canvas-2d-api/