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

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

HTML 5 – interesting features element tag for 2D drawing and for media playback Other new elements (,,,...) Support for local storage New form controls (calendar,..)

HTML 5 – Canvas element Focus on 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

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

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” );

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),..

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

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 ( float x, float y, float width, float height); void strokeRect ( double x, double y, double width, double height);

HTML 5 – rectangle To clear a rectangle void clearRect ( float x, float y, float width, float height); Color used is the color of the canvas

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

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

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

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( );

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

HTML 5 – arcs and circles void arc ( float x, float y, float radius, float startAngle, float endAngle, boolean anticlockwise); 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

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;

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

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

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

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