HTML5 Canvas

Let's Draw Stuff on the HTML5 Canvas
'''Canvas Experiment activity: Experiment and draw an entire scene on just the Canvas. Insert the Canvas into your poem page where the picture is.'''


 * See the Draw example here: http://dreamsyntax.org/patterns/html5/draw.html
 * Download the quick canvas cheatsheet here: http://blog.nihilogic.dk/2009/02/html5-canvas-cheat-sheet.html

Suggested ideas: Something relating to your poem. OR maybe you want to have an accompanying picture which is totally absurd and out of this world and completely irrelevant to the poem. That is acceptable too. You might consider drawing things that can be accomplished with geometric shapes such as: a simple xmas tree (stacked triangles), a Moon with craters (stacked circles), Fried egg on a plate (appropriately coloured stacked circles), Animal face (anything). Use your imagination.


 * Use drawing tools like in the draw example
 * Try adding an image in with "drawImage" (see below)
 * Instead of just using solid colours, use this gradient generator to apply gradients on it! - http://www.colorzilla.com/gradient-editor/
 * Add some text-shadows to your title - some suggested effects: the easiest being the Stereographic and other easy text effects

drawImage
Can you figure out how to add an image to your canvas using drawImage?

var myPicture = new Image; myPicture.src = 'images/myPicture.png'; function drawPicture { canvasContext.drawImage(myPicture, 100, 100); }

Javascript onClick and onLoad
In the example, you will see that the drawing is triggered by a onClick of a button.

You can trigger your drawing function to appear when the page loads by changing your body tag to this:



You can have more than one function as well. Experiment with seperate functions if you have time.

Hang on, that looks familiar
Yes. You can do something like this in actionscript, javascript, python, processing, so many other programming languages... Although you may think this looks a bit boring or simple (and you may find that many programming classes and books will start with this seemingly banal activity, what you should understand is that this means that you are now able to draw things ON THE PAGE, anywhere you like. You can control pixels at will!

But this doesn't work in IE and i'm still using IE6 or something equally terrible
Then use this polyfill to use Canvas in IE: http://excanvas.sourceforge.net/

There are many HTML5 Polyfills out there, check out the whole list!

More on HTML5 Canvas Text-effects

 * http://www.html5rocks.com/en/tutorials/canvas/texteffects/
 * http://dev.opera.com/articles/view/html-5-canvas-the-basics/
 * http://www.html5rocks.com/en/tutorials/canvas/integrating/