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

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

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

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 4th 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