1. HTML 5 Previous version: HTML4.01, 1999 Still work in progress, most browsers support some of it

2. HTML 5 • New features based on HTML, CSS, DOM, Javascript • Reduces need for externals plugins (like Flash, ..) • “Should be” device independent

3. HTML 5 – interesting features • <canvas> element tag for 2D drawing • <audio> and <video> for media playback • Other new elements ( <article>, <footer>, <mark>, ...) • Support for local storage • New form controls (calendar, ..)

4. HTML 5 – Canvas element • Focus on <canvas> element • A container for graphics • ( 0, 0 ) is top left corner of canvas • Need to use a script to draw the graphics • Supported by IE9, Firefox, Safari, Opera, Chrome

5. 500 X 200 Canvas element (0, 0) (500, 0) (200, 0) (500, 200)

6. HTML 5 • getContext( “2d” ) returns a CanvasRenderingContext2D object that allows to draw on the canvas •  could ultimately reduce need for Flash • var can = document.getElementsByTagName( “canvas” )[0]; • var context = can.getContext( “2d” );

7. HTML 5 • Draw and paint text, lines, rectangles, circles, polygons, images, .. • Save and restore state of context • Change coordinate system (rotate, translate, ..) • Gradients, shadows, images (access pixels), ..

8. HTML 5 – setting the context • Set value of fillStyle and strokeStyle of the context • rgb  3 parameters • rgba  4th parameter is for opacity value • context.fillStyle = "rgb(255, 0, 0 )"; • context.strokeStyle = "rgba(0, 255, 0, 0.8 )"; • 20% transparent (80% opaque)

9. HTML 5 – rectangle • To paint the inside of a rectangle, use fillRect; to draw the rectangle, use strokeRect (x and y are relative to the canvas) • void fillRect ( floatx, floaty, floatwidth, floatheight); • void strokeRect ( doublex, doubley, doublewidth, doubleheight);

10. HTML 5 – rectangle • To clear a rectangle • void clearRect ( floatx, floaty, floatwidth, floatheight); • Color used is the color of the canvas

11. HTML 5 – drawing shapes • Set context (stroke and/or fill color) • Start a “path” to draw or fill context.beginPath( ); • Build the path • Close the path (or not) • Draw it or fill it

12. HTML 5 - line • To draw a line context.beginPath( ); context.moveTo( 50, 50 ); // start point context.lineTo( 250, 50 ); context.stroke( ); // use current strokeStyle color

13. HTML 5 - polygon • // build a polygon context.beginPath( ); context.moveTo( 50, 100 ); context.lineTo( 250, 100 ); context.lineTo( 120, 180 ); context.lineTo( 80, 150 ); context.closePath( ); // close the polygon

14. HTML 5 - polygon • Now draw the polygon (defined by the current path) context.stroke( ); • Now fill the polygon (defined by the current path) context.fill( );

15. HTML 5 – arcs and circles • A circle is an arc that is full • An arc is a portion of a circle defined by a start angle and an endAngle • Need center, radius, and whether the drawing is clockwise or counterclockwise

16. HTML 5 – arcs and circles • void arc ( floatx, floaty, floatradius, floatstartAngle, floatendAngle, booleananticlockwise); • Angles are in radians, measured from x axis, going clockwise • If endAngle – startAngle = 2 * PI ( or a multiple of 2 * PI )  circle • If endAngle – startAngle = PI ( or –PI)  half circle

17. HTML 5 – arcs and circles • // build an arc context.beginPath( ); x = 200; // relative to canvas y = 100; // relative to canvas radius = 50; startAngle = 0; endAngle = Math.PI / 4; // 45 degrees anticlockwise = true;

18. HTML 5 – arcs and circles context.arc( x, y, radius, startAngle, endAngle, anticlockwise ); • Draw the arc context.stroke( ); • Fill the arc context.fill( );

19. HTML 5 – arcs and circles • Not what you expected for the filling of the arc? •  Fill 2 half circles instead

20. HTML 5 – Pacman • Paint the Pacman, Paint the full circle, erase the full circle, Paint the Pacman, .. • Need to do the above with some time between the paintings (otherwise too fast) • Can make Pacman move

21. HTML 5 – More Pacman • Can make Pacman move responding to an event ( right key for example) • onkeydown event