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 )";
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,
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