Graphics & Animation with HTML5

Graphics & Animation
with HTML5
Graphics & Animation
with HTML5
Pushpendu Purkait
Software Consultant
Knoldus Software LLP
Pushpendu Purkait
Software Consultant
Knoldus Software LLP

Agenda
● Introduction of HTML5
● What's new in HTML5 ?
● HTML5 Graphics
● HTML5 Animation
● Demo

Introduction of HTML5
● HTML5 is the fifth revision and newest version of the HTML
standard.
● It offers new features that provide not only rich media support,
but also enhance support for creating web applications that
can interact with the user, his/her local data, and servers,
more easily and effectively than was possible previously.

What's new in HTML5
● DOCTYPE
● The <Figure> element
● No More Types for Scripts and Links
● New <input> types
– color
– number
– email
– url
– range

What's new in HTML5 cont..
● <header>,<footer> tags
● Required Attribute
● <audio>,<video> tag
● Regular Expression

DOCTYPE
● HTML4
– <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" “
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.
”>
● HTML5
– <!DOCTYPE html>

The <figure> tag
● Before
<img src=”path/to/image” alt=”alternate text”>
<p>Description of image</p>
● Now
<figure>
<img src=”path/to/image” alt=”alternate text”>
<figcaption>
<p>Description of image</p>
</figcaption>
<figure>

No more types for Scripts and links
● Before
<link rel="stylesheet" href="path/to/stylesheet.css"
type="text/css" />
● Now
<link rel="stylesheet" href="path/to/stylesheet.css" />

New <input> tags
● Color - To choose color from the color palette
● Number – To get only numbers in textbox.
● Email – To get only email in textbox.
● Url – To get only URL in textbox.
● Range – To get value within a range.(By using
Slider)

<header><footer> tags
● <header> tag is used to add header on web
page.
● <footer> tag is used to add footer on web
page.

Required Attribute
● User can't leave the field blank
● JavaScript is no longer required for client side
validation.
<input type="text" name="Input"
required="required">

<audio> tag
● <audio> tag is used to add an audio file to web page.
● In case <audio> tag is not supported by web browser, We can
add alternative text.
● Multiple files can be added if first is not supported by browser
then next will be played.
● We can add controllers in <audio> tag.
<audio autoplay="autoplay" controls="controls">
     <source src="file.ogg" />
     <source src="file.mp3" />
     <a>Download this file.</a>
</audio>

<video> tag
● <video> tag is used to add video to the web page.
● In case <video> tag is not supported by web browser, We can add alternative text.
● Multiple files can be added if first is not supported by browser then next will be played.
● We can add controllers in <video> tag.
● We can access out webcam and show it in <video> tag.
<video id=”webcam”>
<p> Your browser is doesn't support it.</p>
</video>
<script> var video = document.getElementById('webcam');
Video.src = window.URL.createObjectURL(localMediaStream);
<script>

Regular Expressions
● We can add regular expressions to <input> tags for
validation, There is no JavaScript required.
<form action="" method="post">
    <label for="username">Create a Username: </label>
    <input type="text"
       name="username"
       id="username"
       placeholder="4 <> 10"
       pattern="[A-Za-z]{4,10}"
       autofocus
       required>
    <button type="submit">Go </button>
</form>

HTML5 Graphics
● <canvas> is the most important part of HTML5
graphics.
– At first sight a <canvas> looks like the <img>
element, with the only clear difference being
that it doesn't have the src and alt attributes.
– <canvas> has only two attributes height & width.
both are optional and can be set using DOM
properties.
● Fallback Content- If browser doesn't support canvas
than we can add fallback content.

HTML5 Graphics cont...
● We can draw anything on <canvas> by using
some inbuilt functions.
● Some tasks which can be done in canvas:
– Drawing Rectangle
– Drawing Path (lines & arcs)
– Applying Colors & Style
– Rendering Text
– Applying Transformation (translation,scaling, rotating)

Canvas Context
● There is a context of canvas by which we draw
everything on canvas.
● Context contains some properties for drawing
for example: color, width etc.
● For best practice when we call any function,
we should always save() the context first and
at last restore() the context.

Drawing Rectangle
● We can draw rectangles by 3 ways
– fillRect(x,y, width, height):- draws a filled rectangle.
– strokeRect(x,y, width, height):- draws an outline.
– clearRect(x,y,width, height):- clears the area.

Drawing Path
● Paths can be of two types
– Closed
– Open
● There are some steps of drawing a line on canvas
– BeginPath():- creates a new path
– moveTo(x,y):- moves the cursor to (x,y) point.
– lineTo(x,y):- draws line from current position to (x,y) point
– stroke() :- draws the line on canvas.(without this no lines will be
drawn)
– closePath():- draws line from current position to first point.
– fill():- fills the closed path.

Applying Colors & Style
● We can set fillStyle for filling the object.
function draw() {
var ctx = document.getElementById('canvas').getContext('2d');
for (var i=0;i<6;i++){
for (var j=0;j<6;j++){
ctx.fillStyle = 'rgb(' + Math.floor(255-42.5*i) + ',' +
Math.floor(255-42.5*j) + ',0)';
ctx.fillRect(j*25,i*25,25,25);
}
}
}

Applying Colors & Style
●
We can set strokeStyle for outlining the object.
function draw() {
for (var i=0;i<6;i++){
for (var j=0;j<6;j++){
ctx.strokeStyle = 'rgb(0,' + Math.floor(255-42.5*i) + ',' +
Math.floor(255-42.5*j) + ')';
ctx.beginPath();
ctx.arc(12.5+j*25,12.5+i*25,10,0,Math.PI*2,true);
ctx.stroke();
}
}
}

Rendering Text
● We can fill text or make outline of text by using
fillText(text, x, y, [maxWidth]) and strokeText(text,x,y,
[maxWidth]) here maxWidth is optional.
function draw(){
ctx.font = “48px serif”;
ctx.fillText(“Hello world”, 10, 50);
ctx.stroke(“Hello world”,50, 50);
}

Applying Transformation
● There are 3 types of transformations
– Translation – change position of an object.
– Scaling – change size of an object.
– Rotation – rotating an object with respect to a
point.

Translation
function draw() {
for (var i=0;i<3;i++) {
for (var j=0;j<3;j++) {
ctx.save();
ctx.fillStyle = 'rgb('+(51*i)+','+(255-51*i)+',255)';
ctx.translate(10+j*50,10+i*50);
ctx.fillRect(0,0,25,25);
ctx.restore();
}
}
}

Rotating
function draw() {
ctx.fillStyle = "#0095DD";
ctx.fillRect(30,30, 100, 100);
ctx.rotate((Math.PI/180)*25);
ctx.fillStyle = "#4D4E53";
ctx.fillRect(30,30, 100, 100);
ctx.fillStyle = "#0095DD";
ctx.fillRect(150, 30, 100, 100);
ctx.translate(200, 80); // translate to rectangle center
ctx.rotate((Math.PI/180)*25); // rotate
ctx.translate(-200, -80);
ctx.fillStyle = "#4D4E53";
ctx.fillRect(150, 30, 100, 100);
}

Scaling
function draw() {
// draw a simple rectangle, but scale it.
ctx.save();
ctx.scale(10, 3);
ctx.fillRect(1,10,10,10);
ctx.restore();
// mirror horizontally
ctx.scale(-1, 1);
ctx.font = "48px serif";
ctx.fillText("MDN", -135, 120);
}

HTML5 Animation
● Animation is a part of Canvas.
● Animation is nothing but rendering canvas
frame by frame.
● There are some basic steps for animation
– Clear the canvas
– Save the canvas state
– Draw animated shapes
– Restore canvas state

Controlling the animation
● Shapes are drawn to the canvas by using the canvas methods directly
or by calling custom functions. In normal circumstances, we only see
these results appear on the canvas when the script finishes executing.
For instance, it isn't possible to do an animation from within a for loop.
● Instead we can schedule them to occur after a particular time.
● There are three ways to control the rendering of frames.
– setInterval(function, delay)
– setTImeout(function, delay)
– requestAnimationFrame(callback)

Controlling the animation cont...
● setInterval(fxn, delay):- Starts repeatedly executing the
function specified by function every delay milliseconds.
● setTimeout(fnx,delay):- Executes the function specified
by function in delay milliseconds.
● requestAminationFrame(callback):-Tells the browser that
you wish to perform an animation and requests that the
browser call a specified function to update an animation
before the next repaint. It gives us 60 frames/second.

Demo
● Video Demo: Video
● Webcam Demo : Webcam
● HTML5 Graphics: Graphics
● HTML5 Animation: Animation

Graphics & Animation with HTML5

Graphics & Animation with HTML5

Recommended

More Related Content

What's hot (20)

Viewers also liked (20)

Similar to Graphics & Animation with HTML5 (20)

More from Knoldus Inc. (20)

Recently uploaded (20)

Graphics & Animation with HTML5