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.
This site is for the painter Jovan Karlo Villalba. The site uses Flash to animate the photos of his painting for a simple and clean presentation.
http://jovanvillalba.com/3/artist.asp?ArtistID=5398&Akey=C3TWDG6T
This is a site with interesting animations which also works as a mobile version
http://www.dhteumeuleu.com/
http://www.1stwebdesigner.com/css/57-free-image-gallery-slideshow-and-lightbox-solutions/
http://www.visual-blast.com/flash/free-flash-gallery-solutions-for-your-images/
http://activeden.net/item/3d-interactive-gallery-/full_screen_preview/6337