Week 5: Project 1 Presentations, HTML5 Drawing App Demo

Topics:

• Project 1 Presentations
• HTML5 Drawing App

HTML5 Drawing App Demo

References used in adapting this demo:

• 2.5.1 HTML5 Canvas Mouse Coordinates Tutorial
• Create a Drawing App with HTML5 Canvas and JavaScript
• Creating an HTML 5 canvas painting application

Like with the Actionscript method, to create a drawing application with HTML5 and CSS you must react to mouse events. There is also an event listener you can invoke on the canvas element.

Adding event listeners with Javascript

Here are the mouse events that you can listen for:

• mousedown
• mouseup
• dblclick
• mousemove
• mouseover
• mouseout

And this is the format for adding the event listener:

element.addEventListener('event', eventhandler, useCapture);

The last parameter, useCapture, is complicated and for this application you don’t need to do anything more than set it to false.

The other thing that you need to add to our previous HTML5 drawing is being able to calculate the current position of the mouse. This is a little more complicated when you are talking about an html document than it was for a flash movie because you have to first figure out where the canvas element is in relation to the browser window, and add an offset to compensate for it.

Homework

Find an example of an online photo or image gallery that implements an unusual or unique user interface. This example should be something that you aspire to build or could inspire a project of your own. It can be Flash or Javascript.